screenly / playground

Developing a Simple Message App with Screenly Playground

Scenario: A developer wants to create a Simple Message App for digital signage using Screenly Playground. In this guide, we will walk you through the process of creating a message app from scratch using the Screenly Playground platform.

First, let’s familiarize ourselves with the project structure and required files:

The project consists of several directories and files:

  • bootstrap/
  • theme/
  • images/
  • playground-theme.css
  • README.md
  • README.md
  • docs/
  • resolutions.md
  • dynamic-playlists/
  • Dockerfile
  • Procfile
  • README.md
  • app.json
  • app.py
  • requirements.txt
  • edge-apps/
  • asset-metadata/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • clock/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • countdown-timer/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • iframe/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • instagram/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • powerbi/
  • static/
  • README.md
  • index.html
  • powerbi.min.js
  • screenly.yml
  • qr-code/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • rss-reader/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • simple-message-app/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • weather/
  • static/
  • README.md
  • index.html
  • screenly.yml
  • images/
  • cyfe-logo.png
  • domo-logo.png
  • dynatrace-logo.svg
  • jenkins-logo.png
  • magento-logo.png
  • nagios-logo.png
  • playground.png
  • screenly-logo.png
  • shiphero-logo.png
  • shopify-logo.png
  • tableau-logo.png
  • yahoo-logo.png
  • zabbix-logo.svg
  • javascript-injectors/
  • examples/
  • cyfe-sign-in-via-credentials.js
  • domo-dashboard-via-access-code.js
  • domo-dashboard-via-credentials.js
  • dynatrace-login-via-credentials.js
  • ezcookie-cookies-consent-closing.js
  • hello-world.js
  • jenkins-sign-in-via-credentials.js
  • magento-signin-via-credentials.js
  • nagios-signin-via-credentials.js
  • powerbi-signin-via-cookies.js
  • powerbi-signin-via-credentials.js
  • screenly-signin-via-cookies.js
  • shiphero-signin-via-credentials.js
  • shopify-signin-via-credentials.js
  • tableau-via-cookies.js
  • unifi-signin-via-credentials.js
  • yahoo-cookies-consent-closing.js
  • zabbix-login-via-credentials.js
  • README.md
  • scripts/
  • grafana/
  • README.md
  • add-grafana-asset.py
  • requirements.txt
  • CNAME
  • LICENSE
  • README.md

Now, let’s begin creating our Simple Message App.

  1. Create a new directory for your app within the edge-apps folder:
mkdir simple-message-app
cd simple-message-app
  1. Initialize a new Node.js project:
npm init -y
  1. Install the required dependencies:
npm install express body-parser
  1. Create a new file named index.html within the static directory:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Message App</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to Simple Message App!</h1>
</body>
</html>
  1. Create a new file named app.js within the project directory:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 80;

app.use(bodyParser.json());
app.use(express.static('static'));

app.get('/', (req, res) => {
res.sendFile(__dirname + '/static/index.html');
});

app.listen(port, () => {
console.log(`Simple Message App listening at http://localhost:${port}`);
});
  1. Update the package.json file to include a start script:
"scripts": {
"start": "node app.js"
}
  1. Create a new file named screenly.yml within the project directory:
---
name: Simple Message App
description: A simple message app for digital signage using Screenly Playground
version: 1.0.0

app:
entry: app.js
port: 80
  1. Build and run your app:
npm start

Your Simple Message App should now be running on http://localhost:80.

Tests to verify the answer:

  1. Open your browser and navigate to http://localhost:80. You should see the “Welcome to Simple Message App!” message.
  2. Use a tool like Postman or curl to send a GET request to http://localhost:80. The response should include the contents of index.html.
  3. Restart your app and check the logs for any errors.
  4. Use a tool like Docker to build and run a Docker image of your app. The image should be able to serve the index.html file when accessed on port 80.