Skip to main content

signageOS SDK with existing application

Introduction​

signageOS JS SDK can be used with any type of javascript project and popular javarscript frameworks - React, Vue and Angular.

Following article describes basic implementation of JS SDK to any existing application.

Getting Started​

Do you already have a working app and now you would like to deploy it worldwide to signage devices? By using signageOS Tools you can do exactly that. Let us show you how it's done.

To get your existing application up and running you'll need only these few following steps:

  1. Install signageOS CLI Tools
  2. Install signageOS SDK and Emulator
  3. Upload your application build to signageOS
info

During this process, you will build your current application as an Applet. Applet is a universal wrapper for your existing HTML5/JS application that you can seamlessly deploy to supported devices.

Prerequisites​

Getting the setup​

In the following picture, you can see a demo application that I'll be using throughout this tutorial as an example. It's a simple web application compiled by Webpack. But you can use tools and compilators you like.

Project structure

Now let's get started with a detailed description of each step where I'll show you how easy it is to start using signageOS SDK within your existing application.

Process​

Follow these steps to convert your application to Applet. All steps are performed in your project's directory.

  1. Login into the CLI Tools.
    Before you start with uploading your tested application you need to login using you Box account in to the CLI Tools.
    Use signageOS CLI to sos login.
  2. Set the default organization for the CLI Tools.
    Default organization is used later in the process as a target under which you upload your Applet to signageOS.
    Use sos organization set-default
  3. Ignore everything you don't want us to see or your app doesn't need to run.
    If you are already using .gitignore or .npmignore you are already set. But in case you want to ignore more or different files you can use .sosignore. It works exactly the same as the previously mentioned ignore files.
  4. Add signageOS to your application
    To use the features we offer you need to add signageOS dependencies to the project. @signageos/front-applet is a library that includes signageOS JS SDK and APIs.
    npm i -SE @signageos/front-applet
  5. Adjust your package.json
    package.json has to include two key items: main and files.
    main defined the location of the starting file of your application. Typically it's located in dist/index.html.
    files lists all folders and files to include while uploading your application to signageOS.
{
  "name": "your-cool-app",
  "version": "1.0.0",
  "main": "dist/index.html",
  "files": [
    "dist"
  ],
  ... //the rest of package.json

Use signageOS JS SDK​

At this point, your application is ready to leverage JS SDK.

note

To use sos in your javascript logic, you need to first wait until it's ready and fully initialize.

await sos.onReady();
console.log("signageOS is ready to rock");

Uploading Applet to signageOS​

Once your local development is completed, upload your Applet to signageOS. Uploaded Applet can be deployed to devices directly or you can generate your native deployment app.

sos applet upload

You will be asked for Organization, under which you want to upload your Applet and final confirmation.

Deployment guides
tip

Streamline your development and troubleshooting by leveraging Hot-reload on device. Push your changes directly to devices in your local network.