Windows Dev Environment Setup

Windows SETUP

This is a walk-through of how to set up our base environment in Windows. It has you install Linux on Windows (WSL) which will make it easier for all of us to share the exact same commands and for you to follow tutorials you find online.

Person using laptop with code on the screen
Photo by heylagostechie on Unsplash

Total Time Needed: 3 hours (estimate)

Steps to Setup Your Development Environment

Step 1: Install Visual Studio 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.

  • Click here to download VS Code
  • Click on the Windows download button.It should start downloading a .exe file that starts with VSCodeUserSetup.
  • Open the file, accept the agreement
  • You can check the boxes for the additional tasks (or not) it will mainly make it easier to open files in VS Code directly from folders.
  • When you’re finished, you can close it. We will learn more about customizing it as the class goes on.

You should be done with this step.

Step 2: Command Line – WSL

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 and will require a few steps on Windows or Chrome OS. Here we’re going to look at how to install Windows Subsystem for Linux or WSL for short.

  • Press the Windows key or put your cursor in the Windows search box in the toolbar at the bottom of the screen. Start typing “Turn Windows features on or off” until you see it appear in the options.
  • Click to open “Turn Windows features on or off”
  • Scroll down until you see the box for Windows Subsystem for Linux.
    • Check it.
  • Click OK.
  • Restart your computer

Step 3: Install Unbuntu

Now you need to install Linux on your machine. Unbuntu is a type of Linux and one of the most common. The easiest way to install it is to do it through the Microsoft Store.

  • Open the Microsoft Store (shopping bag app in the Windows toolbar)
  • Type in Unbuntu (it’s the most common version so easy to find help)
  • Click on the Unbuntu (a few may show up, use one with just Unbuntu)
  • Click Get and it should start downloading
  • Click Launch. It should start installing
  • Set up a User account (enter a username and password when it asks)
  • Write down your username and password somewhere you will find it later!

Step 4: Install Windows Terminal

This is optional but seems to be useful according to a number of people. You can also do this through the Microsoft Store.

  • Open the Microsoft Store again
  • Search for Windows Terminal
  • Click Get
  • Click Launch

Step 5: Integrate WSL with Visual Studio Code

This will help you when doing the commands we go through in class through VS Code.

  • Open VS Code
  • DO NOT CLICK INSTALL when it says
    • You have Windows Subsystem for Linux (WSL) installed on your system. Do you want to install the recommended extensions for it?
  • Instead, Click the X to close the message (if it appears)
  • In the VS Code Menu (top of screen) click Terminal > New Terminal
  • A Terminal should appear at the bottom of the screen
  • In that terminal that appeared click where it says powershell
  • Then click Select Default Profile
  • Select WSL Bash from the options
  • Restart Visual Studio Code
  • Click Don’t Show Again, in the window that says the WSL extension is recommended. Close any other windows that ask to install the extensions.
  • You should now see wsl instead of powershell as your default shell.

Step 6: Install NVM

This is the Node Version Manager and will be used to install Node (next step). This page has these instructions in more detail (external link).

  • Open the terminal if it isn’t (should be open from last step). Search for Windows Terminal and open it
  • Click the down arrow and Choose Unbuntu
  • Copy/Paste in this and hit enter (everything from curl to bash):
curl -o- | bash

It should install NVM and tell you you have to close the terminal or enter a command.

  • Close the Unbuntu Window
  • Click the down arrow and open Unbuntu again (if you closed all of WIndows Terminal that’s OK, just reopen and open an Unbuntu window).
  • Test your install by typing: command -v nvm
  • you should just see: nvm
screenshot of terminal with command -v nvm entered

If not, the install didn’t work. Stop here and look back over the instructions, see the detailed link at the top of this step or ask Prof Stein for help.

Step 7: 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. Luckily if NVM is installed properly then installing Node is quick:

  • open Terminal (if it isn’t already open)
  • Make sure you are in Unbuntu in Windows Terminal
  • Copy/paste or type the following and press enter:
nvm install node

Node should install and tell you what version it is.

You can test by typing: node -v
It should show something like v15.7.0

Step 8: Download Git

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

Step 9: Install Git

After the download completes, follow these steps:

  • Click on the downloaded file
  • Click Yes to allow installer to run
  • Click through the options. Three things to check:
    • 1) Make sure Git Bash option is checked.
    • 2) Choose Visual Studio Code as the default editor
    • 3) Choose “Git from the command line and also from 3rd-party softwate” when given the choice of PATH environment adjustments.

You can test if git installed by typing this in the Windows Terminal (Unbuntu):

git --version

It should show something like: git version 2.25.1

That’s it, you’re done (finally)!