Skip to main content

Development Environment

Before taking this course, you will need to download various pieces of software. This page will guide you through that process in a beginner-friendly manner. If you have any issues configuring your system, please seek help as soon as possible. You have the internet, office hours, and Campuswire at your disposal.

Getting Started​

0. (Optional) Install Windows Subsystem for Linux

  • If you are on Windows, it is worthwhile to consider installing WSL
  • Windows may be hard to configure in the future when you use more advance tools
  • Read more here

1. Install Node.js and NPM

2. Install Git

3. Install VSCode

4. Open the First Homework in VSCode

About Node.js and NPM​

From the Wikipedia page on Runtime Systems:

In computer programming, a runtime system or runtime environment is a sub-system that exists both in the computer where a program is created, as well as in the computers where the program is intended to be run.

In the past, you might have had to install Java on your system. You were installing the runtime responsible for executing your Java source code. In this course, you will be programming in TypeScript, which is compiled (transformed or made) into JavaScript, then run using a JavaScript runtime system.

Node.js is a popular JavaScript runtime designed for making web applications. It comes bundled with a complete standard library and access to a public repository of millions of third-party packages. It builds upon the JavaScript runtime that is used in Google Chrome.

NPM (Node Package Manager) manages the logistics of distributing Node.js software. It keeps track of your projects dependencies so others can download and use them seamlessly. You can read more on their about page.

Installing Node.js and NPM​

External Tutorials:

Text Tutorial (Windows and macOS):

  • Go to the Node.js download page to download the installer for your system
    • Make sure to choose the LTS option (v18 as of writing)
    • Homeworks need at least v16, and less than v20
    • Windows: Choose the Windows Installer (.msi)
    • macOS: Choose the macOS Installer (.pkg)
  • Run the installer with the default options
  • After the installer has finished, you can close it

To verify Node.js and npm installed:

  • Open a Terminal
    • Windows: Press the Windows key and search for a program called "Command Prompt" or "Terminal"
    • macOS: Use the spotlight search and search for "Terminal"
  • Type in the command node --version and press enter
    • You should see something like v18.10.0 printed
    • As long as your number is greater than or equal to above, you are OK
  • Type in the command npm --version and press enter
    • You should see something like 8.19.2
    • As long as your number is greater than or equal to above, you are OK

If you do not see both version numbers, you did not install them correctly. You may need to restart.

About Version Control​

Sometime after the first midterm, there will be a lecture about version/source control. A version control system (VCS) is responsible for managing and tracking all changes to a collection of software files (called a repository). In team environments, it is extraordinarily useful. Each team member has their local copy of the repository and changes for specific files.

Git is the most popular version control system in use today. It might be helpful to familiarize yourself with Git before it is discussed in class. Here are some optional resources if you are interested:

It is perfectly OK if Git seems too daunting. In the meantime, it is a good idea to use something to back up your work until Git is covered:

Installing Git​

External Tutorials:

Text Tutorial (Windows):

  1. Navigate to the Git Downloads for Windows page
  2. Download the "Standalone Installer" for your system type
  3. Run the installer with the default options
  4. After the installer is finished, you can close it
  5. Open Powershell (Press the Windows key -> Search for "Powershell")
  6. Run the command git --version

You should see something like this:

git version 2.39.0

Text Tutorial (MacOS):

To install git on macOS, you should first install Homebrew.

  1. Open a terminal (Spotlight Search -> Search for "Terminal")
  2. Paste the following command into the terminal and press enter: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  3. After the Homebrew is installed, close, then reopen the terminal
  4. Run the command brew install git
  5. After git has been installed, close, then reopen the terminal
  6. Run the command git --version
git version 2.39.0

About Text Editors​

You are allowed to use any editor that you prefer. This class recommends that you use VSCode.

If you are unfamiliar with VSCode, it is recommended that you watch this video (7m16s) or read this page, particularly the sections on keyboard shortcuts, save/auto-save, and finding and replacing. There are a lot of features aimed to facilitate your productiveness - use them to your advantage.

Installing VSCode​

  1. Open the VSCode download page
  2. Download the installer for your system (click the large button under your system's icon)
  3. Run the installer with the default options
  4. After the installer has finished, you can close it

VSCode Extensions​

The majority of VSCode is written in TypeScript, so a lot of TS/JS features come standard with the default installation. The following extensions may be useful:

You can install these extensions through the VSCode Extensions tab.

VSCode Jest may also be helpful, but sometime acts strangely. Use with caution, default to npm run test in the terminal if it giving you issues.

Configuration​

You can configure VSCode to your liking (File -> Preferences -> Settings). Settings specific to TypeScript can be found by typing typescript. in the search bar.