DEV Community

Cover image for The Ultimate Guide to Setting Up a Windows 11 Web Development Environment 🚀 ~ Sep, 24
a99divx
a99divx

Posted on

The Ultimate Guide to Setting Up a Windows 11 Web Development Environment 🚀 ~ Sep, 24

#webdev #javascript #programming #tutorial

⌚ Last Update: 16:47:29 UTC - Friday, 20 September 2024

Setting up a robust and efficient web development environment on Windows 11 can be straightforward and rewarding. This comprehensive guide will walk you through installing essential tools, configuring your system for optimal performance, and leveraging modern development practices. We'll also introduce hands-on projects and recommend tools to boost your productivity.

Table of Contents 📑

  1. Introduction
  2. Prerequisites
  3. Setting Up Windows Subsystem for Linux (WSL 2)
  4. Configuring Windows Terminal
  5. Setting Up Git and GitHub
  6. Enhancing Your Shell with Zsh and Oh My Zsh
  7. Installing Node.js and pnpm
  8. Visual Studio Code Setup
  9. Exploring Additional Code Editors and IDEs
  10. Using Package Managers: Chocolatey and Scoop
  11. Additional Development Tools
  12. Browser Extensions for Developers
  13. Productivity Tools
  14. Leveraging AI-Powered Tools
  15. Conclusion
  16. Additional Resources

Introduction 🌐

In today's fast-paced development landscape, having a fully optimized setup is crucial for productivity and efficiency. This guide aims to help you configure a professional web development environment on Windows 11, leveraging powerful tools like Windows Subsystem for Linux (WSL 2), modern terminals, and AI-driven coding assistants. We'll also provide practical insights through interactive project building to enhance your learning experience.

Prerequisites 📝

Before we begin, ensure you have the following:

  • Operating System: Windows 10 version 2004 or higher, or Windows 11
  • User Account: Administrative privileges
  • Internet Access: For downloading tools and updates
  • GitHub Account: Sign up here if you don't have one

For a streamlined setup experience, consider forking the repository on GitHub. This repository provides additional scripts and configurations to enhance your development environment.

Setting Up Windows Subsystem for Linux (WSL 2) 🐧

WSL allows you to run a Linux environment directly on Windows, facilitating a smoother development experience, especially for web development.

Installing WSL 2

  1. Enable WSL and Install a Linux Distribution:

Open PowerShell as Administrator and run:

   wsl --install
Enter fullscreen mode Exit fullscreen mode

This command will:

  • Enable the required optional components.
  • Download and install the latest Linux kernel.
  • Set WSL 2 as the default.
  • Install Ubuntu as the default Linux distribution.
  1. Restart Your Computer:

Restart to complete the WSL installation.

Initial Configuration of WSL

  1. Launch Ubuntu:

Open Ubuntu from the Start menu. It will take a few moments to set up.

  1. Create a UNIX Username and Password:

You'll be prompted to create a UNIX username and password. This is separate from your Windows credentials.

Updating Your Linux Environment

Keep your Linux distribution up to date:

sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

Accessing Linux Files from Windows

Access your Linux files directly from Windows:

  1. Using File Explorer:

Navigate to:

   \\wsl$
Enter fullscreen mode Exit fullscreen mode

This will show all your installed WSL distributions.

  1. Mapping a Network Drive:
  • Right-click on the Ubuntu folder.
  • Select Map network drive....
  • Choose a drive letter (e.g., Z:).
  • Check Reconnect at sign-in.
  • Click Finish.

Your Linux home directory is now accessible from Windows as a network drive.

Restarting WSL

If you encounter issues:

wsl --shutdown
Enter fullscreen mode Exit fullscreen mode

Then relaunch your Linux distribution.

Important Considerations

  • File System Performance: For best performance, keep your project files within the Linux file system (/home/username/).
  • Line Endings: Use a .gitattributes file to ensure consistent line endings across Windows and Linux.
  • Path Differences: Be mindful of path formats when working across systems.
  • Permissions: Some operations may require elevated privileges in WSL.

Configuring Windows Terminal 🖥️

Windows Terminal is a modern, feature-rich terminal application that supports multiple tabs, split panes, and extensive customization.

Installing Windows Terminal

Download from the Microsoft Store or via PowerShell:

winget install --id=Microsoft.WindowsTerminal -e
Enter fullscreen mode Exit fullscreen mode

Customizing Windows Terminal

  1. Set Default Profile:
  • Open Windows Terminal.
  • Click the down arrow next to the new tab button and select Settings.
  • Under Startup, set Default profile to Ubuntu.
  1. Set Starting Directory:
  • In Profiles, select Ubuntu.

  • Under Advanced, set Starting directory to:

     \\wsl$\Ubuntu\home\your_username
  1. Customize Appearance:
  • Explore the Appearance tab to change the theme, font, and background.
  • Install a Powerline font like MesloLGS NF for better prompt symbols.
  1. Install Themes:
  • Visit Windows Terminal Themes to find and install new themes.
  • You can import themes by editing the settings.json file.

Setting Up Git and GitHub 🧑‍💻

Git is essential for version control, and GitHub hosts your repositories.

Installing Git

Git is typically pre-installed in your WSL distribution. If not, install it:

sudo apt install git
Enter fullscreen mode Exit fullscreen mode

Configuring Git

Set up your global Git configuration:

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"
Enter fullscreen mode Exit fullscreen mode

Verify your settings:

git config --list
Enter fullscreen mode Exit fullscreen mode

Generating SSH Keys for GitHub

  1. Generate a New SSH Key: 
   ssh-keygen -t ed25519 -C "youremail@example.com"
Enter fullscreen mode Exit fullscreen mode

Press Enter to accept the default file location. Set a passphrase if desired.

  1. Start the SSH Agent: 
   eval "$(ssh-agent -s)"
Enter fullscreen mode Exit fullscreen mode
  1. Add Your SSH Key: 
   ssh-add ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode
  1. Add the Key to Your GitHub Account:

  • Copy your public key:

     cat ~/.ssh/id_ed25519.pub

  • Log in to GitHub.

  • Go to Settings > SSH and GPG keys.

  • Click New SSH key, provide a title, and paste your key.

Using Personal Access Tokens (Optional)

If you prefer HTTPS over SSH:

  1. Generate a Personal Access Token (PAT):
  • On GitHub, go to Settings > Developer settings > Personal access tokens.
  • Click Generate new token, select scopes, and generate.
  1. Configure Git Credential Manager: 
   git config --global credential.helper store
Enter fullscreen mode Exit fullscreen mode

The next time you authenticate with GitHub, enter your PAT as the password.

Enhancing Your Shell with Zsh and Oh My Zsh 🐚

Zsh is an advanced shell that offers powerful features and customization.

Installing Zsh 

sudo apt install zsh
Enter fullscreen mode Exit fullscreen mode

Set Zsh as your default shell:

chsh -s $(which zsh)
Enter fullscreen mode Exit fullscreen mode

Installing Oh My Zsh

Oh My Zsh is a framework for managing Zsh configuration.

  1. Install Curl (if not installed): 
   sudo apt install curl
Enter fullscreen mode Exit fullscreen mode
  1. Install Oh My Zsh: 
   sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

Adding Themes and Plugins

  1. Install Powerlevel10k Theme: 
   git clone --depth=1 https://github.com/romkatv/powerlevel10k.git \
     ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
Enter fullscreen mode Exit fullscreen mode

Set the theme in ~/.zshrc:

   ZSH_THEME="powerlevel10k/powerlevel10k"
Enter fullscreen mode Exit fullscreen mode
  1. Install Recommended Fonts:

Download and install the MesloLGS NF font.

  • Windows Terminal: Set the font face to "MesloLGS NF" in settings.
  1. Install Useful Plugins:

  • zsh-autosuggestions:

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

  • zsh-syntax-highlighting:

     git clone https://github.com/zsh-users/zsh-syntax-highlighting.git \
   ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
  1. Enable Plugins:

Edit ~/.zshrc:

   plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
Enter fullscreen mode Exit fullscreen mode
  1. Apply Changes: 
   source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode
  1. Configure Powerlevel10k:

Run the configuration wizard:

   p10k configure
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to customize your prompt.

Installing Node.js and pnpm 🟢

Node.js is essential for JavaScript development, and pnpm is a fast, disk space-efficient package manager.

Installing NVM (Node Version Manager)

Install NVM to manage multiple Node.js versions:

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

Activate NVM:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Enter fullscreen mode Exit fullscreen mode

Add these lines to your ~/.zshrc or ~/.bashrc to load NVM automatically.

Installing Node.js via NVM

Install the latest LTS version:

nvm install --lts
Enter fullscreen mode Exit fullscreen mode

Set the default Node.js version:

nvm alias default node
Enter fullscreen mode Exit fullscreen mode

Installing pnpm

Install pnpm globally:

npm install -g pnpm
Enter fullscreen mode Exit fullscreen mode

Alternatively, use the installation script:

curl -fsSL https://get.pnpm.io/install.sh | sh -
Enter fullscreen mode Exit fullscreen mode

Ensure pnpm is in your PATH by adding to ~/.zshrc or ~/.bashrc:

export PATH="$HOME/.local/share/pnpm:$PATH"
Enter fullscreen mode Exit fullscreen mode

Reload your shell configuration:

source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Using pnpm

  • Initialize a New Project: 
  pnpm init
Enter fullscreen mode Exit fullscreen mode
  • Install Dependencies: 
  pnpm install package-name
Enter fullscreen mode Exit fullscreen mode
  • Install a Package Globally: 
  pnpm add -g package-name
Enter fullscreen mode Exit fullscreen mode

Visual Studio Code Setup 📝

Visual Studio Code is a versatile code editor with extensive extension support.

Installing Visual Studio Code

Download from the official website.

Configuring VS Code for WSL

  1. Install the Remote - WSL Extension:
  • Open VS Code.
  • Go to the Extensions view (Ctrl+Shift+X).
  • Search for Remote - WSL and install it.
  1. Open a WSL Project in VS Code:

In your WSL terminal, navigate to your project directory and run:

   code .
Enter fullscreen mode Exit fullscreen mode

Essential Extensions 🔌

  • Live Server: Launch a local development server with live reload.
  • Prettier: Code formatter for consistent style.
  • ESLint: Integrate ESLint for JavaScript linting.
  • GitLens: Enhance Git capabilities within VS Code.
  • Docker: Support for Docker files.
  • Bracket Pair Colorizer 2: Color matching brackets.
  • Path Intellisense: Autocomplete filenames.
  • vscode-icons: Enrich the file explorer with icons.
  • Remote - SSH: Connect to remote servers via SSH.

Settings Sync

Leverage VS Code's Settings Sync feature to synchronize your settings, extensions, and keybindings across devices.

Exploring Additional Code Editors and IDEs 🖊️

While VS Code is popular, other editors and IDEs may better suit your needs.

Cursor IDE

Cursor IDE is an AI-powered code editor that enhances productivity.

  1. Download Cursor IDE:

Visit the Cursor IDE website to download.

  1. Features:
  • AI-assisted code completion.
  • Intelligent error detection.
  • Code refactoring and generation tools.

Other IDEs

  • JetBrains IntelliJ IDEA: Ideal for Java and Kotlin development.
  • PyCharm: Specialized for Python projects.
  • WebStorm: Excellent for JavaScript and TypeScript.
  • Visual Studio: Comprehensive IDE for .NET development.

Using Package Managers: Chocolatey and Scoop 📦

Package managers simplify the installation and management of software on Windows.

Chocolatey

Chocolatey is a powerful package manager for Windows.

Installing Chocolatey

  1. Open PowerShell as Administrator.

  2. Run the Installation Command:

   Set-ExecutionPolicy Bypass -Scope Process -Force;
   [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
   iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
Enter fullscreen mode Exit fullscreen mode

Using Chocolatey

  • Install a Package: 
  choco install package-name -y
Enter fullscreen mode Exit fullscreen mode
  • Upgrade All Packages: 
  choco upgrade all -y
Enter fullscreen mode Exit fullscreen mode

Scoop

Scoop focuses on simplicity and minimizes the need for administrative privileges.

Installing Scoop

  1. Ensure PowerShell Execution Policy: 
   Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Enter fullscreen mode Exit fullscreen mode
  1. Install Scoop: 
   iwr -useb get.scoop.sh | iex
Enter fullscreen mode Exit fullscreen mode

Using Scoop

  • Install a Package: 
  scoop install package-name
Enter fullscreen mode Exit fullscreen mode
  • Update Packages: 
  scoop update *
Enter fullscreen mode Exit fullscreen mode

Additional Development Tools 🛠️

Docker Desktop 🐳

Docker enables containerization, making it easier to deploy and manage applications.

Installing Docker Desktop

  1. Download Docker Desktop from the official website.

  2. Install and Restart your computer if prompted.

Configuring Docker with WSL 2

  • Enable WSL 2 Backend:

In Docker Desktop settings, ensure Use the WSL 2 based engine is checked.

  • Resource Management:

Configure CPU and memory allocation in Docker Desktop settings under Resources.

Python and Pyenv 🐍

Manage multiple Python versions with Pyenv.

Installing Pyenv

  1. Install Dependencies: 
   sudo apt update
   sudo apt install -y make build-essential libssl-dev zlib1g-dev \
     libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm \
     libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev \
     libffi-dev liblzma-dev
Enter fullscreen mode Exit fullscreen mode
  1. Install Pyenv: 
   curl https://pyenv.run | bash
Enter fullscreen mode Exit fullscreen mode
  1. Configure Environment:

Add to your ~/.zshrc or ~/.bashrc:

   export PYENV_ROOT="$HOME/.pyenv"
   export PATH="$PYENV_ROOT/bin:$PATH"
   eval "$(pyenv init --path)"
   eval "$(pyenv virtualenv-init -)"
Enter fullscreen mode Exit fullscreen mode

Reload your shell:

   source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Managing Python Versions

  • List Available Versions: 
  pyenv install --list
Enter fullscreen mode Exit fullscreen mode
  • Install a Version: 
  pyenv install 3.11.4
Enter fullscreen mode Exit fullscreen mode
  • Set Global Version: 
  pyenv global 3.11.4
Enter fullscreen mode Exit fullscreen mode

Java Development Kit (JDK) ☕

Set up a Java development environment.

Installing OpenJDK 

sudo apt install openjdk-17-jdk
Enter fullscreen mode Exit fullscreen mode

Verify Installation 

java -version
Enter fullscreen mode Exit fullscreen mode

Browser Extensions for Developers 🌐

Enhance your web development workflow with these browser extensions.

  • React Developer Tools: Inspect React component hierarchy.
  • Redux DevTools: Debug Redux state changes.
  • Vue.js devtools: Inspect Vue components.
  • Angular DevTools: Debug Angular applications.
  • Postman Interceptor: Capture and send HTTP requests.
  • JSON Viewer: Format JSON data.
  • ColorZilla: Advanced color picker.
  • WhatFont: Identify fonts on web pages.
  • Wappalyzer: Identify technologies used on websites.

Productivity Tools ⚙️

Boost your productivity with these applications.

  • Microsoft PowerToys: Utilities like FancyZones, PowerRename, and more.
  • Windows Terminal: Advanced terminal application.
  • WSLtty: Alternative terminal for WSL.
  • Notion: Note-taking and project management.
  • Figma: Collaborative design tool.
  • Slack: Team communication platform.
  • Microsoft Teams: Collaboration and communication.
  • Todoist: Task management.

Leveraging AI-Powered Tools 🤖

Enhance your coding efficiency with AI assistants.

GitHub Copilot

An AI pair programmer that helps you write code faster.

  • Installation:

Install the GitHub Copilot extension in VS Code.

  • Features:

    • Context-aware code suggestions.
    • Supports multiple programming languages.
    • Can generate code snippets, functions, and even complex algorithms.

Tabnine

AI code completion for all major IDEs.

  • Installation:

Install the Tabnine plugin for your preferred IDE.

  • Features:

    • Whole-line and full-function code completions.
    • Learns from your codebase for personalized suggestions.

Codeium

Free AI-powered code acceleration toolkit.

  • Installation:

Install the Codeium extension in your code editor.

  • Features:

    • Code completion and suggestions.
    • Supports multiple languages and editors.

Conclusion 🎯

Setting up a professional web development environment on Windows 11 is a multi-faceted process, but with the right tools and configurations, you can create a powerful and efficient workspace. This guide has provided a comprehensive walkthrough, from installing WSL and configuring your terminal to leveraging AI-powered coding assistants.

By following these steps, you're well on your way to enhancing your productivity and tackling complex development projects with confidence.

Happy coding! 💻

Additional Resources 📚

Feel free to reach out if you have any questions or need further assistance.

Top comments (0)

Read next

fahimfba profile image

How to Unsave All Saved Posts on Facebook in a Few Simple Steps

Md. Fahim Bin Amin -

pellenilsen profile image

What does CORS really do? 🤔

Pelle Nilsen -

sertxudev profile image

Add a sidebar with options in a Filament resource

Sergio Peris -

pcmagas profile image

How I can run elasticsearch locally for development using docker?

Dimitrios Desyllas -