The Ultimate Guide to Setting Up a Windows 11 Web Development Environment

a99divx - Sep 20 - - Dev Community

The Ultimate Guide to Setting Up a Windows 11 Web Development Environment

Setting up a streamlined and efficient web development environment on Windows 11 doesn’t need to be overwhelming. This enhanced guide will walk you through setting up essential tools, plugins, and optimizations tailored for modern web development. We'll also introduce a more hands-on learning approach by guiding you through projects, with recommended tools for improved productivity.

Table of Contents

  1. Introduction
  2. Prerequisites
  3. Windows Subsystem for Linux (WSL)
  4. Windows Terminal
  5. Git Configuration
  6. GitHub Credentials
  7. Enhancing Your Shell with Zsh and Oh My Zsh
  8. Node.js and NVM
  9. Visual Studio Code
  10. Additional Code Editors and IDEs
  11. Package Managers
  12. Additional Development Tools
  13. Browser Extensions
  14. Productivity Tools
  15. AI-Powered Tools
  16. Conclusion
  17. Additional Resources

Introduction

In today’s fast-paced development environment, having a fully optimized setup is crucial. This comprehensive guide will help you configure an efficient workspace with essential tools like Windows Subsystem for Linux (WSL 2), modern terminal plugins, and AI-driven coding tools. You’ll also gain hands-on experience through interactive project building, which enhances retention and practical skills.

Prerequisites

  • 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 an even more comprehensive and streamlined setup experience, consider forking the repository here on GitHub. This repository provides additional scripts and configurations to further enhance your development environment.

Windows Subsystem for Linux (WSL)

WSL allows you to run a Linux environment directly on Windows without the overhead of a virtual machine.

Installing WSL 2

  1. Open PowerShell as Administrator and run the following command: 

 wsl --install
Enter fullscreen mode Exit fullscreen mode
  1. Restart your computer

Configuring WSL

  1. Launch Ubuntu from the Start menu and wait for it to finish installing
  2. Create a UNIX username and password

Updating Linux 


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

Accessing Linux Files from Windows

You can access your Linux files directly from Windows:

  1. Open File Explorer and navigate to: 

\\wsl$
Enter fullscreen mode Exit fullscreen mode
  1. Map 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.

This will make your Linux home directory accessible from Windows as a network drive.

Restarting WSL

If you encounter issues with WSL, you can restart it:


wsl --shutdown
Enter fullscreen mode Exit fullscreen mode

Then relaunch your Linux distribution.

Windows-Specific Considerations

When using WSL, keep in mind:

  1. File system performance: Accessing Windows files from WSL or vice versa can be slower than native file access. For best performance, keep your project files within the WSL file system.

  2. Line endings: Windows and Linux use different line ending characters. Use a .gitattributes file to ensure consistent line endings across operating systems.

  3. Path differences: Windows paths use backslashes (\) while Linux uses forward slashes (/). Be mindful of this when working with paths in your code or scripts.

  4. Permissions: Windows and Linux have different permission models. Some operations may require elevated privileges in WSL.

Windows Terminal

Windows Terminal provides a modern interface for command-line tools, including support for tabs, themes, and customization.

Installing Windows Terminal

Download and install Windows Terminal from the Microsoft Store, if not already installed.

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 General, set Starting directory to:


\\wsl$\Ubuntu\home\your_username
Enter fullscreen mode Exit fullscreen mode
  1. Customize Appearance:
  • Explore the Appearance tab to change the theme, font, and background.
  1. Install Themes:

Git Configuration

Git is an essential tool for version control in software development.

Installing Git

Git should already be installed in your WSL distribution. If not, install it:


sudo  apt  install  git
Enter fullscreen mode Exit fullscreen mode

Configuring Git User Information

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 configuration:


git  config  --list
Enter fullscreen mode Exit fullscreen mode

GitHub Credentials

Authenticate with GitHub securely to manage your repositories.

Generating SSH Keys

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

Configuring GitHub with SSH

  1. Copy Your SSH Public Key: 

cat ~/.ssh/id_ed25519.pub
Enter fullscreen mode Exit fullscreen mode

Copy the output.

  1. Add the Key to GitHub:

  • Log in to your GitHub account.

  • Navigate to Settings > SSH and GPG keys.

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

Using Personal Access Tokens

Alternatively, use a Personal Access Token (PAT) for HTTPS authentication:

  1. Generate a PAT:

  • Go to Settings > Developer settings > Personal access tokens on GitHub.

  • Click Generate new token, set scopes, and generate.

  1. Store the PAT Using Git Credential Manager:

Install Git Credential Manager:


sudo apt install git-credential-manager-core
Enter fullscreen mode Exit fullscreen mode

Configure Git to use it:


git config --global credential.helper manager-core
Enter fullscreen mode Exit fullscreen mode

Enhancing Your Shell with Zsh and Oh My Zsh

Zsh offers advanced features and customization options over the default Bash shell.

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 already 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. Select a Theme:
  • Edit ~/.zshrc and set the ZSH_THEME variable. For example: 

ZSH_THEME="agnoster"
Enter fullscreen mode Exit fullscreen mode
  1. Install Powerlevel10k Theme (for an enhanced prompt): 

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 Font:

Powerlevel10k recommends using a Nerd Font for the best experience. Here's how to install it:

a. Download a Nerd Font (e.g., MesloLGS NF):

Visit Nerd Fonts and download MesloLGS NF.

b. Install the font:

  • Unzip the downloaded file

  • Right-click on each .ttf file and select "Install"

c. Configure your terminal to use the new font:

  • Open Windows Terminal settings

  • Go to your Ubuntu profile

  • Under "Appearance", change the "Font face" to "MesloLGS NF"

  1. Install Plugins:
  • zsh-autosuggestions: 

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Enter fullscreen mode Exit fullscreen mode
  • zsh-syntax-highlighting: 

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Enter fullscreen mode Exit fullscreen mode
  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:

The first time you start a new terminal after installing Powerlevel10k, it will start a configuration wizard. If it doesn't, run:


p10k configure
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to customize your prompt appearance.

Node.js and NVM

Node.js is essential for JavaScript development, and NVM allows you to manage multiple Node.js versions.

Installing NVM

Install NVM (Node Version Manager):


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

Activate NVM:


export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" ||  printf %s "${XDG_CONFIG_HOME}/nvm")"

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

Installing Node.js

Install the latest LTS (Long-Term Support) version:


nvm  install  --lts
Enter fullscreen mode Exit fullscreen mode

Managing Node Versions

List installed Node.js versions:


nvm  ls
Enter fullscreen mode Exit fullscreen mode

Switch between versions:


nvm  use <version>
Enter fullscreen mode Exit fullscreen mode

For example:


nvm  use  14
Enter fullscreen mode Exit fullscreen mode

Setting up pnpm

pnpm is a fast, disk space efficient package manager that can be a great alternative to npm. It offers faster installation times and uses less disk space by utilizing a content-addressable filesystem to store all files.

  1. Install pnpm: 

curl -fsSL https://get.pnpm.io/install.sh | sh  -
Enter fullscreen mode Exit fullscreen mode
  1. Add pnpm to your path:

Add the following line to your ~/.zshrc or ~/.bashrc:


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

Then, reload your shell configuration:


source ~/.zshrc # or source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode
  1. Verify installation: 

pnpm --version
Enter fullscreen mode Exit fullscreen mode

Using pnpm

Initialize a new project:


pnpm  init  -y
Enter fullscreen mode Exit fullscreen mode

Install dependencies:


pnpm  install  package-name
Enter fullscreen mode Exit fullscreen mode

Install a package globally:


pnpm  install  -g  package-name
Enter fullscreen mode Exit fullscreen mode

Visual Studio Code

Visual Studio Code (VS Code) is a powerful, extensible code editor.

Installing VS Code

Download and install VS Code 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: Enforce a consistent style.

  • ESLint: Integrate ESLint for JavaScript linting.

  • GitLens: Enhance Git capabilities within VS Code.

  • Docker: Add 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.

Additional Code Editors and IDEs

While VS Code is popular, other editors and Integrated Development Environments (IDEs) may better suit your needs.

Cursor IDE

Cursor IDE is an AI-powered code editor that enhances productivity, Cursor is powered by Stripe, GitHub, Ramp, Perplexity, and OpenAI, along with many wonderful others.

  1. Download Cursor IDE:

Visit the Cursor IDE website to download the installer.

  1. Install Cursor IDE:

Run the installer and follow the on-screen instructions.

  1. Features:

  • AI-assisted code completion.

  • Intelligent error detection.

  • Code refactoring tools.

  • Code generation tools.

  • And much more.

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.

Package Managers

Package managers simplify the installation and management of software.

Chocolatey

Chocolatey is a Windows package manager.

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 is another Windows package manager focused on simplicity.

Installing Scoop

  1. Ensure PowerShell Execution Policy is Unrestricted: 

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

Enhance your development environment with these tools.

Docker Desktop

Docker allows you to containerize applications.

Installing Docker Desktop

  1. Download Docker Desktop from the official website.

  2. Install and restart your computer if prompted.

Using Docker with WSL 2

Docker Desktop integrates with WSL 2 for improved performance.

  • Enable WSL 2 Backend:

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

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. Update Environment Variables:

Add the following to ~/.bashrc or ~/.zshrc:


export PATH="$HOME/.pyenv/bin:$PATH"

eval "$(pyenv init -)"

eval "$(pyenv virtualenv-init -)"
Enter fullscreen mode Exit fullscreen mode
  1. Restart Your Terminal.

Managing Python Versions

  • List Available Versions: 

pyenv install --list
Enter fullscreen mode Exit fullscreen mode
  • Install a Version: 

pyenv install 3.9.7
Enter fullscreen mode Exit fullscreen mode
  • Set Global Version: 

pyenv global 3.9.7
Enter fullscreen mode Exit fullscreen mode

Java Development Kit (JDK)

Set up Java development environment.

Installing JDK

Install 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

Enhance your web development workflow with these extensions.

  • React Developer Tools: Inspect React component hierarchy.

  • Redux DevTools: Debug Redux state changes.

  • Vue.js devtools: Inspect Vue components.

  • Postman Interceptor: Capture and send HTTP requests.

  • ColorZilla: Advanced color picker.

  • WhatFont: Identify fonts on web pages.

  • JSON Viewer: Format JSON data.

Productivity Tools

Boost your productivity with these applications.

  • PowerToys: A set of utilities for power users.

  • Wox Launcher: An efficient app launcher.

  • Notion: Note-taking and project management.

  • Figma: Collaborative design tool.

  • Slack: Team communication platform.

  • Microsoft Teams: Collaboration and communication.

AI-Powered Tools

Leverage AI to enhance your development workflow.

GitHub Copilot

GitHub Copilot is an AI pair programmer that helps you write code faster.

  • Installation:

Install the GitHub Copilot extension in VS Code.

  • Features:

  • Code suggestions and completions.

  • Supports multiple programming languages.

Tabnine

Tabnine is an 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.

Conclusion

Setting up a Windows web development environment can be a complex process, but with the right tools and configurations, it becomes a powerful and efficient workspace. This guide has provided a comprehensive walkthrough to help you set up your system tailored for web development, leveraging tools like WSL, modern terminals, package managers, code editors, and AI-powered utilities.

I hope you found this guide helpful and that it will help you get started with your web development journey. If you have any questions or feedback, please feel free to reach out.

Additional Resources

Image
How to Handle v-Based Oracle Updates

v, based, oracle, updates
Image
How to Hire Laravel Developers for Application Modernization and Migration: A Step-by-Step Guide
Image
Using .NET for ERP and CRM Systems
Image
Welcome Post - Feedback on My Platform

webdev, react, firebase, javascript
Image
Face image dataset

face, image, dataset
Image
Discover Yooooapp's Luxury Callboy & Playboy Services

webdev, beginners
Image
“O Olmazcı” Yazılımcılar: Ürün Ekiplerinin Korkulu Rüyası
Image
Why Text Humanizer is Essential for Modern Content Creators

ai, aihumanizer, texthumanizer, freeaihumanizer
Image
Unlocking the Full Potential of React Native's Image Component
Image
Resolving Circular Dependency Issues in ES5 Projects

javascript, webpack, learning
Image
Etherspot Empowers dApps on XDC Network with Account Abstraction

web3, blockchain, development, smartcontract
Image
Secure Coding - Prevention Over Correction.

webdev, security, cybersecurity, secdevops
Image
Using ComfyUI, ComfyUI Manager, and Flux to Generate High-Quality Images
Image
Multimedia based E-Learning Code and Pixels

ietmlevel4, ietmdesign, whatisietm, codeandpixels
Image
The Simplest Way to Extract Your Requirements.txt in Python

python, devops, pip, dependencies
Image
Limousine Service in New York - The Luxury Cab
Image
How to build a Hybrid Search System for RAG?

ai, programming, python, rag
Image
5 Steps to find the perfect HR Software
Image
How to Build a Basic Chatbot Using TensorFlow and JavaScript

tensorflow, javascript, chatgpt, ai
.
Terabox Video Player