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

Deploy your image #

Deploy your image
```
setops -p <PROJECT> -s <STAGE> --app <APPNAME> release:deploy gitpod/openvscode-server:latest
```
release:deploy executes all required steps to deploy a new image to SetOps. You can find more information about the distinct steps and how to run them isolated here.

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

Deploy App

setops -p <PROJECT> -s <STAGE> --app <APPNAME> release:deploy gitpod/openvscode-server:latest

Destroy Stage & Project

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