Once you have successfully set up your dev environment, the next step is to actually build and ship your app to any device.
This tutorial will walk you through the process of Building your application, Shipping your app to signageOS for final in-app build and installing your application to the actual device.
In this tutorial we will cover part 3. and 4. on the image below. The previous steps - 1. and 2. - are described in "Setup Developer Environment" guide.
What you will need
You need the following to get started:
- properly set up dev environment
- having at least one Organization in the Box (create one here)
- Node.js >= 10.15.0 with NPM included in the file package. The latest stable Node version you can find on the following site: https://nodejs.org/en/download/
If necessary, the previous Node releases can be found on the site: https://nodejs.org/en/download/releases/
- Shell, Gitbash, Powershell or Cmder
- For best user experience, use windows terminal and run Gitbash inside of it (get one from there)
SignageOS CLI Documentation On Our GithubCheck the whole CLI repository and all commands on our Github
React JS Quick Start GuideVisit our React JS repository for further details.
Angular Quick Start GuideVisit our Angular repository for further details.
Vue JS Quick Start GuideVisit our Vue JS repository for further details.
Are you getting any error? Check our FAQ section below.
Code your project
In your project folder do any changes you need. You can use webpack, your already existing code, basically whatever you need. Plus, you can instantly start using signageOS JS API for any task needed by your application (e.g.: file system management, accelerated video playback and more).
npm start you will get the URL (e.g.:
https://192.168.0.1:8090) where your code is running. It's easy to debug with browser built-in code inspector.
Build your application
Once you are happy with your app behavior, it's time to build it.
Run following command:
npm run build
This command automatically gets all your code and bundle it together in a way signageOS Core Apps can understand. The final code can be found in the
Once the build is successful, upload your code to signageOS with the following command:
sos applet upload
If there will be information in the CLI on applet version not recognized, you will need to add it to the package.json file.
Why you need to upload the code to signageOS Cloud?
Because signageOS will build the Core Apps for each and every platform for you. The Applet you built needs to be run inside the Core App. As building Core Apps is under NDA and Dev agreements with manufacturers, we do that for you securely in our cloud. You just push your code and we deliver the final Core Apps.
Using local media files for Applet development
Once the code applet is uploaded to signageOS cloud you can test it even with the blob file/s (video or image files) located on your local machine without uploading it to your static server. First you need to use the following command in the local file directory.
npx static-server . // response Running . on port: 8080 Opening http://localhost:8080
In case of the any error message e.g.
options.index is now deprecated please use options.templates.index instead. run the following npm command
npm install http-server -g and in the static server directory file run
http-server. This should enable display the media file on the static server.
Then point the local file location in the applet code via signageOS code editor with your ip address, port number and file name
If the media content won't be displayed on the localhost using Chrome browser, please refer to the: Adblock issue in Chrome
Ship your application
The final step is approaching. Once you send your code to signageOS Cloud (
sos applet upload) it is automatically processed and ready for being deployed on any supported device.
You can see your Applet in Box -> Applet section.
Deploy Your Applet Via BoxVisit our React JS repository for further details.
Deploy Your Applet Via REST APIContinue here
Build & Deploy Your Applet Via Core App with built-in AppletContinue here
What is the difference between npm start and sos applet start?
npm start will run our prepared compilation pipeline and emulator with hot reloaded enabled. This works only for projects generated by our CLI Tool.
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 it's main purpose is to run already existing application that use different technologies and project structure.
Error while uploading applet to signageOS via
sos applet upload?
The error might be caused by some of these situations:
If you do not have the
.sosignore file in your project, the
.gitignore is used instead. A solution to that is to add
.sosignore and put there all files and folders that are not supposted to be in the final built application. Usually the only thing you do not ignore is the
Make sure you definitely ignore the
Right now, there is a bug that prevents you to use
sos applet upload if your files or files in folders are completely empty. Please, check your project (usually the
/dist) folder for any empty files e.g.:
sos is undefined and cannot use the JS API
In case you do not have
sos object available, you need to manually add it to your project by one of the following options:
import sos from '@signageos/front-applet';
const sos = require('@signageos/front-applet');
<script src="..path/to/the/front-applet.js" />
You can manually download the library here: https://2.signageos.io/lib/front-applet/4.0.0/bundle.js. You can also download any other version by changing the
4.0.0. to other version that is available.
Unable to request PERSISTENT file system.
If you are trying to open emulator and see the error on the console. Please use Chrome with version below 104. This new version introducing breaking security changes that conflict with how our front-display and front-applet communicate via iframe. Rest assured, the issue will be fixed in our next release.