Skip to main content
Version: Next

How to build SMIL Player Applet

Following guide provides steps to build your version of SMIL Player from Github repository and uploading it to signageOS DevSpace.

Prerequisites:​

  1. signageOS Account
  2. created Organization in Box (create one here)
  3. Node.js >= 16
  4. NPM
  5. a shell/terminal environment (like bash, zsh, powershell...)
  6. a source-code editor (like VSCode, Sublime, WebStorm...)

Create an Applet​

  1. First, navigate to signageOS Box -> Applets -> New Applet
  2. Create a new Applet
  3. Once created, get the Applet UID, we will need it later in the process in Step 5

Clone signageOS SMIL Player repository​

In your favorite terminal, use the following commands:

Clonning from official SMIL Player repository
git clone https://github.com/signageos/smil-player.git
cd ./smil-player

The repository is located on signageOS Github account: https://github.com/signageos/smil-player

Install signageOS CLI and additional libraries​

npm install @signageos/cli@latest -g
npm i -SE @signageos/front-display
npm i -SE @signageos/front-applet

Initiate signageOS CLI and login​

Login with your signageOS Account and follow the guide in the terminal

sos login

Select your Organization under which you generated your Applet in the step 1

sos organization set-default

Build the project and test it locally​

To run the SMIL Player, make sure you build it first.

npm install && npm run prepare

sos applet start --applet-dir dist --entry-file-path dist/index.html

Now you should be able to open up your web browser on http://Your-IP-Address:8090 and see the project running. Do your changes, if necessary, and continue with the next step.

Login to signageOS CLI and upload your version to signageOS​

### Adjust package.json file

  1. Open up package.json file in the root folder of the project
  2. Check the 5th line main and make sure there is dist/index.html
  3. Change the appletUid to YOUR Applet UID from the Step 1
Add your Applet UID into package.json
{
  "name": "@signageos/smil-player",
  "version": "5.2.0",
  "description": "SMIL player",
  "main": "dist/index.html",
  "files": [
    "dist",
    "README.md",
    "CHANGELOG.md",
    "package.json"
  ],
  ...
    omited items..
  ...
  "sos": {
    "appletUid": "41240bf563bac504af...e06dfeb6824"
  }
}

Upload to signageOS​

Make sure you build your project before running the sos applet upload.

// build the project
npm run build-prod

// upload to signageOS
sos applet upload --entry-file-path dist/index.html

Next Steps​

Now you have successfully uploaded your SMIL Player into the signageOS and you can start deploying it to supported device.

Learn more on how to deploy the SMIL Player here.