Setting up Gatsby.JS on WSL Ubuntu
Tags: wsl, gatsby, windows, node
Published: 2020-11-01 19:26:55

---
title: Setting up Gatsby.JS on WSL Ubuntu
published: true
description: Walking through the Gatsby.JS Development Environment set up for Windows 10 Subsystem Linux
tags: wsl, gatsbyjs, windows, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7ds27kkpf4p7upluruv5.png
---

A lot of development tools are Linux based making a MacBook the standard tool that tutorials are written for. My personal system, however, is a Windows 10 laptop. While I have few issues with this as a development machine, it does require some extra steps and translation during set up. 

I'm going to go through the steps taken to set up Gatsby.JS on Ubuntu WSL and collect all of the other articles I found in order to make this happen following the [Tutorial Part Zero](https://www.gatsbyjs.com/tutorial/part-zero/) on GatsbyJS.

## Set Your SUDO Password
The assumption is that this is done automatically, but as WSL is a lightweight virtual machine and has no relation to any existing passwords. 

> 1. Open `cmd.exe`
> 2. Type `wsl -u root`
> 3. Type `passwd [username]` and change the password
> 4. Type `exit`

(source [Ask Ubuntu](https://askubuntu.com/a/1206622/1143778))

## Set the WSL DNS 
I'm not sure exactly which DNS WSL points to by default, but it won't correctly connect to NPM which is required to install the Gatsby CLI. For simplicity, I used Google's DNS address of `8.8.8.8` but you can use whichever DNS you trust most.

### Clear Existing DNS entries.

[In WSL] Turn off DNS generation
[In WSL] Edit `\etc\resolve.conf`
```
[network]
generateResolvConf = false
```
[In CMD] Reset all WSL connections. This will cause other connections such as Docker's WSL Container Connection to reset.
```
wsl --shutdown
```
[In WSL] Remove any existing symlinks to resolve.conf. 
```
rm \etc\resolve.conf
```
### Create New resolve.conf
```
touch \etc\resolve.conf
echo "nameserver 8.8.8.8" >> \etc\resolve.conf
```

### Reset WSL Again
```
wsl --shutdown
```

(source [SuperUser](https://superuser.com/questions/1533291/how-do-i-change-the-dns-settings-for-wsl2))

##Install NodeJS

1. Check the most recent version of NVM. You can check the [GitHub project page](https://github.com/nvm-sh/nvm) for the latest release. At the project page, navigate to the install.sh file and choose **RAW**. Copy the URL. 
2. Install Curl: `sudo apt-get install curl`
3. Install NVM: `curl -o- [URL of install file] | bash`
4. Install the Latest Stable release of Node: `nvm install node --lts`

(source [Windows Developer](https://docs.microsoft.com/en-us/windows/nodejs/setup-on-wsl2))

## Install Git Version Control 
### Install Git
Installing Git into WSL is straightforward: `sudo apt-get install git`
### Set up SSH Keys (Optional)
While technically 'optional' many projects require SSH authentication instead of HTTP, so it's easier to get this done right away. 
1. Generate SSH Keys using `ssh-keygen -t rsa -b 4096 -C "your_email@example.com"` and following the prompts.
2. Add keys to the SSH Agent as the agent will not start automatically when WSL starts. Adding the command to your `.profile` will start the agent and add your identity when WSL starts.
```
echo "eval $(ssh-agent -s)" >> .profile
echo "ssh-add ~/.ssh/[YourSSHPrivateKey]"
```
You can now add your public key to a Git Repository Manager such as GitLab, GitHub, or CodeBuild. The SSH Keys are part of your Repository User Profile.

## Install GatsbyJS
The Gatsby CLI is available via npm and should be installed globally by running:
```
npm install -g gatsby-cli
```

## The End!

That's everything you need in order to get a GatsbyJS Development environment in Ubuntu WSL for Windows 10 and every resource I used to get to this point. Hope this helps!