Build and Deploy your Applet

Have more questions? Submit a request

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.

 

setup_sos_env_01.png

 

What you will need

You need the following to get started:

 SignageOS CLI Documentation On Our Github

Check the whole CLI repository and all commands on our Github

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

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.

 

applet_version.png

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

 

npx_command.png

 

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

 

file_location.png

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 REST API

Continue here

Build & Deploy Your Applet Via Core App with built-in Applet

Continue here

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.

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