Amber docs v0.12.4
Guides & API reference

Loading Amber

In this section we will learn how setup an index.html page to load amber using requirejs.

Amber packages

Amber packages are AMD modules. AMD (Asynchronous Module Definition) is a JavaScript API for defining modules and dependencies to be loaded asynchronously.

Amber ships with requirejs, the most popular AMD loader implementation.

The following section explains how to manually create an index.html page that loads Amber. The amber init command provided by the npm package automates it. It is still advised to read this page in order to understand how Amber is loaded and how Amber packages work.

Create an index.html file with the following contents in the root folder of your project, next to the bower_components directory:

<!DOCTYPE html>
<html>
    <head>
        <script
          type='text/javascript'
          src='bower_components/amber/support/requirejs/require.min.js'>
        </script>
        <script
          type='text/javascript'
          src='bower_components/amber/support/amber.js'>
        </script>
    </head>
    <body>
    </body>
</html>

We can then modify our index.html page to load the devel – short for development – distribution of Amber.

In the next script we define how Amber packages are loaded. Amber comes with several AMD modules to load Amber; the default one – the one with support for application development and in-browser IDE – being amber/devel.

<!DOCTYPE html>
<html>
    <head>
        <script
          type='text/javascript'
          src='bower_components/amber/support/requirejs/require.min.js'>
        </script>
        <script
          type='text/javascript'
          src='bower_components/amber/support/amber.js'>
        </script>
        <script type='text/javascript'>
          require(['amber/devel'], function (amber) {
            amber.initialize();
          });
        </script>
    </head>
    <body>
    </body>
</html>

The last modification we make to the index.html page is to add a line after Amber’s initialization to automatically popup Helios, its integrated development environment.

Here is our final version of index.html.

<!DOCTYPE html>
<html>
    <head>
        <script
          type='text/javascript'
          src='bower_components/amber/support/requirejs/require.min.js'>
        </script>
        <script
          type='text/javascript'
          src='bower_components/amber/support/amber.js'>
        </script>
        <script type='text/javascript'>
          require(['amber/devel'], function (amber) {
            amber.initialize();

            // Popup Helios
            amber.popupHelios();
          });
        </script>
    </head>
    <body>
    </body>
</html>

You can now start the amber server by evaluating from your project root directory:

amber serve .

Open localhost:4000. Helios will popup on startup.

Most web browser will block popups by default. You may need to authorize the Helios popup and reload the page.

You are now ready to create your own Amber packages!