DEV Community

Kevin Julián Martínez Escobar
Kevin Julián Martínez Escobar

Posted on

Setting Up a Web Development Environment on Windows (For Beginners)

#webdev #programming #beginners #learning

If you're just starting out in web development and using a Windows machine, this guide will walk you through the essential setup to get productive quickly.

This guide covers what I believe are the most essential tools and configurations for beginners working with Windows:

  1. Install your favorite browser
  2. Use a better Windows terminal
  3. Enable and install WSL (Windows Subsystem for Linux)
  4. Configure the default terminal profile
  5. Install Oh My Zsh
  6. Install NVM and Node.js
  7. Set up SSH keys for GitHub
  8. Test your SSH connection
  9. Install VS Code or your favorite editor
  10. Install Docker Desktop

1. Install your favorite browser

First step is easy: just install your favorite browser—Chrome, Edge, Safari, Opera, Brave—whatever you feel comfortable using and offers developer tools you like.

2. Use a better Windows terminal

If you're on Windows, you might know CMD or Git Bash. They're okay, but I highly recommend Windows Terminal. In newer versions of Windows, it might already be installed, and if not, you can download it from the Microsoft Store.

If you're using another terminal and everything else works fine, feel free to keep using it. If not, consider switching.

3. Enable and Install WSL (Windows Subsystem for Linux)

Once you open Windows Terminal, it defaults to PowerShell. Use it to install WSL:

wsl --install
Enter fullscreen mode Exit fullscreen mode

This installs Ubuntu by default and will prompt you to create a username and password. When typing the password, nothing will appear (no *), but it's being typed. Use a secure password—you’ll need it later.

Once installation is complete, restart your computer.

4. Configure the default terminal

After restarting, Windows Terminal will still open in PowerShell. Let’s change the default profile.

Open the settings panel:

terminal options

And set Ubuntu as your default profile:

configuration profile options

You’re now ready to use the Ubuntu terminal!

To navigate easily to your current folder in the Windows file explorer, use:

explorer.exe .
Enter fullscreen mode Exit fullscreen mode

You’ll also find your Linux files under this path:

Linux folder

5. Install Oh My Zsh

Install zsh and oh-my-zsh to improve your terminal experience:

sudo apt update sudo apt install zsh
Enter fullscreen mode Exit fullscreen mode

You'll be prompted to enter your Ubuntu user password and confirm with Y.

Then install Oh-My-Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

With this, you'll get tab completion, Git status indicators, and an overall better UX:

oh-my-zsh example

6. Install NVM and Node.js

There are many ways to install Node.js, but the most professional one is using a version manager like Nvm. Sometimes you’ll need to switch between Node versions for different projects.

To install NVM:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

If nvm isn’t recognized, just restart your terminal.

Then install the latest LTS (Long-Term Support) version:

nvm install --lts
Enter fullscreen mode Exit fullscreen mode

Always use the LTS version unless a project requires something else. You can check Node.js releases for more info.

7. Set Up SSH Keys for GitHub

To clone, pull, and push code from your GitHub account securely, it's better to use SSH instead of HTTPS.

Generate a new SSH key:

ssh-keygen -t ed25519 -C "your_email@example.com"
Enter fullscreen mode Exit fullscreen mode

You'll be prompted to enter a path and passphrase. You can leave both blank if you prefer:

> Enter file in which to save the key (/home/your_user/.ssh/id_your_key):[Press enter] > Enter passphrase (empty for no passphrase): [Type a passphrase] > Enter same passphrase again: [Type passphrase again]
Enter fullscreen mode Exit fullscreen mode

Then, follow this guide to add the public key (id_your_key.pub) to your GitHub account.

8. Test Your SSH Connection to GitHub

Clone a test repository to make sure your SSH setup works:

git clone git@github.com:kevinccbsg/react-router-tutorial-devto.git
Enter fullscreen mode Exit fullscreen mode

If this appears:

> The authenticity of host 'github.com (IP ADDRESS)' can't be established. > ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU. > Are you sure you want to continue connecting (yes/no)?
Enter fullscreen mode Exit fullscreen mode

Type yes and hit Enter.

If you get a “Permission denied (publickey)” error, run:

eval $(ssh-agent) ssh-add /home/your_user/.ssh/id_your_key
Enter fullscreen mode Exit fullscreen mode

To avoid doing this every time, add these lines to your ~/.zshrc file.

Also, don’t forget to set your Git user details globally:

git config --global user.name "your name" git config --global user.email "your_email@example.com"
Enter fullscreen mode Exit fullscreen mode

9. Install VS Code or your favorite code editor

Now install your code editor of choice. I recommend VS Code for beginners.

Make sure you check the "Add to PATH" option during installation so you can launch it with:

code .
Enter fullscreen mode Exit fullscreen mode

This allows you to open folders directly inside WSL.

10. Install Docker Desktop for Windows

If you're not familiar with Docker yet, you can skip this step for now.

Docker is useful for backend and full-stack projects. Install Docker Desktop and enable WSL integration.

Conclusion

By now, you’ve set up a modern and efficient development environment that combines the power of Linux with the comfort of Windows.

Top comments (0)