We have provided a FrontPanel Platform App template as a starting point to 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 Bootstrapping 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

Locate the Templates folder that was installed with the FrontPanel Platform. On MacOS and Linux it will be located in the downloaded package.

Copy the frontpanel-react-app project folder to a local workspace directory. This project template provides a quick way to get started developing applications that run on the FrontPanel Platform.

Set the current working directory to the root of the project and install the project dependencies.

npm install

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

npm run pack

The easiest way to run the app is to install it in the FrontPanel App Launcher. To do this, click on the + icon at the top-right in the launcher window:

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, you just need to click on the trash icon at the top-right of the application card to uninstall it, then install it again.

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

The application should load and display the current value of the counter.

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.

Congratulations! You’ve built, installed, and run 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 Bootstrapping a FrontPanel App, you will walk through a more detailed process of setting up a new application and explore the various packages that contributed to the template app.
• In Application Manifest, we introduce the JSON file that provides the App Launcher with some basic information such as app name and icon.
• 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.