Hello World - Setup Developer Environment

Have more questions? Submit a request

Start your development easily, locally, and with your preferred IDE. Install signageOS CLI, develop your Applet (HTML5 player) and deploy first devices.

Info

In this tutorial we will cover parts 1. and 2. on the image below. The next steps - 3. and 4. - are described in the "Build and Deploy your Applet" guide.

setup_sos_env_03.png

What you will need

You need the following stack to get started with your development:

TIP: Windows Terminal and Cmder allows open more than one console window which can be helpful in the daily development work.

Start with signageOS CLI

signageOS CLI is a command-line tool for rapid local development that brings you the ability to easily start developing on top of the signageOS framework from your favorite IDE.

 

Video-guide

Install the CLI

npm install @signageos/cli -g
sos --help

It may happen that the 'sos' command won't be recognized

sos_not_recognized.png

In this situation please reinstall the Node with the NPM package on your system. If necessary, please install the older version of the package but not older than v.10.15.0

cli_01_help.gif

The full documentation can be found on the signageOS Github.

Once installed, you can use sos --help for quick help within the CLI.

Log in using the CLI

sos login

cli_02_login.gif

Set default Organization

In order to continue, it's necessary to set your default Organization. If you have none, (create one inside Box here. Then continue with the following command:

sos organization set-default

Create your first Applet

Applet includes your application code along with the signageOS JS API and creates a standardized environment for your code to run on numerous devices.

Create your Applet project with the interactive wizard:

sos applet generate

If there won't be any response in the console you will need to restart the local machine. It should solve the issue.

cli_03_applet_generate.gif

Once Applet project is successfully created, switch to the project folder and start the project via npm start.

Applet <name of the applet> created!
use: cd <name of the applet> and npm start
cd 'your-applet-name'
npm start

cli_04_npm_start.gif

Your project is now successfully created and running on http://your.pc.ip.address:8090. Open the URL in your browser (preferably Chrome) and start your coding.cli_run_local_emulator.png

cli_05_project_running.gif

cli_06_project_running.gif

If you created your Applet in the Box before using the CLI, use the Applet UID from Box to replace the one in your package.json file.

// package.json
"sos": {
    "appletUid": "Applet UID from Box"
}

 

Run your application using the CLI

If you already have an application where you implemented signageOS JS API you can start the project using sos applet start.

npm run build # or your build command
sos applet start 

cli_run_local_emulator.png

Your project is now running on http://your.pc.ip.address:8090. There is no hot reload at the moment. You can stop the applet by ctrl + c.

The full documentation can be found on the signageOS Github.

PRO TIP: If you need to use a different version of the JS API, use npm i @signageos/front-applet@version --save inside your project.
Using Applet Examples in CLI

If you would like to test some of our Applet Examples always use the pre-made project from cli-applet folder:

applet-example-cli.png

Once you copy the example, run:

npm run build # or your build command
sos applet start 

Next steps

NEXT: Build and deploy your applet

Continue here

DEV: Send Applet to the device directly from CLI

Continue here

FAQ

Will local development be possible? I do not like the web IDE.

Yes, you will be able to use VSCode or Webstorm for local development thanks to signageOS CLI.

Is the Emulator working offline?

Yes, Emulator supports offline mode and comes with built-in features for debugging and quick Applet development.

What is the difference between npm start and sos applet start?

The npm start will run our prepared compilation pipeline and emulator with hot reloaded enabled. This works only for projects generated by our CLI Tool.

The sos applet start will only run the emulator without hot reload and compilation. It just runs your application. It works with projects generated by our CLI Tools. But its main purpose is to run the already existing applications that use different technologies and project structures.

Code: 51501 - InternalVideoError: Couldn't play the video.

If you are getting this error in the Emulator it means that your Chrome is blocking the video playback. Kindly read more here: Emulator Limitations in CLI and Box. The quick fix is to click into the window and then refresh the page (F5).

51501-video-not-playing.png

 

 
 
Was this article helpful?
0 out of 0 found this helpful
Share