Aurelia for new developers
For the purposes of this tutorial and as a general rule for any modern framework like Aurelia, you will be using a terminal of some sort. On Windows, this can be the Command Prompt or Powershell. On macOS, it'll be Terminal (or any other Terminal alternative), the same thing with Linux.
To work with Aurelia, you will need to install Node.js. If you are new to Node.js, it is used by almost every tool in the front-end ecosystem now, from Webpack to other niche bundlers and tools. It underpins the front-end ecosystem.
We will be following the instructions in the Quick install guide to bootstrap a new Aurelia application. After installing Node.js, that's it. You don't need to install anything else to create a new Aurelia application, here's how we do it.
Open up a Terminal/Command Prompt window and run the following:
npx makes aurelia
You are going to be presented with a few options when you run this command. Don't worry, we'll go through each screen step by step.
You will be asked to enter a name for your project, this can be anything you want. If you can't think of a name just enter
my-appand then hit enter.
In step 2 you will be presented with three options.
- Option two: "Default Typescript Aurelia 2 App" this is a basic Aurelia 2 TypeScript application with Webpack for the bundler.
- Option three: "Custom Aurelia 2 App" no defaults, you choose everything.
In this guide, we are going to go with the most straightforward option, option #1.
You are going to be asked if you want to install the Npm dependencies and the answer is yes. For this guide we are using Npm, so select option #2.
Depending on your internet connection speed, this can take a while.
After the installation is finished you should see a little block of text with the heading, "Get Started" follow the instructions. Firstly,
cd my-appto go into the directory where we installed our app. Then run
npm startto run our example app.
Your web browser should open automatically and point to http://localhost:9000
Any changes you make to the files in the
srcdirectory of your app will cause the dev server to refresh the page with your new changes. Edit
my-app.htmland save it to see the browser update. Cool!
In the last section we created a new application and ran the development server, but in the "real world" you will build and deploy your site for production.
Run the Npm build command by running the following in your Terminal or Command Prompt window:
npm run build
This will build your application for production and create a new folder called