A beginners guide to setting up a modern web development environment on Windows 10

I just completed a clean install on one of my PC’s. I am using Windows 10 and I need to setup my development environment. I thought to document the steps for anyone that is starting out in web development.

I always use Windows 10. Its the OS with which I am most familiar. However, I found it frustrating to follow online examples and tutorials that reference various Linux commands which I couldn’t directly run on my machine. I now develop on a Windows 10 machine but with a virtual Linux OS. In my view this is the best of both worlds and I’ll describe how to set this up.

Install Linux on Windows

The first thing we need to do is install the Linux File System on our operating system. Open up Powershell by searching for it in the Start Menu. Then right-click to bring up a context menu and select “Run as Administrator”. Enter the following command and hit enter.

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Type Y and press enter which will restart your PC and apply the changes.

Great, now we have the underlying Linux File System setup on our machine. Next we need to install the flavour of Linux we want to use. We can do this directly from the Windows Store. You can choose any flavour of Linux that you like. Personally I picked Ubuntu.

Once its installed you can run Ubuntu from the Start Menu. It will go through an initial setup and ask you to pick a username and password. Now you have Linux running on your windows 10 machine. You should see something like the below on your bash terminal.

Install GIT for Windows

Next, we are going to install Git. If you are just beginning as a developer you might not be that familiar with Git. Its basically a utility that allows you to save and manage different versions of the application you create. There are plenty of articles online that explain it better than I can. Don’t worry too much about it for now. Just install it and you’ll become comfortable with it as you start working with it.To install it just download it from the official website below. There are a lot of options in the setup screen but you can just choose the default that is selected for each of these.

https://git-scm.com/download/win

Install Visual Studio Code

In order to develop you need somewhere to write your code. There are many code editors out there. Some are quiet simple whilst others offer a great deal of functionality and tools. You can pick whichever you want but my advice is to use Visual Studio Code if you are developing on Windows. It’s a very popular choice, its easy to work with and it has a huge number of extensions created by the community that you can add when you need to. To install it just download it from the official site below

https://code.visualstudio.com/

Tell VSCode to use the Linux Terminal

Now you have a virtual Linux system running on your machine and VSCode installed. However, when you fire up VSCode it will by default use the underlying Windows terminal so you need to tell it that you want to use the Linux terminal instead. Click File → Preferences → Settings and enter the below line under the user settings on the left hand side.

"terminal.integrated.shell.windows": "C:\\WINDOWS\\sysnative\\bash.exe"

Restart VSCode and open the terminal window by selecting View → Integrated Terminal or clicking (Ctrl +`).You will see the Linux terminal and a prompt that begins with:

username@machine-name:/mnt/c/Users/dev$

This terminal is the main way that I interact with the Linux system. To be honest I have never needed to go outside of VSCode to interact with Linux when developing. Any commands I want to run can be executed directly from here.

Install GIT for Linux

Even though we already installed GIT on Windows we need to go ahead and install it again on Linux so that we can use it in our development environment. To do this just go ahead and type the below command directly into the terminal on VSCode. The sudo prefix is the Linux way of saying you want to run the command as an administrator. You’ll need to enter the password you created when setting up Linux in the earlier steps

sudo apt install git

You also need to supply some configuration information that Git can use which includes your name and email address:

git config --global user.name "Michael O'Sullivan"
git config --global user.email michael@example.com

Understand where your files will live

At this point you are pretty much done. You have a virtual Linux system installed, VSCode is up and running and you have told VSCode to work with the Linux bash terminal. Whats not clear at this point is where your files will actually live e.g. where the virtual Linux file system keeps you files and data on your Windows 10 machine. If you have gone through the standard steps then the Linux file system will exist at the root of ‘C:\Users\<username>’ or you can type %UserProfile% into Windows Explorer to open this folder. To test this lets go back to the terminal in VSCode and type the following command.

mkdir git-dev

Now, if you open the folder ‘‘C:\Users\<username>’ in Windows explorer you should see a new folder created there called git-dev. I like to create this folder and store all of the projects I am working on in this directory.

Installing Node.js

At this point you can install any development engine that you want to use. For web development I use Node.js and if you are just starting out like me then you’ll probably use it as well. I’d advise that you use a utility called Node Version Manager to install Node. This utility will allow you to manage multiple versions of node should you need to in the future. To get started run the following command to install Node Version Manager in the terminal.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

You can test that it has installed correctly by typing ‘nvm --v’ into the terminal. You’ll see a lot of information about NVM if its installed correctly and you will get an error that “The program ‘nvm’ is currently not installed …” if there are any problems. I had to restart VSCode after the install before the ‘nvm-- v’ command work.

Once NVM is installed you can install Node with the following command.

nvm install 8.11.3

To test that it has worked just type ‘node -- v’ into the terminal and you should get a response of v8.11.3. You’ll note that I am installing version 8.11.3. I always just pick the latest stable version of node that is recommended for most users. You can see what this is by visiting nodejs.org.

Testing our Environment

To verify that everything is setup correctly lets create a very small application. Start by running the following commands in the terminal. The # symbol denotes a comment so that everything after this # on the line will be ignored by the terminal.

cd git-dev                    #move into our project directory
mkdir node-environment-test   #create a new folder for our test prj
cd node-environment-test      #move to the new project folder
touch test.js                 #create a JavaScript file

In this way we are using the terminal to move through directories and to create files. Its good to understand how this works but its much easier to do this through the VSCode user interface. Click File → Open Folder and then select the folder you just created:

C:\Users\<username>\git-dev\node-environment-test

You will now see your folder and the test.js file you just created in the directory tree on the left of VSCode. Going forward you can use the directory tree to create new files and folders.

Open the test.js file and add the following code:

Now on the terminal write the following to run your test.js file.

node test.js

If everything is setup correctly then you should see the following.

That’s it — you now have a fully working development environment where you can use the Linux Terminal within your Windows 10 OS.

If you want to find out what I do then checkout my website and I am always open to connections on LinkedIn.