React applet example

If you want to develop applets with React JS you can follow this example. This tutorial explains you how to set up Create React App and create the first applet.

Prerequisites

• Node.js 8.16.0 or Node.js 10.16.0 or a later version on your local development machine

You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

Creating an App

To create a new app, let's follow this method, but you can find more here (https://github.com/facebook/create-react-app). 

npx

npx create-react-app example-app

It will create a directory called example-app inside the current folder.
Inside that directory, it will generate the initial React JS project structure and install the transitive dependencies.

Add signageOS

For creating and running your applet you must add signageOS dependencies to the project:

• @signageos/front-display
• @signageos/front-applet is a JS API library

You can add these dependencies in package.json manually or you can add it and install it with npm.

Use npm

npm i @signageos/front-display@latest
npm i @signageos/front-applet@latest

Add manually

  "dependencies": {

    "@signageos/front-applet": "^5.10.1",

    "@signageos/front-display": "^12.1.0",

    "@testing-library/jest-dom": "^5.16.5",

    "@testing-library/react": "^13.4.0",

    "@testing-library/user-event": "^13.5.0",

    "npm-watch": "^0.11.0",

    "react": "^18.2.0",

    "react-dom": "^18.2.0",

    "react-scripts": "5.0.1",

    "web-vitals": "^2.1.4"

  }

After you add these dependencies manually you should run:

npm install 

For installing new dependencies.

Add npm watch

To allow us to run scripts in package.json whenever there are changes in the app

npm i npm-watch

Also add this to package.json

 
"watch": {

    "build": {

      "patterns": [

        "src"

      ],

      "extensions": "js,jsx"

    }

  }

And the script

  "scripts": {

    "start": "react-scripts start",

    "watch": "npm-watch",

Modify index.js

In this part you import sos from @signageos/front-applet and create code that checks if sos is running, after sos is fully loaded React JS will render.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import sos from "@signageos/front-applet";


    sos.onReady().then(() =>{
      console.log("Ready to rock with React JS");
      ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
})

Modify package.json

Before you build this project it is necessary to add the following code to your package.json. This changes path generation in the project to relative path.

  "version": "0.1.0",

  "homepage": ".",

  "main": "build/index.html",

  "files": [

    "build"

  ],

Testing the applet on emulator

Install latest sOs CLI

npm install @signageos/cli@latest

Run these commands in separate terminals

npm run watch

sos applet start

The browser will update the changes after reloaded.

Please note that this command is only relevant to applets not created via CLI.

Building project

For creating applet you need to build your project. After the build command, npm generate build folder with index.html.

npm run build 

Once built you have a complete React JS project for creating your Applet and you can upload and test it on a physical device following this guide