VSCode in the Browser #

VS Code in Browser

In this tutorial, you will deploy your own OpenVSCode Server from gitpod.io. We will explain all the necessary SetOps commands that we need to deploy the application. You can find a summary of all commands at the end.

Prepare your SetOps Environment #

💡 At first, you need to choose a name for project, stage, and app. You can edit them in the form in the top right corner.

Let’s start by creating a Project.
```
setops project:create <PROJECT>
```
Create a Stage for your project.
```
setops -p <PROJECT> stage:create <STAGE>
```
project and stage must only contain lowercase letters a-z and numbers 0-9 and start with a lowercase letter. The length of project has to be between 3 and 20 characters and the length of stage between 3 and 12. It also has to start with a lowercase letter. A valid example is parkscheibe & staging.
Create the App web.
```
setops -p <PROJECT> -s <STAGE> app:create <APPNAME>
```
The name for apps must only contain lowercase letters a-z and numbers 0-9 and dashes -. The name must be between 3 and 16 characters long and start with a lowercase letter.

We want it to be publicly reachable, so we set the network’s public option to true.
```
setops -p <PROJECT> -s <STAGE> --app <APPNAME> network:set public true
```
The default exposed port of the Server is 3000, so let’s change it:
```
setops -p <PROJECT> -s <STAGE> --app <APPNAME> network:set port 3000
```

Create the Services the App needs.

We need to create a Volume for the data and link it to the App <APPNAME>.

setops -p <PROJECT> -s <STAGE> service:create volume --type volume
setops -p <PROJECT> -s <STAGE> --app <APPNAME> link:create volume --path /home/workspace

Commit your Changeset.

setops -p <PROJECT> -s <STAGE> changeset:commit

Pull your Image #

You need to build an image of the application to deploy it with SetOps. We use the Docker Image from dockerhub. You can use our Dockerfile for your own apps, too.

Pull the image using docker pull.

docker pull gitpod/openvscode-server:latest

Deploy your Image #

Push the image to the SetOps Image Registry.

docker tag gitpod/openvscode-server:latest api.setops.co/<ORGANIZATION>/<PROJECT>/<STAGE>/<APPNAME>:latest
docker push api.setops.co/<ORGANIZATION>/<PROJECT>/<STAGE>/<APPNAME>:latest

[...]
web: digest: sha256:0f7d58c45f7d97013c209b2603f2d098fd0ccfefb2ee738bcbce154491d2426c size: 3245

Create a release and deploy it.

setops -p <PROJECT> -s <STAGE> --app <APPNAME> release:create sha256:0f7d58c45f7d97013c209b2603f2d098fd0ccfefb2ee738bcbce154491d2426c
setops -p <PROJECT> -s <STAGE> --app <APPNAME> release:activate 1
setops -p <PROJECT> -s <STAGE> changeset:commit

Verify your app status is RUNNING.

setops -p <PROJECT> -s <STAGE> app:info <APPNAME>

Open the application in your browser.

Copy the domain in format web.staging.project.$YOURDOMAIN.
```
setops -p <PROJECT> -s <STAGE> --app <APPNAME> domain
```

Enjoy!

Commands Summary #

If you don’t want explanations for all the commands, you can use these snippets for a fast start. Choose a name for project, stage, and app first. You can edit them in the form in the top right corner.

OpenVSCode Server Blueprint

Configure App

setops project:create <PROJECT>
setops -p <PROJECT> stage:create <STAGE>
setops -p <PROJECT> -s <STAGE> app:create <APPNAME>
setops -p <PROJECT> -s <STAGE> --app <APPNAME> network:set port 3000
setops -p <PROJECT> -s <STAGE> --app <APPNAME> network:set public true
setops -p <PROJECT> -s <STAGE> service:create volume --type volume
setops -p <PROJECT> -s <STAGE> --app <APPNAME> link:create volume --path /home/workspace
setops -p <PROJECT> -s <STAGE> changeset:commit

Push App to SetOps Registry

docker pull gitpod/openvscode-server:latest
docker tag gitpod/openvscode-server:latest api.setops.co/<ORGANIZATION>/<PROJECT>/<STAGE>/<APPNAME>:latest
docker push api.setops.co/<ORGANIZATION>/<PROJECT>/<STAGE>/<APPNAME>:latest

Deploy App

setops -p <PROJECT> -s <STAGE> --app <APPNAME> release:create <SHA FROM PUSH>
setops -p <PROJECT> -s <STAGE> --app <APPNAME> release:activate 1
setops -p <PROJECT> -s <STAGE> changeset:commit

Destroy Stage & Project

setops -p <PROJECT> stage:destroy <STAGE> --force
setops project:destroy <PROJECT> --force