Tag: Visual Studio Code

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
25 June 2019
Getting started with TypeScript in Visual Studio Code
Some instructions that distill how one may get started with using TypeScript in Visual Studio Code.

Step 1: Set up your development environment

Download and run the installer for Visual Studio Code from the following link:

https://code.visualstudio.com/download

Step 2: Install node.js

Download and run the installer for node.js from the following link:

https://nodejs.org/

Step 3: Install TypeScript

Once node.js has been installed you can install TypeScript.

Close VS Code if opened and open a command prompt and run the command:
```
npm install -g typescript
```
(Use the -g to ensure typescript is installed globally, not just for the folder you are in.)

Step 4: Set up an example project

Open VS Code.

Create a new Terminal by selecting Terminal > New Terminal.

Create a directory for your project using the mkdir command and navigate to that folder:

Close the terminal and open the folder you just created by selecting File > Open Folder:

Step 5: Create a new typescript.json file

Run the command:
```
tsc --init
```
Alternatively you can create your own tsconfig.json file:
```
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}
```
Step 6: Create and transpile example helloworld.ts code:
```
let message : string = "Hello World";
console.log(message);
```
Compile it using the terminal command:
```
tsc helloworld.tsc
```
This will generate the file helloworld.js:
```
var message = "Hello World";
console.log(message);
```
Step 7: Make TypeScript automatically look for and transpile your changes

Select Ctrl + Shift + B

Select tsc:build:

This will automatically trigger the transpilation of ts to js files each time the ts file is changed.
6 April 2019

Tag: Visual Studio Code

Getting started with Aurelia in Visual Studio Code

Getting started with TypeScript in Visual Studio Code