Getting started with Aurelia in Visual Studio Code

An alternative and possibly simpler approach to getting set up and using Aurelia.

The previous approach can be found at the following link

https://www.technical-recipes.com/2019/getting-started-with-aurelia-js/

Prerequisites

The Aurelia CLI has a pre-requisite, Node.js. Get it from here:

https://nodejs.dev/download/

In Visual Studio Code press Ctrl + P and type the following command:

ext install aurelia

Still in Visual Studio Code, install the Aurelia CLI via the following command:

npm install aurelia-cli -g

Step 1: Create a project folder

In Windows Explorer create a directory for your Aurelia code projects if you have not yet done so:

Step 2: Create the Aurelia project

Open Visual Studio Code and in the terminal window enter the ‘au new’ command plus the name of your Aurelia project:

au new projectName

When prompted, select if you want your project to be TypeScript, ES etc and hit return:

If you get the following error: “au.ps1 cannot be loaded because running scripts is disabled on this system”

A good fix can be found at the following StackOverflow link:

https://stackoverflow.com/questions/58796490/tsc-ps1-cannot-be-loaded-because-running-scripts-is-disabled-on-this-system

Be sure to run Powershell as an administrator and run the following command:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

And then select yes to install project dependencies and hit return again:

Step 3: Run the Aurelia project

Navigate to the project folder that was created:

Type in the command au run:

Copy the link url that is displayed http://localhost:8080 into a browser and refresh that page:

If you get problems…

Sometimes when running the command ‘au run’ you might get the following console output containing:

Error: listen EACCES 127.0.0.1:8080

Local aurelia-cli v1.0.0-beta.12
Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'runWebpack'...
{ uid: 2,
  name: 'runWebpack',
  branch: false,
  error:
   { Error: listen EACCES 127.0.0.1:8080
    at Server.setupListenHandle [as _listen2] (net.js:1328:19)
    at listenInCluster (net.js:1386:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1501:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:72:10)
     errno: 'EACCES',
     code: 'EACCES',
     syscall: 'listen',
     address: '127.0.0.1',
     port: 8080,
     domainEmitter:
     ...
     ...

This link is useful for this problem:

https://teamtreehouse.com/community/solution-to-the-error-listen-eaddrinuse-1270018080

To summarise, use these commands:

1. Find the PID number for 127.0.0.1:8080

> netstat -ano | findstr :8080

Which is 8264 in this example.

2. Kill the task for that PID number:

taskkill /pid 8264 /f

If that still fails…

There is another fix described in the link above, which is to modify the webpack.config.js file such that module.exports = … contains:

devServer: {
    historyApiFallback: true,
    contentBase: "./",
    port: 3000
  }

This will enable the dev environment to be run on a different port to 8080:

And try it again