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.
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):
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 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.
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 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):
