Setting up your workstation for Javascript Development

Background

There is a couple of things you will need to setup on your workstation before you can start developing Javascript applications. You may or may not have any of these tools, as always no assumptions are made. Please feel free to skip this if you are a already familar with the concepts discussed here.

Prerequsites

• Standard working desktop PC or Mac
• Web browser and functional internet connectivity

Objectives

• To have a basic Javascript development environment that we can start building applications with and be able to continue building on it as needed.

Key Results

• Install NodeJS and npm
• Install and configure Visual Studio Code

Basics first

What is NodeJS?

Computer Science 101 [Not to be intimidated], a runtime environment is defined as

 Most languages have some form of runtime system that provides an environment in which programs run. This environment may address a number of issues including the layout of application memory, how the program accesses variables, mechanisms for passing parameters between procedures, interfacing with the operating system, and otherwise. – Extract from wikipedia

In laymans terms, a runtime environment is a system-level environment (software packages, configuration and sometimes hardware) that is responsible for the execution of application code as per the developer’s intention. A runtime environment is normally very closely related to a given programming language and allows some kind of a standarlized environment across different systems, typically an Operating System for programs or softwares ti execute in, in a predictable manner.

NodeJS is an example of such a system, specifically for programs written in Javascript programming langauge.

What is NPM?

Node Package Manager (NPM) is a packaging management system that works hand in hand with NodeJS for downloading, installation and management of NodeJS based subsystems.

NPM also comes with a handful of cli tools (command line interface) that help in the management of NodeJS based applications and an online package registry (Think an online catelog) that you can use to download other people’s softwares and share yours.

What is Visual Studio Code

Visual Studio Code is a source-code editor by Microsoft that allows syntax highlighting, ondemand code assistance and completion (Intellisense), debugging, source control integration and many more.

Guide

In this post, we are going to be installing the necessary system software required to develop and run Javascript based applications. We are going to  start with the base installation of a Javascript runtime environment called NodeJS that enables your machine to execute Javascript code outside the web browser then Visual Studio Code whcih is a powerful text editor loved by millions of developers.

Step 1

With your browser, open the NodeJS downloads page https://nodejs.org/en/download/ and install an appropriate installer for your OS.

After a successful installation, we should be able to execute the following commands and have a similar output to the screenshot below.

Open your command line interface (CMD / Powershell on windows or Terminal on Unix-like systems) and type or copy and paste these commands on the window presented.

When typing commands, ignore or do not type the $ sign yourself. Depending on your O.S the visual might be different.

$ node --version

$ node --version

If your output is similar to mine, then we have successfully completed #1 Key result.

Step 2

To install and start using Visual Studio, open your browser and head on to the downloads section of Visual Studio Code at https://code.visualstudio.com/Download and download the appropriate installer for your Operating System.

After a successful installation of Visual Studio, you should be able to see Visual Studio Code logo among your other system applications (generally the logo will look similar to this).

Openning the application, should give a window similar to this

If you can see Visual Studio Code icon and are able to open it then we have met our second objective.

Fortunately for us, we can keep this post short and simple as Visual Studio comes out of the box with full support for NodeJS and Javascript support. Visual Studio Code itself is written in Javascript using Eletron. 

Nice trick: You can open Visual Studio right from the cli by typing

$ code .

. (dot / fullstop symbol) in this case, presents “Current Directory” and can be replaced with any valid path.