Skip to content
Chai aur Docs

Windows

A question that comes to mind for every web development beginner: How to set up my web development environment as a web developer?

The following guide will teach you how to set up a minimal web development environment for Windows.

Prerequisites

WSL

The first and most important part of setting up your Windows dev environment is installing the Windows Subsystem for Linux (WSL). We recommend sticking with Ubuntu but feel free to try out as many distributions as you like.

There used to be a handful of steps needed to install it, but we now only need to enter the following command into PowerShell or Command Prompt:

Terminal window
wsl --install

Updating Linux

It is recommended that you regularly update and upgrade your packages. In Ubuntu or Debian, we use the apt package manager:

Terminal window
sudo apt update && sudo apt upgrade

Windows does not automatically update or upgrade your Linux distribution(s). This is a task that most Linux users prefer to control themselves.

Mapping Your Linux Drive

When you open the Windows file explorer, it displays your devices and drives. We are going to add our Ubuntu virtual drive as a network location for easy access.

  1. Open the \\wsl$\ location from file explorer:

    File explorer search bar

  2. Right-click on the Ubuntu folder, and select Map network drive:

    Mapping network drive

  3. Select the drive letter you would like to use, leave Reconnect at sign-in checked and Connect using different credentials unchecked, and then click finish (mine will look slightly different because it’s already been done):

    Mapping network drive

  4. The result should look something like this:

    File explorer

If you wanted to access your Windows files from the Linux terminal, they are found in the /mnt/ directory, so your Windows user directory would be located at /mnt/c/Users/username.

With your Ubuntu drive mapped, you can easily drag/drop or copy/paste Windows files to the Linux file system by using the file explorer.

Pin Your Code Directory

Another quick tip I have is to create a code directory inside of Ubuntu, and then pin it to the quick access menu found on the left side of the file explorer. This comes in handy when transferring files quickly between Windows and Linux.

  1. Open File Explorer and click on the Ubuntu network drive we created

  2. Select the home dir, and then your user directory

  3. Right-click and create a new folder, name it code, or anything else you’d like

  4. Drag that new folder to the left, underneath the star icon that says Quick access. My code directory

Restarting WSL

If for some reason WSL stops working, you can restart it with these two commands from PowerShell/Command Prompt:

Terminal window
wsl.exe --shutdown
wsl.exe

Windows Terminal

A few quick things we recommend setting up are the default profile and your starting home directory. These settings make it so launching Windows Terminal will open directly into WSL inside our user’s home directory.

Default Profile

Windows Terminal will open a PowerShell or Command Prompt shell when launched by default, here is how to switch it to WSL:

  1. Select the ˅ icon from Windows Terminal and go to the Settings menu:

    Windows terminal settings

  2. In the Startup section you will find the Default profile dropdown, select Ubuntu. Below it, select Windows Terminal as the Default terminal application:

    Default shell profile

Starting Directory

A default Ubuntu terminal will open to the root directory. To make finding your files a little quicker we can have it open into your home directory instead.

  1. Under the Profiles section in the settings menu click on Ubuntu

  2. At the General tab, you will find a Starting directory input

  3. Enter the following replacing “username” with your Ubuntu user name: \\wsl$\Ubuntu\home\username

  4. You can leave the Use parent process directory box unchecked

  5. If it is still opening into your / directory, change the Command line setting located right above the Starting directory input box to the following: wsl.exe -d Ubuntu

    Starting directory in Ubuntu terminal

Zsh

Z shell works almost identically to the standard BASH shell found on default Linux installs. What makes it different is its support for plugins and themes, along with some extra features like spelling correction and recursive path expansion. It’s time to throw BASH in the trash!

Installing Zsh

Zsh can be installed with one command:

Terminal window
sudo apt install zsh

After installing, type the zsh command. Zsh will ask you to choose some configurations. We will do this later on while installing oh-my-zsh, so choose option 0 to create the config file and prevent this message from showing again.

OhMyZsh

The most popular plugin framework by far is OhMyZsh. It comes preloaded with loads of plugins, themes, helpers, and more. It can help with productivity for sure, but more importantly, it just looks cool 😎.

cURL

First off, we need to make sure we have cURL installed. Short for “Client URL”, it’s a way to transfer data from the command line, and that’s how we will download OhMyZsh.

Terminal window
sudo apt install curl

Installing OhMyZsh

Enter the following command into your terminal to install OhMyZsh:

Terminal window
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

That’s it! You should now see a .oh-my-zsh directory inside of your home directory. To change your plugins and themes you will need to edit your .zshrc file, also found in your home dir.

Here is a list of all the themes and plugins that come bundled with OhMyZsh.

Plugins

There are countless plugins available, but these two are recommend most.

zsh-autosuggestions

Autosuggestions for zsh, It suggests commands as you type based on history and completions.

  1. Clone this repository into $ZSH_CUSTOM/plugins (by default ~/.oh-my-zsh/custom/plugins)

    Terminal window
    git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

  2. Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):

    Terminal window
    plugins=(git zsh-autosuggestions)

  3. Start a new terminal session.

zsh-syntax-highlighting

This package provides syntax highlighting for the shell zsh. It enables the highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. This helps in reviewing commands before running them, particularly in catching syntax errors.

  1. Clone this repository in oh-my-zsh’s plugins directory:

    Terminal window
    git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

  2. Activate the plugin in ~/.zshrc:

    Terminal window
    plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

  3. Start a new terminal session.

    A huge list of plugins can be found at the awesome zsh plugins repo.

Git Config

Git should come pre-installed on most, if not all of the WSL Linux distributions. To ensure you have the latest version, use the following command in an Ubuntu or Debian-based distro:

Terminal window
sudo apt install git

Name

To set up your Git config file, open a WSL command line and set your name with this command (replacing “Your Name” with your preferred username):

Terminal window
git config --global user.name "Your Name"

Email

Set your email with this command (replacing “[email protected]” with the email you prefer):

Terminal window
git config --global user.email "[email protected]"

Username

And finally, add your GitHub username to link it to git (case sensitive!):

Terminal window
git config --global user.username "GitHub username"

Make sure you are inputting user.username and not user.name otherwise, you will overwrite your name and you will not be correctly synced to your GitHub account.

You can double-check any of your settings by typing git config --global user.name and so on. To make any changes just type the necessary command again as in the examples above.

Node.js

Node.js is a JavaScript runtime environment that executes JavaScript code outside a web browser. It allows us to install packages, run local web servers, create APIs, and more.

NVM

You will likely need to switch between multiple versions of Node.js based on the needs of the different projects you’re working on. Node Version Manager allows you to quickly install and use different versions of Node via the command line.

Installing NVM

  1. Open your terminal and install NVM with curl or wget:

    Terminal window
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

    To verify installation, enter: command -v nvm. This should return ‘nvm’, if you receive ‘command not found’ or no response at all, close your current terminal, reopen it, and try again.

  2. List which versions of Node are currently installed (should be none at this point):

    Terminal window
    nvm ls

  3. Install both the current and stable LTS versions of Node.js.

    Install the current stable LTS release of Node.js (recommended for production applications):

    Terminal window
    nvm install --lts

    Install the current release of Node.js (for testing the latest Node.js features and improvements, but more likely to have issues):

    Terminal window
    nvm install node

  4. Verify that Node.js is installed and the current version:

    Terminal window
    node --version

    Then verify that you have NPM installed as well:

    Terminal window
    npm --version

Changing Node Versions

Use the following commands to change the version of Node you would like to use for any given project:

Terminal window
# switch to the current version
nvm use node


# switch to the LTS version:
nvm use --lts


# switch to the specific version:
nvm use v8.2.1


# to list all of the versions
nvm ls-remote.

Package Managers

JavaScript package managers play a pivotal role in web development. They are tools that automate installing, upgrading, configuring, and consistently removing computer programs. They are critical in managing the numerous packages developers use to build complex applications.

Three prominent package managers have gained popularity in the JavaScript community: NPM, Yarn, PNPM and Bun.

NPM

  • As the name suggests, NPM (Node Package Manager) is a package manager for the JavaScript runtime environment Node.js.

  • It comes bundled with Node.js, so when you install Node.js, you automatically get NPM installed on your computer.

YARN

  • Yarn is a new package manager developed by Facebook in response to some of the problems they faced with NPM, particularly regarding speed, security, and reliability.

  • Yarn introduced some new features unavailable in NPM, such as offline package installation and deterministic dependency resolution.

  • Installation

    • Since v16.13, Node.js is shipping Corepack for managing package managers.

    • This is an experimental feature, so you need to enable it by running:

      Terminal window
      corepack enable

    • You can quickly check whether Corepack is enabled by running yarn exec env: if you get a path as output, Corepack is properly installed.

PNPM

  • PNPM, standing for Performant NPM, is a JavaScript package manager that aims to solve some of the issues associated with NPM and Yarn.

  • It can be a drop-in replacement for these tools while providing better performance and disk space usage.

  • PNPM uses a unique approach to manage node modules, which makes it highly disk efficient.

  • Installation

    • Since v16.13, Node.js is shipping Corepack for managing package managers.

    • This is an experimental feature, so you need to enable it by running:

      Terminal window
      corepack enable pnpm

Bun

  • Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.

  • It aims to provide a high-performance alternative to Node.js with better speed and resource efficiency.

  • Bun’s package manager is significantly faster than npm, yarn, and pnpm while maintaining compatibility with the npm registry.

  • Installation

    Terminal window
    powershell -c "irm bun.sh/install.ps1|iex"

Basic commands

  1. Initialize a new project

    To create a new project, navigate to your project directory and run the following commands.

    Terminal window
    bun init -y

    This will create a package.json file with the default settings.

  2. Install a package

    To install the required package, you can run the following commands.

    Terminal window
    bun add <package-name>

    This will install and add the package to your package.json file under the dependencies section.

  3. Install a development package

    To install a package for development purposes, run the following commands.

    Terminal window
    bun add -D <package-name>

    This will install and add the package to your package.json file under the devDependencies section.

  4. Run a script

    To run a script defined in your package.json file, run the following commands

    Terminal window
    bun run <script-name>

    This will run the script defined in the scripts section of your package.json file.

Integrated Development Environment

  • Essentially, there are two different philosophies that define your setup as a web developer.

  • While there are developers who prefer to have all their tooling in one Integrated Development Environment (IDE), there are developers who prefer to use multiple lightweight tools (e.g. editor/IDE, standalone terminal) and combine them for their purposes.

  • For beginners to web development, we recommend using one tool. The IDE (e.g. VS Code) combines everything that is needed for coding (editor) and executing the code (integrated terminal).

Installing VS Code

VS Code is available on Windows, macOS, and Linux. You can download the latest Windows installer here. We recommend using the stable build.

Changing the Default Shell

The WSL2 shell can be chosen as the default VS Code terminal by pressing Ctrl + Shift + P and typing/choosing Terminal: Select Default Profile, then selecting zsh:

VSCode default shell

VSCode default shell

Remote Extension

  • Install the Remote - WSL extension on VS Code.

  • This allows you to use WSL as your integrated development environment and will handle compatibility and pathing for you. Learn more.

  • This extension will also allow you to launch VS Code right from your WSL terminal by using the code command.

  • If I were inside the root directory of my repository, I would use code . to launch the entire directory inside VS Code.

    Terminal window
    cd my-project
    code .

Useful Extensions

The number of extensions available for VS Code can be overwhelming, here are some of the ones I use the most.

  • Live Server - Launch a local development server with a live reload feature for static & dynamic pages.

  • Prettier - Prettier is an opinionated code formatter.

  • ESLint - Find and fix problems in your code

  • HTML CSS Support - CSS Intellisense for HTML

  • Auto Rename Tag - Auto rename paired HTML/XML tag

  • CSS Pick - Allow peeking to css ID and class strings as definitions from html files to respective CSS.

  • Babel JavaScript - VSCode syntax highlighting for today’s JavaScript

  • JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax.

  • ES7+ React/Redux/React-Native snippets - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax.

  • Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling for VS Code

  • Error Lens - Improve highlighting of errors, warnings and other language diagnostics.

  • indent-rainbow - Makes indentation easier to read.

  • MDX - Language support for MDX

  • Prisma - Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.

  • vscode-icons - Icons for Visual Studio Code

  • Fluent Icons - Fluent product icons for Visual Studio Code

  • Material Theme Icons - Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme.

Chrome Extensions

These are all available as Firefox extensions as well.

  • React Dev tools - Adds React debugging tools to the Chrome Developer Tools.

  • ColorZilla - Advanced Eyedropper, Color Picker, Gradient Generator, and other colorful goodies

  • Axe Accessibility - Accessibility Checker for Developers, Testers, and Designers in Chrome.

  • Nimbus Capture - Screen Capture full Web page or any part.

  • WhatFont - With this extension, you could inspect web fonts by just hovering on them.

  • JSON Formatter - Makes JSON easy to read.

References

Set up a WSL development environment learn.microsoft.com
Set up a WSL development environment using best practices from this set-by-step guide. Learn how to run Ubuntu, Visual Studio Code or Visual Studio, Git, Windows Credential Manager, MongoDB, MySQL, Docker remote containers and more.
Install WSL learn.microsoft.com
Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by your preferred Linux distribution - Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine, and more are available.
ZSH and Oh-My-Zsh on Windows Subsystem for Linux (WSL) kevinprogramming.com
In this posting, I will show how to install ZSH and Oh-My-Zsh on Windows PC (WSL). This will be helpful if you want to setup a Linux development environment on Windows PC. I have already installed Ubuntu 20.04 on Windows Subsystem for Linux (WSL). Bash is the default shell
Set up Node.js on WSL 2 learn.microsoft.com
A guide to help you get your Node.js development environment set up on Windows Subsystem for Linux (WSL).
Installing Chocolatey chocolatey.org
Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.