Windows Dev Environment Setup

Windows Setup

Setup Home Dev Environment on Windows

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.

Total Time Needed :

2

Hours

30

Minutes

Required Tools:

– A Computer.

Steps to Set up 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.

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.

Step 2a: Turn on WSL for Windows

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.

When it’s done you will need to restart.

Step 3: Install Unbuntu

Now you need to install Linux on your machine. The easiest way to do that is to
– 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.
– open the Microsoft Store again
– Search for Windows Terminal
– Click Get
– Click Launch

Step 4a: Integrate WSL with Visual Studio 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 do this:
– Click the X to close the message
– in the VS Code Menu click Terminal > New Terminal
one should appear at the bottom of the screen
– in that terminal that appeared click where it says 1:powershell
– then click Select Default Shell
– 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 1:wsl instead of 1:powershell

Step 5: 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- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | 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

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 6: 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 Node is simple

– Make sure you are in Unbuntu in Windows Terminal
– type or copy/paste this:
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 7: Download Git

Git is the version control system we will use and the most popular one in the industry.
– Go to https://git-scm.com/downloads and download the Windows version. The latest version will be in the image of the computer on the right.

Step 8: Install Git

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