Published using Google Docs
Custom Apps - tutorial
Updated automatically every 5 minutes

Document marked as: CONFIDENTIAL

CUSTOM APPS:

  1. Create your ‘Custom App Template’

  1. Deploy your app code
  1. via UPLOAD
  2. via CLI (Command Line Interface)
  3. *How to define app settings-schema.json - coming soon

  1. Add your template to ‘My Apps’

  1. CREATE YOUR CUSTOM APP TEMPLATE
  1. Go to App Store > Custom Apps > ‘Create Your Custom App Template’

  1. Give your template a name & description
  2. Choose the method for deploying your app source code and Click SAVE

  1. DEPLOY YOUR APP SOURCE CODE  

Tips:

  1. Deploy via ‘Upload’   

  1. Your source code needs to be in a compressed .ZIP folder :

  1. Once your source code is uploaded the deployment process will start. On success source code version will be automatically generated by Signage Rocket and any settings (if specified in schema.json) will show as active.


You can upload a new version of the code anytime,  just make sure that each time a new .ZIP folder is generated.

  1.  Deploy via ‘CLI’ - Use this method if you prefer to use Command Line Interface for deployment.
  1. If you have chosen this method you will see an ‘App Deploy token’ (unique to your application) that has been generated. You will use it later in  your CLI

  1. Open up your CLI and install ‘Rocket CLI’ package :

$ npm i -g https://0f8d0d258ac490fcb0a5f58ddcf77ef4e6635b07:x-oauth-basic@github.com/signagerocket/rocket-cli.git

$ yarn global add https://0f8d0d258ac490fcb0a5f58ddcf77ef4e6635b07:x-oauth-basic@github.com/signagerocket/rocket-cli.git

  1. In your CLI go to the root of your application e.g. my-custom-app

( build path - the relative path to your build. This is what will be deployed. It must contain at minimum an index.html )

 Example of the application folder structure

  1. Initialise your app

$ rocket init 

a folder ‘.rocket’ will be created inside your project:

 

  1. Copy the unique token from your app template and paste to CLI

$ Please enter your app token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50SWQiOjEsImFwcFRlbXBsYXRlSWQiOjEwNSwiaWF0IjoxNTM3NTQxOTQxfQ.ixy-Ekd_6bP7u7gi9XFI6JtOdOvKEptV9aACKJiGIwU

$ Where is the folder where your built application will be?(./build)

  1. Inside the .rocket folder the following files have been created: ‘config.json’ and ‘schema.json’

 

schema.json - this is where you specify your app settings for other users.  This file is optional, you can leave it blank.

  1. Now run a deploy command:

$ rocket deploy

  1. The deployment process will start. On success source code version will be automatically generated by Signage Rocket and any settings (if specified in schema.json) will show as active.

  1. If you make updates to your app source code or settings just run ‘rocket deploy’ each time. The new version of your app will be automatically deployed.
  2. Please note: if you delete your app template make sure you also delete the ‘.rocket’ folder inside your app folder structure as it cannot be reused.

  1. How to specify app settings in schema.json

You can add settings to your application so users can easily customize the app to their own taste. You decide what these settings are. The settings will appear in your application e.g.:

Schema.json format:

{

  "styles": {

    "image1": "fa-code",

    "imageColor": "#FFFFFF",

    "imageBackground": "#039be5",

    "imageSize": "6vw",

    "imageUrl": "images/app.jpeg",

    "tutorialUrl": ""

  },

  "meta": {

    "texts": {

      "intro": "This is a custom app example",

      "list": {

        "features": [

          {

            "header": "Feature header example",

            "description": "Feature description example"

          }

        ]

      }

    }

  },

  "fields": {

  },

  "events": [

  ]

}


  1. ADD YOUR TEMPLATE to ‘My Apps’
  1. Create app instance by clicking ‘ADD TO MY APPS’ inside the template, or

 

from App Store view by clicking  + on the app tile:

  1. Give your app instance a name and adjust the settings (if applicable)

  1.  The app instance will appear in  ‘My Apps’  and you can now assign it to your display: