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:
In Visual Studio Code press Ctrl + P and type the following command:
1 | ext install aurelia |
Still in Visual Studio Code, install the Aurelia CLI via the following command:
1 | 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:
1 | 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:
Be sure to run Powershell as an administrator and run the following command:
1 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Local aurelia-cli v1.0.0-beta.12Starting '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
1 | > netstat -ano | findstr :8080 |
Which is 8264 in this example.
2. Kill the task for that PID number:
1 | 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:
1 2 3 4 5 | 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
