React applet example

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

Prerequisites

• Node.js 8.16.0 or Node.js 10.16.0 or 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 runnig 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 manualy or you can add it and install with npm.

Use npm

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

Add manualy

"dependencies": {
+    "@signageos/front-display": "7.7.0",
+    "@signageos/front-applet": "4.4.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.3"
    },
    }

After you add these dependencies manualy you should run:

npm install 

For installing new dependencies.

Modify index.js

In this part you import sos from @signageos/front-applet and create code which checks if sos is runnig, 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",
    "private": true,
+   "homepage": ".",
    "dependencies": {

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 complete React JS project for creating your Applet and you can test it.