We have provided an NPM package to assist you with building and developing your own app. Many of the guides and tutorials to follow will build on this process, so it’s a good idea to start by replicating the results here on your development machine before proceeding.

If you’re interested in learning the details of how this template was created, see Anatomy of a FrontPanel App

• Node.js – Download | Node.js (nodejs.org)
• Node Package Manager – Downloading and installing Node.js and npm | npm Docs (npmjs.com)
• Source Code Editor (e.g. Visual Studio Code)
• FrontPanel Application version 6.0.0 or greater

The NPM create walks you through creating an app compatible with the FrontPanel Platform. To use, run the command.

npm create @opalkelly/frontpanel-app@latestCode language: CSS (css)

You will be asked a series of questions, answer them as needed

√ Enter project name ... npm-create-app
√ Enter project version ... 1.0.0
√ Enter project description ... An app built using npm create
√ Enter project author ... OpalKelly
√ Include AI scaffold? ... yes
Creating 'C:\work\tmp\npm-create-app' directory...
Creating 'npm-create-app' project...
Project 'npm-create-app' created successfully!Code language: PHP (php)

Go to the directory of your project

cd npm-create-app

Install the project dependencies

npm install

The next command will build and package the app, producing an output file named app.fpp and place it in an output directory within the project folder. (output/app.fpp)

npm run pack

The easiest way to run the app is to install it in the FrontPanel App Launcher. To do this, click “Install an App” at the top-right in the launcher window then choose the app.fpp file built in the previous step:

This will install the application into the launcher so it should look like this:

Note: If you want to make changes to the app and re-install it, just install the app again using the “Install an App” button.

Click and drag the TemplateApp to an available device to launch the app.

The application should show the device name and serial number.

Congratulations! You’ve built and run your first FrontPanel Platform App.

This is a good checkpoint to ensure the project is configured correctly before moving on to the next steps in the developer’s guide.

You’ve just built, installed, and ran your first FrontPanel Platform App. This exercise started with an application source project that was preconfigured with common defaults and settings for a JavaScript app. For some additional exercises and information, please visit the other pages in this guide:

• In Anatomy of a FrontPanel App, we summarize and explain the structure of a FrontPanel Platform App and provide details about what makes Platform Apps unique.
• In Work Queue, we introduce a basic work queue concept that will help you design well-behaving JavaScript applications that operate asynchronously and still respect the single-threaded communication requirement of USB devices.
• In Debug with Chrome DevTools, we show how easy it is to debug live apps using the debugger and console built into the platform.
• In Bootstrapping with AI Agents, we show how to use the bundled AI scaffold to rapidly develop a FrontPanel App.