Saturday, August 20, 2016

Installing NodeJs on a Linux Mint OS

I had to run a project in Visual Studio Code on a Linux machine (Mint) that needed NodeJs installed so I tried to follow the steps on the official page.

I realized, after some errors, that I was actually missing some things.

On the official page, the commands for the install are listed like this:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

Before you can run this (successfully) you also need to install curl: sudo apt-get install curl

Apparently, curl, is a client tool used to get files over different kind of protocols, like http(s) and ftp without too much interaction. The legend goes that it can also support authentication (I'm kidding, it isn't a legend, it's true, check the official page) :).

Another thing that baffled me was the last "-" at the end of the first line. Because of it I thought there was just one command so I copied them both and tried to run them... with no success.

So, first take the first line:
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

and when it is done, run the next command:
sudo apt-get install -y nodejs

After this you can check what version was installed with the command node -v. When you install Node you also get npm, which is the package manager for npm, basically where all the goodies come from.

Adding Node to PATH

After the installation is complete it is necessary that we add Node to PATH so that all the packages will be installed in that location. The first thing to do is to create a folder named npm in the home folder.

Open .bashrc file with a text editor. This file is also in the Home folder, but it is hidden. Right-click show hidden files.

Add at the end of the file: export PATH="$HOME/npm/bin/:$PATH".

If the terminal window is open, close it and open it again, then type echo $PATH and you should see the path to npm/bin listed.


Monday, July 4, 2016

Running the Angular 2 Quickstart tutorial in Visual Studio Code on Mac OS

In this post I will go through the steps that I took in order to complete the Angular 2 Quickstart tutorial (with Typescript) using Visual Studio Code on Mac OS. The versions for the software are as follows:

  • VS Code: 1.2.1
  • Mac OS: 10.11.5 (El Capitan)
The Angular 2 quickstart can be found at this link: https://angular.io/docs/ts/latest/quickstart.html.

We start by creating a new solution, which in VS Code is opening a folder. In the tutorial they named the folder angular2-quickstart. It doesn't really matter, so just make a new folder.

After this we need to follow the next few steps in order to have the solution up and running in VS Code.

1. Compiling the Typescript code to Javascript.

Open Command Palette with ⇧⌘P (or View -> Command Palette) and start typing Configure Task Runner.
Then, select Tasks: Configure Task Runner and you will get the next list:

From here you need to select TypeScript - tsconfig.json. This will create a tsconfig.json under the .vscode folder.


2. Installing NodeJs and npm (if you don't already have it).

This tutorial states that you need to have at least version 5.x.x for NodeJs and 3.x.x for npm. To check if you have the required version, open a terminal window (or the Integrated Terminal in VS Code) and type node -v for NodeJs and npm -v for npm.

From here on I have followed the steps in the tutorial. 

In order to be able to run the application from VS Code a few additional steps are required:

1. Click on the Debug icon on the left side.

2. Click on the cog icon and select NodeJs from the list. This will create a file called launch.json under the .vscode folder.
Note: if you click the cog icon again, nothing will happen. If you want to see the available options again, delete the launch.json file.

3. In the launch.json file, edit the program property so that it looks like this: ${workspaceRoot}/node_modules/lite-server/bin/lite-server

4. Click on the start icon and the application should start.