Build and Deploy your Applet

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.

 

 

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)

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).

By running 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.

In case you want to run your own project with signageOS JS API use sos applet start as mentioned in the previous step or Github.

Video-guide

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 /dist directory.

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.

 

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

 

 

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.

FAQ

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 it's main purpose is to run already existing application that use different technologies and project structure.

Troubleshooting

Error while uploading applet to signageOS via sos applet upload?

The error might be caused by some of these situations:

Missing .sosignore
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 /dist folder.

Make sure you definitely ignore the .git folder!

Empty files
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.: .gitignore, .nojekyll, etc.

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:

Option A)

import sos from '@signageos/front-applet';

Option B)

const sos = require('@signageos/front-applet');

Option C)

<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.