Skip to content

Latest commit

 

History

History
76 lines (55 loc) · 2.96 KB

GettingStarted.md

File metadata and controls

76 lines (55 loc) · 2.96 KB
Raw

Getting started

A simple introduction for the aurelia-environment plugin is shown by using the Aurelia demo application skeleton-navigation.

We start by setting up the project. Afterwards, we install and configure the plugin as shown in Installation.

  1. Clone the repository into your local project folder:
git clone https://github.com/aurelia/skeleton-navigation.git
  1. Switch into the skeleton-navigation directory and choose one of your preferred starter kits. In this example, we choose the skeleton-es2016. Switch into that directory and install all npm dependencies:
cd skeleton-navigation
cd skeleton-es2016
npm install
  1. In the same directory, install the jspm dependencies:
jspm install
  1. Install the aurelia-environment dependency via jspm:
jspm install aurelia-environment

The project is now set up together with the environment plugin and we can start using it. Via executing gulp watch you can start a server running the application. It is then available via the shown URL on the command line (e.g. http://localhost:9000).

As early as possible we should now start loading the environment variables. In your favored IDE, open the file skeleton-navigation/skeleton-es2016/src/main.js and adjust it as follows:

import {load} from 'aurelia-environment';
import 'bootstrap';

export function configure(aurelia) {
  load().then(() => {
    aurelia.use
      .standardConfiguration()
      .developmentLogging();
  
    //Uncomment the line below to enable animation.
    //aurelia.use.plugin('aurelia-animator-css');
    //if the css animator is enabled, add swap-order="after" to all router-view elements
  
    //Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
    //aurelia.use.plugin('aurelia-html-import-template-loader')
  
    aurelia.start().then(() => aurelia.setRoot());
  });
}

We simply wrap Aurelia's bootstrapping into the fulfilled Promise of aurelia-environment. This automatically loads an aurelia.env file from the base directory of the server and the respective env variables. Those are available via window.env then. For additional configuration, see the Configuration.

You can now start using the environment variables, e.g. console.log(window.env.ENV1) will output the value of the entry with key ENV1 from the aurelia.env file.

If you are using the ES2017 async/await syntax, you can simply wait for load():

import {load} from 'aurelia-environment';

export async function configure(aurelia) {
  await load();
  
  aurelia.use
    .standardConfiguration()
    .developmentLogging();
  
  await aurelia.start();
  await aurelia.setRoot(PLATFORM.moduleName('app'));
}