Setting up Gatsby.JS on WSL Ubuntu

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

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)

Install NodeJS

1. Check the most recent version of NVM. You can check the GitHub project page 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)

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!