Dev Environment Setup

Intro

Home Environment

You will need a computer at home in order to complete this class. If you do not have a computer, please contact Prof Stein as soon as possible. We will use a browser to run Gitpod in class and you will also be able to do this at home.

Gitpod

Running Gitpod is relatively easy to start.

  1. Create a GitHub account (go to https://github.com/ and click Sign up button)
  2. go to Gitpod: https://gitpod.io/
  3. Click to Login if shown
  4. Click Continue with GitHub (make sure you’re already signed in to GitHub)
  5. Follow the prompts.

We will cover more on Gitpod setup in class.

Local Development Environment

If you want to be able to work offline and have full control over your environment, then you will need to spend some time to set up your home computer.

Below are instructions on how to set up the development environment we will be using depending on the operating system of your computer. If you do not know which operating system your computer is using, also contact Prof Stein.

The main things we are installing are:

  • Visual Studio Code (VS Code) which is our code editor
  • NVM (Node Version Manager)
  • Node
  • Git

Overall Process

How to Set up You Home Dev Environment

This is an overview of the process for setting up a dev environment on your personal computer. Above are versions of this that you should use depending on your operating system. This is a generic version we can talk about in class.

Step 1: Install VS Code

VS Code is the code editor we will use in class. It’s made by Microsoft but it’s free, cross platform and integrates well with what we are doing.

Step 2: Command Line

The command line is an important part of the web developers toolkit and is the interface for a number of tools we will use to help make our sites. It’s built in to Linux and macOS but it will require a few steps to set up on Windows or Chrome OS.

Step 3: Install NVM

This is the Node Version Manager and will be used to install Node (next step).

Step 4: Install Node

Node is a handy tool that gives you access to a lock of command line developer tools. If you have ever seen a tutorial that started “It’s easy just npm install myThingy” and had no idea what that really meant, this will let you do that.

Step 5: Install Git

Git is the version control system we will use and the most popular one in the industry.

Step 6: Integrate Command Line with VS Code

On Windows and macOS, you will take an extra step to make sure VS Code uses the same command line you updated or installed earlier.

OS-specific Install Instructions

Windows
Windows

The most common OS. If you don’t have an Apple device or a Chromebook, this is it.

Windows Instructions
macOS
macOS

Apple laptops and desktops.

macOS Instructions
Chrome OS
Chrome OS

You will have this if you have a Chromebook.

Chrome OS Instructions
Linux
Linux

Used by most servers and few people. You probably have experience with installing software.

Linux Instructions