Setting up a PC

Published in

Around the App in 365 days

7 min readFeb 16, 2018

Just as we could have rode into the sunset, along came the Internet, and it tripled the significance of the PC.
Andy Grove

After last week’s tutorial on how to setup a Mac for web development, we will this week do the same for our Windows-users friends.

It assumes you are running an up-to-date version of Windows 10, with Google Chrome installed.

Meet PowerShell

PowerShell is an evolution of the good old command prompt, which is itself a legacy of good old DOS.

We will from this point refer to the PowerShell command prompt as the Terminal.

To access PowerShell, open your start menu and start typing powershell.

It should open a window that looks like this:

Scoop.sh, the Package Manager for Windows

On Mac, you have Homebrew, on Ubuntu/Debian you have APT, and although you might not have known it, Windows also has its own Package Manager (it actually has a few but we will concentrate on Scoop here).

A package manager makes installing software, especially command-line software, a breeze.

We will use Scoop to install Git, NVM (which will install Node) and Yarn.

To install Scoop, we first need to make a permission change by typing the following command into PowerShell:

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

Type Y (yes) when prompted and this should allow the proper installation of Scoop.

Next, let’s install Scoop itself: type the following into the terminal:

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

That’s it! Scoop should be up and running.

Let’s install some command-line tools

Now that we have Scoop, we can easily install a few tools:

We’ll start by Git, which is the source control software that we will be using going forward.

Type the following in your PS Terminal:

scoop install git

Once done, we will install OpenSSH so that we can use SSH with Git as well:

scoop install openssh

Then run the following:

[environment]::setenvironmentvariable(‘GIT_SSH’, (resolve-path (scoop which ssh)), ‘USER’)

We are now going to install NVM (for Windows): Node can be installed directly from their website, but we will be using a manager do to this instead: the Node Version Manager (NVM) allows you to install multiple versions of Node side-by-side, update to a newer version easily, and is generally easier to work with.

Type the following command in your PS Terminal:

scoop install nvm

As mentioned during the installation, please close and restart a new PowerShell window before using NVM.

Once that’s done, let’s install the latest LTS (Long Term Support) version of Node: for that, we need to figure out which is the latest LTS version, by typing the following:

nvm list available

What we need here is the greatest version on the LTS column (the second column), in this example it would be 8.9.3 but this will vary depending on when you are reading this.

Once you have this information, type the following (replacing 8.9.3 by whatever version is the current latest LTS):

nvm install 8.9.3

Then type:

nvm use 8.9.3

Let’s create our first app

To make sure everything is working fine, we will create a “hello world” React app in a few commands.

We are now going to install create-react-app:

What is create-react-app? It’s a tool that was created by Facebook to make it easier to create a “turn-key” React project in a few seconds.

In your Terminal, type the following:

npm i -g create-react-app

Explaining this command: NPM is the package manager for Node. This is used in every Node project to download and manage dependencies (code written by others that your project is going to use).
The “i” in the command tells the NPM program to install what follows.
The “-g” flag means that this dependency will be global: it’s not specific for your project, and can be executed from your Terminal.

Once that’s done, we will create a dev folder in your home directory, where you will store your code. Execute the following commands:

cd ~/
mkdir dev
cd dev

The first one will change the current directory to your home directory (~ represents your home directory, similar to how it works in the Unix world). The second command will create a dev directory, and the third one will change the current directory to your new directory.

Now let’s create our first app: type the following command:

create-react-app hello

This will create a new hello directory in your dev directory, with everything you need to run your first web application.

Once installed, you can launch the Web App by doing:

npm start

This should open your default web browser (if you can, use Chrome):

If you can see this, you are good to go!

Installing an IDE

To read, and write, some code you will need an Integrated Development Environment (IDE for short).

The one that we will be using for our project is Visual Studio Code.

You are free to use any other IDEs such as Atom, Sublime Text, or the more involved (and not free) JetBrain’s IntelliJ IDEA.

To install Visual Studio Code, head to the download page and download it.

Once downloaded, proceed by installing Visual Studio Code.

During the installation process, ensure you tick the following boxes:

Once installed, we will need to help VS Code find the Git executable.

To do that, start by installing the which tool:

scoop install which

What is which? Usually found in the Unix world, this tool will give you the path to an executable.

Then run which to find where git is installed:

which git

Copy the path that the command returned (the line starting by c:\ in the previous screenshot).

Then open Visual Studio Code (which will probably tell you about the Git issue):

Proceed by opening the settings file: File > Preferences > Settings

In the right-hand-side editor, where it says “User Settings”, add the following:

“git.path”: “c:\\the\\path\\to\\git”

(replace c:\\the\\path\\to\\git by the path you got with the which command of course, and double every backslash as the backlash is an escape character).

Restart VS Code, and Git should be working correctly now: