How to Set Up Your Windows 10 Machine for Full Stack Web Development

I have to set up computers somewhat regularly with my preferred development environment. I’ve been doing this for a while, and I’ve gotten it down to a science. I’m going to share my process with you so you can get up and running quickly.

I used to think that Mac provided the best web development experience. However, I found that many of the recent improvements to WSL has changed my mind. Although MacOS is Linux-ey, it doesn’t hit the same as just using plain old Debian.

Install WSL Debian 12 (bookworm)

Installing Debian 12 to WSL is relatively straightfoward. In the past I wouldn’t have chosen Debian since it tends to have out-of-date package repositories that make development difficult. However, Debian 12 has stepped it up and offers Node v18 out of box.

1. In PowerShell, make sure WSL is up to date with:

wsl --update

2. Now, install Debian 12.

wsl --install -d debian

3. You should see a prompt to set up an account after the installation finishes. If you have a username that you use to SSH into servers, I recommend setting it to that username. For the password, feel free to just put asdf or something. We will later enable passwordless sudo so this shouldn’t matter.

4. Ensure that you’re using WSL 2 instead of WSL 1.

wsl --set-version debian 2

5. Set Debian as your default WSL distro

wsl --set-default debian

Set Up Passwordless sudo

Usually, passwordless sudo can be a security vulnerability. However, the only thing that really can be compromised in your WSL setup would be your ~/.ssh folder’s SSH keys, which are already accessible with user permissions. Additionally, your WSL environment’s root user still ony has user permissions in regards to your Windows operating system. So, there is not much to worry about here.

To enable passwordless sudo, run the following command in WSL.

echo "$USER ALL=(ALL:ALL) NOPASSWD: ALL" | sudo tee -a /etc/sudoers

Install Useful Packages

1. First, update your package repository and upgrade existing packages.

sudo apt update && sudo apt upgrade

2. Install some of my favorite packages.

sudo apt install -yqq git vim ssh man cowsay sl nodejs npm

3. Install pnpm package manager. This is the best way to ensure that your node_modules/ folders don’t

sudo npm install -g pnpm

Fix WSL’s finnicky DNS

You may as well just do this preventatively right now. In my experience, WSL likes to crap itself and stop working when it comes to DNS, and it will probably do this soon if it hasn’t already.

1. Edit your wsl.conf as root:

sudo vim /etc/wsl.conf

2. Add the following lines to prevent WSL from self-destructing its DNS:

[network]
generateResolvConf=false

3. Delete the existing /etc/resolv.conf because its usually a symlink and you can’t just overwrite it in Vim.

sudo rm -rf /etc/resolv.conf

4. Create a new /etc/resolv.conf with Cloudflare as the nameserver.

sudo vim /etc/resolv.conf

5. In Vim:

nameserver 1.1.1.1

# Optionally, if you have a domain you often connect to subdomains of.
# Add a `search` domain to your resolv.conf.
search bgodley.com

# This will make it so that the hostname `test` resolves to `test.bgodley.com`.
# Very handy!

Set up your SSH keys

I tend to use ed25519 keys when I am setting up SSH keys. If you’re still using RSA, I’d recommend you check them out as they’re much shorter and some people who know more than me claim they’re more secure as well.

1. Generate a public/private SSH key pair.

ssh-keygen -t ed25519

2. Add the public key to your git provider (GitLab, GitHub, BitBucket (if you’re being forced to use BitBucket, I’ll just say that life gets better eventually and someday you will find happiness, but not yet.), etc.)

Set up VS Code

To all the Neovim users out there: Why install Neovim and configure it when you can just type code?

1. Open VS Code. I was taught about opening VS Code from the terminal like two years ago by an 11 year old coding savant kid, and I am here to pass that timeless wisdom down to you.

code my-project

2. Install some nice VS Code Extensions:
   • Must-have extensions:
     • WSL - by Microsoft - Allows you to use VScode as an editor for WSL environment. Basically the entire application will run in WSL except for the user interface which runs in Windows. It’s the perfect combo.
     • ESLint (if using JavaScript) - by Microsoft - This extension provides you with a “linter”, which is a tool that will constantly watch your code for problems and tell you about them. It’s incredibly useful for making your code follow good coding practices and style guidelines.
     • Python (if using Python) - by Microsoft - Provides linting, intellisense, code formatting, and more for Python. Must have.
     • Pylance (if using Python) - by Microsoft - Language server for Python. I think that means it gives you type checking.
     • Prettier - by Prettier - Code formatter. Will speed up your time to write clean code by allowing you to just press Ctrl+Alt+F whenever you want to format the document. The default formatting settings are great, and I’ve never needed to change them.
     • Puppet (if using Puppet) - by puppet - Syntax highlighting, auto completion, linting for Puppet (.pp) files.
   • Pretty useful extensions:
     • Vim - by vscodevim - If you haven’t tried Vim, I will say that it can help you write code with 1/2 of the effort and 2x as fast
     • Dev Containers - by Microsoft - I have tried this a couple of times but every time I can’t figure out how to set it up. Regardless, I think it’s probably very useful if you’re smart enough to figure it out.
   • ??? tier extensions:
     • Emacs - by VSCodeEmacs - I recommend learning emacs just to flex on people, not because its actually useful (seriously, why would you use N and P to move up and down?)
     • vscode-pets - by Anthony Shaw - Increase productivity
3. Useful shortcuts:
   • Ctrl+Shift+P - Open Command Palette to do basically anything
   • Ctrl+P - Navigate to files without having to use the explorer. You can press Ctrl+P and Ctrl+Shift+P to navigate up and down through the list too.
   • Ctrl+Tab and Ctrl+Shift+Tab - Switch between open tabs.
   • Ctrl+` - Switch to the terminal, or open it if it isn’t open.
   • Ctrl+PageUp and Ctrl+PageDown - Navigate up and down between open terminals.
4. One useful configuration if you’re using Vim: You can set VS Code to use relative line numbers.
   1. Press Ctrl+Shift+P and type “settings.json”, then press Enter.
   2. Add the following line to your settings.json at the end:

"editor.lineNumbers": "relative",

3. Now you can easily hop down to specific lines by just looking at the relative line numbers.

Install Docker Desktop (personal computer hack)

I label this a “personal computer hack” because I can’t do this at work since we don’t want to pay for a Docker license. Instead, I have to use Podman. Man, I hate podman-compose and all the garbage it prints out.

1. Go to Docker’s site and click “Download for Windows”.
2. Once it is installed, open Docker Desktop and navigate to Settings -> General and turn on “Use WSL 2 based engine”.
3. Now test that your Docker works in WSL 2:

docker run -ti --rm bcbcarl/hollywood:latest

Congration, you done it

These are pretty much all of the steps I would take to set up my computers. Now you have a Linux-based development environment with up-to-date Node.js, SSH keys, and Docker ready to go.