Setup HTML5

Lime and OpenFL may be used to create HTML5 applications and games for web browsers by compiling to JavaScript.

Automatic Install

There is no automatic setup available for HTML5.

Manual Install

There is generally no setup required to get started with the HTML5 target. However, to use -minify or -final option, refer the Java JDK requirement in the Minification section.

Build & Run

To compile an HTML5 application, run lime build html5.

To compile and launch an HTML5 application with one command, run lime test html5. This will start a local development server, and launch the page in a web browser.

Minification

Adding either the -minify option or the -final option to your build command will apply more advanced minification to the generated JavaScript. By default, Closure Compiler will be used to minify, but you can specify -yui to use YUI Compressor instead.

Note: Both minification tools require a Java JDK to be installed. A variety of vendors offer free Java OpenJDK builds that work well with Lime and OpenFL. If you’re not sure which one to choose, a good option is Temurin OpenJDK from Adoptium.net.

Launch Options

The default port used by the local development server is port 3000. To customize this port, specify the --port option with a value such as --port=8080.

To compile and start the local development server, but skip launching in a web browser, add the -nolaunch option.

Using JavaScript libraries

To use an external JavaScript library with Lime, you need Haxe externs. See also Haxe: Using external JavaScript libraries.

Members of the Haxe community have already created open source externs for a number of popular JavaScript libraries, so be sure to search Haxelib or Github to see if JS externs exist for your library before you try to create your own.

Adding dependencies

To actually use external JS libraries you must include them in project.xml. There are three options:

1. Ship the library with your project as a separate file:

    <dependency path="js-libs/someLibrary.js" />
   

   The js-libs/someLibrary.js file will be copied into the compiled project’s lib directory. You can change the dependency export path (e.g. from lib to js) with this config:

    <config:html5 dependency-path="js" />
   

2. Embed the library:

    <dependency path="js-libs/someLibrary.js" embed="true"/>
   

   The content of js-libs/someLibrary.js will be embedded into compiled application’s .js file.

3. Add a remote link to the library:

    <dependency name="https://unpkg.com/[email protected]/simplepeer.min.js" />
   

   The resulting index.html will have an appropriate <script> tag.

index.html template

Another possible way of adding JS files is to link them directly inside your custom index.html template. With this you must configure project.xml to use a custom template and probably handle copying JS files to the project export directory by yourself. Similar to <dependency /> but less convenient.

include.xml

Some Haxe externs support Lime out of the box, like haxe-simple-peer. You just include it with <haxelib name="simple-peer" /> and that’s all. This works because it has an include.xml file with a <dependency /> tag so Lime knows how to include the external simplepeer.min.js file.

Advanced Configuration

The <config:html5 /> element in your project.xml file is used to specify advanced configuration options for HTML/JS. For a complete list of these advanced option, see Config Values: HTML5.

Help & Forums

If you encounter any problems when setting up Lime for HTML5, please visit the forums or Discord.