Development in the cloud IDE has become increasingly popular these days. Since Tabris.js 3.3, you can develop Tabris.js applications with Gitpod, which is one of the popular online IDE’s that runs in modern browsers and can be launched from any GitHub page.
Running the Reddit Viewer Example from Gitpod
The Reddit Viewer Example is a TypeScript/JSX-based Tabris.js example project. The app shows Reddit posts retrieved from the Reddit API, enables them to be filtered and to switch the display layout.
The project is already configured for Gitpod and can be launched in several ways:
- Using browser extension that adds a button to the relevant GitHub pages:
- By clicking the Run in Gitpod image in the README file:
- Simply with the Gitpod prefix:
Since the login is done through the GitHub OAuth, it is required to sign in to GitHub to launch the project successfully.
Opening the repository installs minimum dependencies required, the preview-browser opens with a QR code for the user to scan with the Developer App.
More Tabris.js projects that work with Gitpod can be found here.
To launch the example app, we need first to scan the QR code in the preview-browser with the Developer App:
After scanning the QR code, the app sources are downloaded from the Gitpod instance to your Developer App, where they are executed:
Modification on the source file reloads the application automatically. We will put a simple console.log call to the app.ts file to see how logging and auto-reload works:
As we change files in the project, we should save them manually (File > Save All).
I would suggest enabling the auto-save (File > Auto Save):
After the application is automatically reloaded, logs are printed in the IDE:
The logs are also printed on the Developer Console, which opens by sliding from the right edge of the screen to the left:
In our next blog post, we will show how to configure your own Tabris.js app for use in Gitpod.