Configure your Tabris.js project for use in Gitpod

In the previous blog post, we talked about Gitpod, a great online IDE which provides ready-to-code development environments in the browser for GitHub projects. We opened the dev environment on the Tabris.js Reddit Viewer Example project, made small changes, and ran it. Now let’s configure our own Tabris.js based project for use in Gitpod.

If you don’t have a relevant project in GitHub yet, you can create one by following these instructions and publish to your repository.

Gitpod can launch a dev environment for our project with a single click. But first, we need to install the minimum dependencies, start the build, watcher, and dev server in order to run the source code in the Tabris.js Developer App. Fortunately, with Gitpod, we don’t need to go through a list of setup instructions every time we start a project. We can automate the setup with the configuration file that contains a list of commands that should be executed when a dev environment is started.

To automate the setup, we add .gitpod.yml to the project with the following content:

First, we define start tasks that have two properties: init and command.

• We use init property to specify shell commands that install tabris-cli globally after a workspace is freshly cloned. This installation happens only once but not when you restart a workspace or start a snapshot.
• Afterwards, we use the command property to specify bash commands that install dependencies and start dev server. These commands are run on every start of a workspace.

Then we configure ports that have two properties: port and onOpen.

• We use port property to expose the port 8080 to access the dev server running on the same port in our workspace.
• Next, we use onOpen to specify the opening behavior of the newly started service which opens in the preview on the right.

The dev server is started by running the gitpod script that should be added to the package.json.

Options in the gitpod script are:

• tabris serve starts a server the Tabris.js developer app can be pointed to.
• -a enables auto-reloading the application when a source file is modified.
• -w executes the watch given in the package.json of the app.
• --no-intro does not print the available external URLs or QR code to the console; the QR code will be displayed via HTML since it wouldn’t fit on the console.
• --port 8080 changes the port to 8080 the HTTP server listens to.
• --external $(gp url 8080):443 uses printed URL with the 443 port as the advertised public URL, to the exclusion of all others. The advertised public URL is the URl encoded in the QR Code.
• $(gp url 8080) prints the URL which points to the service listening on port 8080 in this current workspace.

You can reuse these configurations in your other Tabris.js projects as well.

Now we can start a ready-to-code and fully initialized development environment with a single click from anywhere and anytime.

In our next blog post, we will show how to commit your code changes from Gitpod.