Quick Start Guide
This guide will help you create the foundation of a Tabris.js app and test it on a mobile device.
This guide targets Tabris.js 3 projects. Documentation for older versions can be found here.
Set up a mobile device
All you need is an Android or iOS device, connected to the same network as your development machine. Install the Tabris.js 3 Developer App. Start the app and (optionally) log in with your GitHub account.
Set up your development machine
On your development machine, the following software needs to be installed:
-
Node.js (installation guide). You need a version >= 16.0 (type
node -vto check your node version). -
Tabris CLI (type
npm install -g tabris-cli). - A text editor or JavaScript IDE of your choice.
Create your first app
Create a new empty directory for your project, open a terminal in this directory and type tabris init.
The Tabris CLI will ask you a number of questions including the project’s name and version and the type of project to create:
A Compiled Tabris.js app is written in JavaScript or TypeScript and offers support for the latest EcmaScript features and JSX. It is recommended for more complex Tabris.js projects. The only downside of this setup is that the code needs to be transformed before execution, which is done automatically when using the Tabris CLI or build service.
A Vanilla Tabris.js app is written in plain JavaScript that is executed as-is in the JavaScript engine. As a result there may be minor differences between the platforms.
The CLI will then create a simple example project and install the required dependencies. Let’s have a look at the most important files:
-
package.json: This is the central manifest file of your project. It includes your app’s name and version, dependencies, and a pointer to the app’s main module in themainfield. Unless you are working with a vanilla type project this needs to be the compiled version of the module, usually in thedistfolder. -
src/app.js,src/app.jsxorsrc/app.tsx: That’s your app’s main JS/TypeScript file. You are free to change its name and location, but you have to adjust themainfield in thepackage.json. -
cordova/config.xml: This is the Cordova configuration file. You won’t need this file until you build your app (see build documentation).
Of course, you can also set up your projects manually. At the very least, you need a package.json with a dependency to tabris and a main JavaScript file. If you setup your project manually, you’ll have to run npm install in this directory to install the tabris module.
Run the app
In the project directory, type npm start. This will start the development server at a free port and print a QR-code to the console. Keep this server running as long as you are testing your app. In the Developer App, go to the URL tab and scan the QR-Code. (Alternatively, enter the URL printed below the QR-Code and tap Connect.) The Developer App will now download the source code and execute it on your mobile device.
Swipe from the right edge of the screen to open the developer console, which lets you restart the script or go back to the Developer App.
Now you can start developing. You may want to have a look at the rest of the documentation and the Tabris.js snippets.
Publishing your app
For submission to the App / Play Stores you will need to bundle, brand and build your app, either using the free online build service (on tabrisjs.com) or using a local build. This process is explained in Build your app.
Feedback
Help us improve Tabris.js! Feedback via mail or chat is always welcome. Feel free to invite your friends if you find Tabris.js interesting.
