Running Aurelia.js in a Local Environment

This is Part 1 of running Aurelia.js in a Node.js and Express environment.

While new JavaScript frameworks emerge almost too rapidly to keep up with each year, Aurelia is one that personally caught my interest.

2020 Update: As of 2020, Vue.js seems to be popular, and frameworks like Nuxt.js are also gaining prominence. In this landscape, Aurelia feels like it has become a minor framework.

First, I'd like to try running Aurelia.js in a local environment.

My Local Environment for This Article

Aurelia package: skeleton-navigation-1.0.0-beta.1.0.5

Reference URLs

Server

Deploy and run it on Heroku, which allows free experimentation.

Installing Node.js is a prerequisite for running Aurelia.js.

INSTALL REQUIRED APPLICATIONS FOR SETUP

Aurelia's documentation uses Gulp as the build tool and JSPM for package management.

Install Gulp

npm install -g gulp

Install jspm

npm install -g jspm

Place Data in the Installation Folder

Go to: https://github.com/aurelia/skeleton-navigation/releases/latest

Download and extract the latest Aurelia setup files from the link above.

For this guide, I created a folder named `aurelia-test` and placed the files there.

Navigate to the Target Folder using CD

Just in case: open your command prompt and navigate to the directory where you placed the files.

cd C:\project\aurelia-test

Install from package.json

Build the environment based on the `package.json` file located among the extracted files.

npm install

jspm install -y

Note: The `jspm_packages` folder will be created. If `system.js`-related files are not directly in that folder, try running the following command:

■ Initialize JSPM (generates missing files, might not be necessary depending on your environment)

jspm init

Start the Application

gulp watch

If you see the screen shown in the image below after the 'Aurelia Skeleton Navigation' page finishes loading, then the implementation up to this point is complete.

UNIT TESTS WITH KARMA

While translating the Aurelia documentation, it seems Karma is used for unit testing, so I'll introduce it as is.

npm install -g karma-cli

gulp test

at formatError ...

What to do if you encounter an error even though you didn't do anything wrong... This happened to me when using a slightly older version of Aurelia-Skeleton-Navigation, so here's how to resolve it.

Reference: Issue running karma task from gulp

If you see an error like 'at formatError ...'

gulp.task('test', function(done) {
  new Karma({
    configFile: __dirname + '/../../karma.conf.js',
    singleRun: true
  }, done).start();
});

gulp.task('test', function(done) {
  new Karma({
    configFile: __dirname + '/../../karma.conf.js'
    /* singleRun: true */
  }, done).start();
});

The following might also occur with older versions

This didn't happen with newer versions, so I'm noting it down for future reference.

gulp test

\jspm_packages\github\github\fetch@0.10.1.js
⇒module.exports = require("github:github/fetch@0.10.1/fetch.js");
これを
⇒module.exports = require("github:github/fetch@0.10.1/fetch");

The `.js` extension is also present in the following file, so please remove it.

C:\project\aurelia-express\jspm_packages\npm\process@0.11.2.js