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

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

Setting up a powerful and efficient web development environment on Windows 11 doesn't have to be overwhelming. This guide will walk you through the process of installing essential tools, configuring your system for optimal performance, and introducing advanced tips and tricks to make your setup the best it can be. We'll cover everything from basic installations to advanced configurations, ensuring you're equipped with the knowledge to create a top-tier development environment.

🚀 Ready to supercharge your Windows 11 development environment? Fork this repository to keep track of your progress and customize your setup!

📝 Track Your Progress: Use the Issues tab to create a checklist of tasks as you work through this guide.

🔧 Customize Your Setup: Share your own tips and tricks by contributing to this guide!

💡 Get Help: Join our Discussions to ask questions and share your experiences with other developers.

Table of Contents 📚

Introduction
Prerequisites
Setting Up Windows Subsystem for Linux (WSL 2)
Configuring Windows Terminal
Setting Up Git and GitHub
Enhancing Your Shell with Zsh and Oh My Zsh
Installing Node.js and pnpm
Visual Studio Code Setup
Exploring Additional Code Editors and IDEs
Using Package Managers: Chocolatey and Scoop
Additional Development Tools
Browser Extensions for Developers
Productivity Tools
Leveraging AI-Powered Tools
Advanced Tips and Tricks
Conclusion
Additional Resources

Introduction 🌐

In today's fast-paced development environment, having a fully optimized setup is crucial for productivity and efficiency. This guide aims to help you configure the best 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 delve into advanced configurations, explore a plethora of tools, and provide tips and tricks to enhance your workflow.

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

Setting Up Windows Subsystem for Linux (WSL 2) 🐧

WSL allows you to run a Linux environment directly on Windows, providing a seamless integration between Windows and Linux development environments.

Installing WSL 2

Enable WSL and Install a Linux Distribution:

Open PowerShell as Administrator and run:
```
wsl --install
```
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.
Restart Your Computer:

Restart to complete the WSL installation.

Initial Configuration of WSL

Launch Ubuntu:

Open Ubuntu from the Start menu. It will take a few moments to set up.
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 and Upgrading Linux

Keep your Linux environment up to date:

sudo apt update && sudo apt upgrade -y

Accessing Linux Files from Windows

Access your Linux files directly from Windows:

Using File Explorer:

Navigate to:
```
\\wsl$
```
This will show all your installed WSL distributions.
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

Then relaunch your Linux distribution.

Windows-Specific 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.

Running GUI Applications with WSLg

With WSLg, you can run Linux GUI applications directly on Windows:

Ensure WSL is Updated:
```
wsl --update
```
Launch GUI Applications:
```
xclock  # Example GUI application
```

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

Customizing Windows Terminal

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.
Set Starting Directory:
- In Profiles, select Ubuntu.
- Under Advanced, set Starting directory to:
```
\\wsl$\Ubuntu\home\your_username
```
Customize Appearance:
- Explore the Appearance tab to change the theme, font, and background.
- Install a Powerline font like MesloLGS NF for better prompt symbols.
Install Themes:
- Visit Windows Terminal Themes to find and install new themes.
- You can import themes by editing the settings.json file.
Configure Keyboard Shortcuts and Actions:
- Customize keybindings to suit your workflow.
- Set up actions like split panes, duplicate tabs, etc.

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

Configuring Git

Set up your global Git configuration:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Set up default branch name to main:

git config --global init.defaultBranch main

Verify your settings:

git config --list

Generating SSH Keys for GitHub

Generate a New SSH Key:
```
ssh-keygen -t ed25519 -C "[email protected]"
```
Press Enter to accept the default file location. Set a passphrase if desired.
Start the SSH Agent:
```
eval "$(ssh-agent -s)"
```
Add Your SSH Key:
```
ssh-add ~/.ssh/id_ed25519
```
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:

Generate a Personal Access Token (PAT):
- On GitHub, go to Settings > Developer settings > Personal access tokens.
- Click Generate new token, select scopes, and generate.
Configure Git Credential Manager:
```
git config --global credential.helper store
```
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

Set Zsh as your default shell:

chsh -s $(which zsh)

Installing Oh My Zsh

Oh My Zsh is a framework for managing Zsh configuration.

Install Curl (if not installed):
```
sudo apt install curl
```

Install Oh My Zsh:

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

Adding Themes and Plugins

Install Powerlevel10k Theme:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git \
  ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Set the theme in ~/.zshrc:

ZSH_THEME="powerlevel10k/powerlevel10k"

Install Recommended Fonts:

Download and install the MesloLGS NF font.
- Windows Terminal: Set the font face to "MesloLGS NF" in settings.

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

zsh-completions:

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

Enable Plugins:

Edit ~/.zshrc:

plugins=(git zsh-autosuggestions zsh-syntax-highlighting zsh-completions)

Apply Changes:
```
source ~/.zshrc
```
Configure Powerlevel10k:

Run the configuration wizard:
```
p10k configure
```
Follow the prompts to customize your prompt.
Advanced Aliases and Functions:

Add custom aliases and functions to your ~/.zshrc for increased productivity.

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

Activate NVM:

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

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

Set the default Node.js version:

nvm alias default node

Installing pnpm

Install pnpm globally:

npm install -g pnpm

Alternatively, use the installation script:

curl -fsSL https://get.pnpm.io/install.sh | sh -

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

export PATH="$HOME/.local/share/pnpm:$PATH"

Reload your shell configuration:

source ~/.zshrc

Using pnpm

Initialize a New Project:
```
pnpm init
```
Install Dependencies:
```
pnpm install package-name
```
Install a Package Globally:
```
pnpm add -g package-name
```
Update Packages:
```
pnpm update
```
Clean Up Dependencies:
```
pnpm prune
```

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

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

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

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.
Thunder Client: Lightweight REST API client.
Settings Sync: Synchronize settings across devices.

Settings Sync

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

Advanced Configuration

Workspace Settings: Customize settings per project.
Snippets: Create code snippets for frequently used code blocks.
Keybindings: Customize shortcuts to enhance productivity.
User Settings: Tailor the editor to your preferences.

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.

Download Cursor IDE:

Visit the Cursor IDE website to download.
Features:
- AI-assisted code completion.
- Intelligent error detection.
- Code refactoring and generation tools.
- Integration with popular version control systems.
- Customizable interface and themes.

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.
Sublime Text: Lightweight and fast text editor.
Atom: Hackable text editor for the 21st century.

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

Open PowerShell as Administrator.

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'))

Using Chocolatey

Install a Package:
```
choco install package-name -y
```
Upgrade All Packages:
```
choco upgrade all -y
```
Search for Packages:
```
choco search package-name
```

Scoop

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

Installing Scoop

Ensure PowerShell Execution Policy:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Install Scoop:
```
iwr -useb get.scoop.sh | iex
```

Using Scoop

Install a Package:
```
scoop install package-name
```
Update Packages:
```
scoop update *
```
Add Buckets for More Packages:
```
scoop bucket add extras
```

Additional Development Tools 🛠️

Docker Desktop 🐳

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

Installing Docker Desktop

Download Docker Desktop from the official website.
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.
Integrate with WSL Distributions:

Under Resources > WSL Integration, enable Docker integration with your WSL distributions.

Database Tools

MySQL Workbench: Visual tool for MySQL databases.
pgAdmin: Feature-rich PostgreSQL administration tool.
MongoDB Compass: GUI for MongoDB.

Virtualization Tools

VirtualBox: Open-source virtualization software.
Vagrant: Manage and configure virtual machine environments.

API Testing Tools

Postman: Powerful API testing tool.
Insomnia: REST API client with GraphQL support.

Version Control Systems

GitKraken: Cross-platform Git client.
SourceTree: Visual Git and Mercurial client.

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.
Svelte DevTools: Debug Svelte 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.
Lighthouse: Audit web apps for performance and accessibility.

Productivity Tools ⚙️

Boost your productivity with these applications.

Microsoft PowerToys: Utilities like FancyZones, PowerRename, and more.
Windows Terminal: Advanced terminal application.
AutoHotkey: Automate repetitive tasks.
WSLtty: Alternative terminal for WSL.
Notion: Note-taking and project management.
Obsidian: Powerful knowledge base on top of a local folder of plain text Markdown files.
Figma: Collaborative design tool.
Slack: Team communication platform.
Microsoft Teams: Collaboration and communication.
Todoist: Task management.
RescueTime: Personal analytics service.

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.

Amazon CodeWhisperer

An AI coding companion that generates code suggestions.

Installation:

Install the AWS Toolkit extension in VS Code.
Features:
- Code recommendations based on your comments and existing code.
- Supports multiple programming languages.
- Integration with AWS services.

Advanced Tips and Tricks 🧙‍♂️

Elevate your development environment with these advanced configurations.

Terminal Multiplexers

Tmux: Terminal multiplexer to manage multiple terminal sessions.
```
sudo apt install tmux
```
Byobu: Enhanced profile and configuration utilities for Tmux.
```
sudo apt install byobu
```

Dotfiles Management

Use a Git repository to manage your dotfiles (.bashrc, .zshrc, etc.).
Automate environment setup across multiple machines.

SSH Configurations

SSH Config File: Simplify SSH connections by editing ~/.ssh/config.

Host myserver
    HostName example.com
    User username
    IdentityFile ~/.ssh/id_rsa

Firewall and Security

UFW (Uncomplicated Firewall):
```
sudo apt install ufw
sudo ufw enable
```

Performance Monitoring Tools

htop: Interactive process viewer.
```
sudo apt install htop
```
glances: System monitoring tool.
```
sudo apt install glances
```

Network Tools

net-tools: Networking utilities.
```
sudo apt install net-tools
```
nmap: Network exploration tool.
```
sudo apt install nmap
```

Alias and Functions

Create custom aliases in ~/.zshrc or ~/.bashrc:

alias gs='git status'
alias gp='git pull'
alias gc='git commit -m'

Custom Scripts

Automate repetitive tasks with shell scripts.
Add your scripts to a ~/bin directory and include it in your PATH.

Virtual Environments

Python:

python -m venv venv
source venv/bin/activate

Node.js:

Use nvm to manage versions and isolate environments.

Managing Background Services

Use pm2 for Node.js applications:
```
npm install -g pm2
pm2 start app.js
```

Configuring Environment Variables

Store environment variables in .env files.
Use packages like dotenv to manage them in your applications.

Conclusion 🎯

By incorporating these tools and configurations, you're setting up a professional-grade web development environment on Windows 11. This guide has provided a comprehensive walkthrough, from installing WSL and configuring your terminal to leveraging AI-powered coding assistants and advanced tips.

Embrace these tools to enhance your productivity, streamline your workflow, and tackle complex development projects with confidence.

Happy coding! 💻

Additional Resources 📚

Windows Subsystem for Linux Documentation: WSL Docs
Windows Terminal Documentation: Terminal Docs
Git Documentation: Git Docs
GitHub Documentation: GitHub Docs
Zsh Documentation: Zsh Docs
Oh My Zsh Documentation: Oh My Zsh Docs
Node.js Documentation: Node.js Docs
NVM Documentation: NVM Docs
pnpm Documentation: pnpm Docs
Visual Studio Code Documentation: VS Code Docs
Chocolatey Documentation: Chocolatey Docs
Scoop Documentation: Scoop Docs
Docker Documentation: Docker Docs
Python Documentation: Python Docs
Pyenv Documentation: Pyenv Docs
Java Documentation: Java Docs
PowerToys Documentation: PowerToys Docs
Notion Documentation: Notion Help
Figma Documentation: Figma Help
Slack Documentation: Slack Help
Microsoft Teams Documentation: Teams Docs
GitHub Copilot Documentation: Copilot Docs
Tabnine Documentation: Tabnine Docs
Codeium Documentation: Codeium Docs
Amazon CodeWhisperer Documentation: CodeWhisperer Docs

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

Happy coding! 😊

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
assets		assets
README.md		README.md

leoaerisz/ultimate-windows-web-dev-setup

Folders and files

Latest commit

History

Repository files navigation