Build a Feathers UI project as an HTML/JS web app

Feathers UI may be used to build web applications targeting all modern web browsers — supporting both desktop and mobile. Built on top of OpenFL, Feathers UI components may be rendered using WebGL, Canvas, or the HTML DOM.

Prerequisites

Follow the standard Feathers UI installation instructions.

No additional dependencies are required to target HTML/JS.

Build

To build for the html5 target, run the following command.

openfl build html5

Use the -debug flag to create a build to include extra debugging information that a web browser can use to map exceptions and stack traces back to the original .hx files.

openfl build html5 -debug

The build's output will be written to the bin/html5/bin folder.

Your project.xml file may optionally specify an output folder different from bin.

<app path="Export"/>

In the example above, the output would be generated in Export/html5/bin instead.

Run / Debug

OpenFL provides the test command to launch your project using a local web server.

openfl test html5

When the server starts, your project will open in your default web browser. Generally, the server URL will be http://localhost:3000/.

Avoid opening local .html files directly, and always use a local development server. Web browsers impose extra security restrictions on local files that cause them to behave differently than files accessed from a server.

Deploy

Create a release build, and upload the files in bin/html5/bin to your production web server.

Troubleshooting

In the future, common error messages and their solutions will appear in this section.

Did you get some other error message that you don't understand?

Configuring OpenFL to build for native targets, like iOS or Android, can be a little tricky! Head over to either the Feathers UI community forum or the Feathers UI Discord. Explain which command you tried to run, be sure to mention that you are targeting html5, and post the error message (and any additional relevant output). Ideally, we can help you figure out a solution, and then we'll also add it to this troubleshooting section, so that everyone can benefit.