Get the Newsletter

Setup with Webpack

If you're interested in getting setup with Webpack to build projects, this article will take you through setting up both your machine and a production quality starter project.

Configuring Your Environment

Let's start by getting you set up with a great set of tools that you can use to build modern ${} applications. All our tooling is built on Node.js . If you have that installed already, great! If not, you should go to the official web site , download and install it. Everything else we need will be installed via Node's package manager ( npm ). If you already have npm installed, make sure you've got the latest version to avoid any issues with the other tools.

For command-line operations, we recommend Windows users to use Git Bash or Git Shell.

Setting up the Project Structure and Build

We'll begin by downloading a skeleton. We've got several versions available for you based on your language and tooling preferences. Please download the latest skeletons now.

Once the download has completed, unzip it and look inside. The readme file contained therein will explain the various options available to you. Please select one of the skeletons and copy it to the location on your file system that you wish your code to reside. Be sure to rename the folder to appropriately represent the app you want to build.

You will now find everything you need inside the folder, including a basic build, package configuration, styles and more. With all this in place, let's run some commands.

  1. Open a console and change directory into your app's directory.
  2. Execute the following command to install the dependencies listed in the dependencies and devDependencies sections of the package manifest:
  npm install

Everything we've done so far is standard Node.js build and package management procedures. It doesn't have anything specific to do with Aurelia itself. We're just walking you through setting up a modern ${} project and build configuration from scratch.

Bootstrap and Font-Awesome are not dependencies of Aurelia. We only leverage them as part of the starter kit in order to help you quickly achieve a decent look out-of-the-box. You can easily replace them with whatever your favorite CSS framework and/or icon library is. Similarly, Bluebird is recommended, but not required. Note however that the Promise implementation in certain Microsoft Edge versions are extremely slow, thus keeping an alternative Promise implementation is recommended.

Running The App

If you've followed along this far, you now have all the libraries, build configuration and tools you need to create amazing ${} apps with Aurelia. The next thing to do is run the sample app. To see this in action, on your console, use the following command to build and launch the server:

  npm start

You can now browse to http://localhost:9000/ to see the app.

The Skeleton App uses Webpack's Development Server for automated page refreshes on code/markup changes, meaning you do not need to restart the command every time you make a change.

Running The Unit Tests

To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, you may run the tests with the following command:

  npm test

Running The E2E Tests

Integration tests are performed with Protractor .

  1. Place your E2E-Tests into the folder test/e2e/src
  2. Run the tests by invoking
  npm run e2e

Running E2E Tests Manually

  1. Make sure your app runs and is accessible:
  WEBPACK_PORT=19876 npm start
  1. Once bundle is ready, run the E2E-Tests in another console:
  npm run e2e:start