Windows Survival Guide for React and Web Developers
Tags: wsl, wsl2, react
Published: 2020-06-07 20:13:38

---
title: Windows Survival Guide for React and Web Developers
published: true
description: Coming from Linux or Mac and starting to do React-
tags: wsl, wsl2, react
//cover_image: https://rockiger.com/wp-content/uploads/Capture-1024x576.png
canonical_url: https://rockiger.com/en/blog-en/windows-survival-guide-to-for-react-and-web-developers/
---
<figure class="wp-block-image size-large"><img src="https://rockiger.com/wp-content/uploads/Capture-1024x576.png" alt="" class="wp-image-1223"/></figure>
## Introduction or why I wrote a survival guide

As a lifelong Linux user I started a job in a company where I had to use a Windows laptop. My job is to create a React frontend. Not knowing Windows I wondered about the best way to do my development work.

## 2 Routes

During my research I discovered two ways for emulating a Linux/macOS like workflow in Windows. 

The first way creates a minimal bash environment to emulate a Linux command line. You will run Windows alternatives of your development tools.

The second route uses the [Windows Subsystem for Linux 2](https://docs.microsoft.com/de-de/windows/wsl/wsl2-index) (or short WSL 2) to create a Linux environment inside your Windows system. This way you can use all your Linux tools like in your Linux distro. On the downside it uses more system resources and needs more work to set up.

### Which route to choose?

If you have admin rights to your Windows machine and prefer Linux over Windows I would recommend going with WSL.

## Fast Route

#### Pros:

*   easy to setup
*   doesn't need admin right
*   uses fewer resources

#### Cons:

*   it doesn't have to full power of a Linux distribution 
*   your dev-environment will probably differ from your prod-environment
*   IO-operations with Yarn/NPM are slower

The fast route works fine for developers who want to get started quickly or don't have admin rights on their development machine. It will imitate a Linux or Mac dev-environment with a package manager for Windows called Scoop.

The apps we install later are selected because they work without admin rights. For that reason I opted to install [Node.js](https://nodejs.org/en/) directly instead of using [nvm-windows](https://github.com/coreybutler/nvm-windows) which needs admin rights to set the default node version.

To start, open a **PowerShell** and install [scoop](https://scoop.sh/) first. Paste the following lines in your PowerShell:

<pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">set-ExecutionPolicy RemoteSigned -Scope currentUser
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
 # If you get an error 'https is not supported try typing it by hand. Windows screws up URLs.
scoop help
 # for usage information
scoop search # this will show all available packages
scoop search git # this will show all available packages with git in their name</pre>

Now that we installed scoop, we can install our dev-environment:

<pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">scoop install git
scoop install nodejs-lts
scoop install yarn</pre>

Now it's time to test our dev-environment. Assuming you come from a **Bash** background, it makes sense you are using [Git Bash](https://gitforwindows.org/#bash) now, which was installed with git automatically. Open up Git Bash and create a React app:

<pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">git install https://github.com/GermaVinsmoke/bmi-calculator.git # If you get an error 'https is not supported try typing it by hand. Windows screws up URLs.
cd bmi-calculator.git
yarn # this will take some time
yarn start # this should start your default browser on http://localhost:3000</pre>

### Bonus: Installing an editor

Assuming that you don't want to use notepad or vim for your development. It makes sense to install a different editor. Therefore we need to add another repository (called bucket) to scoop, then we can install most editors available (**Atom**, **VScode, Notepad++**).

For fans of [Jetbrains](https://www.jetbrains.com/) products there is an additional bucket called **jetbrains**.

<pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">scoop bucket add extra
scoop install vscode # or notepadplusplus or atom</pre>

If you are using **Git Bash** it makes sense to restart it, because otherwise the editor will not available in your path. Other than that you are now good to go.

## Rockstar Route

#### Pros:

*   dev-environment is the same as the prod-environment
*   has access to all Linux tools
*   very fast IO with NPM
*   can even run Linux GUI programs

#### Cons:

*   uses more system resources
*   needs more work to set up

### Check if you have the right windows version

If you want to install WSL 2 you need Windows build **18917** or higher. You can check your Windows version with the shortcut `Win+R` and enter `winver` in the entry field. If you don't have a suitable build you need to join the [Windows Insider Programm](https://insider.windows.com) in your Settings. I recommend the Slow track, where you get updates about once a week.

### Install WSL2

First, we need to enable the Windows Subsystem for Linux and enable the **Virtual Machine Platform**.

Open a **PowerShell** as administrator:

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux # is this really needed
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart</pre>

Restart your system.

### Install a Linux Distribution (Assumes that you install Ubuntu)

First set WSL 2 as default. In a PowerShell enter:

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">wsl --set-default-version 2</pre>

After that, go to the **Microsoft Store** and search for the Linux distro you like. I will assume you chose [Ubuntu.](https://www.microsoft.com/de-de/p/ubuntu/9nblggh4msv6?activetab=pivot:overviewtab)

Open the Ubuntu from the Start menu and create a new user. The full installation of Ubuntu will need a view minutes.

When the installation has finished, update the packages.

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">sudo apt update && sudo apt upgrade</pre>

Now you have a fully functional Ubuntu at your fingertips. And can install your development tools analog to our solution above.

By the way, if you want to open your current Ubuntu directory in Windows just type:

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">explorer.exe .</pre>

An Explorer window will open on your screen.

### Install VSCode on Windows

To develop comfortably on Windows you should install VSCode on Windows. I personally had problems with the Scoop version. So install the [version from their website](https://code.visualstudio.com/).

Similar to the file explorer you can then open Ubuntu directories with

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">code .</pre>

### Install NodeJS and Yarn on Ubuntu

Open up an Ubuntu window and enter the following code to install [Yarn](https://classic.yarnpkg.com/en/)

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn</pre>

Then install NodeJS with [Node Version Manager](//raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash).

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc
nvm install --lts</pre>

### Use Linux tools to develop

Now you should be able to use the development tools you need. To test your new environment try

<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npx create-react-app my-app
cd my-app
yarn start</pre>

A browser tab should open and you are able to start developing.

Which way to develop do you prefer? Let me know if you are interested running Linux GUI programs with WSL 2.

​​