WAI161 Tutorial 0 — Setting up VSCode, Git and NodeJS

Hello everyone and welcome to the first tutorial for Warwick AI’s Software Engineering course, where you will be working on creating a working web application with a server.

This tutorial will cover installing and setting up the required technologies, getting your coding environment ready for development. We will cover:

• Installing Visual Studio Code (aka VSCode), essentially a text editor for developers, where you will be writing and running all your code
• Git, a version control software
• NodeJS, a JavaScript runtime essentially allowing you to create and run JavaScript (or TypeScript) servers and projects.

Visual Studio Code

Firstly, let’s go ahead and install VSCode. Download the setup file from here, and follow the install instructions.

I highly suggest then looking at some guides for using this software, for example, this one.

Some optional additions to this setup that I advise are:

• Ensure VSCode has Auto-Save enabled by clicking File and toggling it on.
• Within VSCode add the ESLint extension (for showing more errors within VSCode before running).
• Within VSCode add the Prettier extension (for auto-formatting your code).

If you are unsure how to install VSCode extensions, there’s a guide here.

Git

Git is widely used for managing code-base changes both within personal and team projects. If you are unfamiliar with it, check out this video. To install follow the guide here.

To make sure you have properly installed Git, open up either Command Prompt (on Windows) or a Terminal (on MacOS/Linux) and run:

git --version

This should output something similar to:

git version 2.30.0

A nice bonus with using VSCode is that it has Git integration built-in making it a lot easier and quicker to commit changes, push updates to somewhere like GitHub, and so on…

Go ahead and make an account on GitHub, where we will push (upload) our changes so that they can be accessed from any device and make it easier for others to see your code.

NodeJS

As mentioned earlier, NodeJS will be used to set up the frontend and backend projects as well as run them. Download the installer from here and follow the instructions, stick to the LTS version since this is what will be used during the sessions.

NodeJS also comes with a utility program called NPM (Node Package Manager). NPM helps us install and manage any external packages we use such as React (the frontend library we will be using).

To make sure you have properly installed Git, open up either Command Prompt (on Windows) or a Terminal (on macOS/Linux) and run:

node --version 

You should see something like this shown:

v16.13.0 

If so you have successfully installed NodeJS.

You are now ready to start development. WAI161 Tutorial 1 will cover setting up a React project and starting to create a user interface for the web app, see you then.