Day 1: Environment Setup

Abstract

Setting up a robust development environment is the first step towards mastering modern web development. In this article, we will guide you through the essential tools and configurations needed to create an efficient and productive workspace. From installing code editors and version control systems to configuring package managers and build tools, you’ll learn how to prepare your environment for building cutting-edge web applications.

Prerequisites

Before diving into the environment setup, ensure you have the following prerequisites in place:

• A computer with internet access
• Basic knowledge of operating systems (Windows, macOS, or Linux)
• Familiarity with command-line interfaces (CLI)

Setting Up Your Development Environment

Choose the instructions matching your primary OS; each workflow follows the same steps so teams stay in sync. Check below for Windows, macOS, and Linux workflows (choose one).

---

Windows Workflow

1. Install VS Code

1. Open: https://code.visualstudio.com/
2. Click Download for Windows and save the .exe.
3. Run the installer:
   • Check Add to PATH and Register Code as an editor.
   • Optionally enable Add “Open with Code” action in context menus.
4. Launch VS Code from Start menu or by running code in a new terminal (you may need to restart the terminal).

Docs: https://code.visualstudio.com/docs/setup/windows

2. Configure VS Code Extensions

In VS Code:

1. Open Extensions panel (Ctrl+Shift+X).
2. Install:
   • ESLint: dbaeumer.vscode-eslint
   • Prettier - Code formatter: esbenp.prettier-vscode
   • tailwindcss-intellisense: bradlc.vscode-tailwindcss
   • Any framework-specific extensions (React) as needed.
3. Set default formatter:
   • Ctrl+, → search default formatter → choose esbenp.prettier-vscode.
   • Enable: Format on Save.

Docs:

• ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Tailwind CSS IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

3. Install Terminal & Shell

1. Install Windows Terminal:
   • From Microsoft Store or: https://aka.ms/terminal
2. Recommended shells:
   • PowerShell (built-in) or Git Bash (installed with Git).
3. Set default profile in Windows Terminal settings to your preferred shell.
4. (Optional) Customize prompt with Oh My Posh: https://ohmyposh.dev/docs/windows
   • Checkout this Youtube tutorial: https://youtu.be/-G6GbXGo4wo?si=wnyjc0MjwW_bdtT8

4. Install Git & Connect to GitHub

1. Download Git for Windows: https://git-scm.com/download/win

2. Run installer with defaults (includes Git Bash).

3. Configure identity in a terminal:

   git config --global user.name "Your Name"
   git config --global user.email "you@example.com"

4. Generate SSH key:

   ssh-keygen -t ed25519 -C "you@example.com"

   Press Enter to accept defaults, then add the key to GitHub: https://docs.github.com/en/authentication/connecting-to-github-with-ssh

5. Optional: install GitHub CLI: https://cli.github.com/ Then run:

   gh auth login

5. Install Node.js & Package Managers

1. Install nvm for Windows: https://github.com/coreybutler/nvm-windows

2. In a new terminal:

   nvm install --lts
   nvm use --lts
   node -v
   npm -v

3. Install pnpm or yarn (optional):

   npm install -g pnpm
   pnpm -v
   # or
   npm install -g yarn
   yarn -v

Node docs: https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

6. Install Browsers & DevTools

1. Install:
   • Chrome: https://www.google.com/chrome/
   • Edge (usually preinstalled): https://www.microsoft.com/edge
   • Firefox: https://www.mozilla.org/firefox/
2. Add framework devtools from Chrome Web Store:
   • React: https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi
   • Vue: https://chromewebstore.google.com/detail/nhdogjmejiglipccpnnnanhbledajbpd
   • Svelte: https://chromewebstore.google.com/detail/ckolcbmkjpjmangdbmnkpjigpkddpogn

7. Project Scaffolding Checklist

1. In a terminal:

   mkdir modern-web-playground
   cd modern-web-playground

2. Initialize Git & npm:

   git init
   npm init -y
   npm install -D typescript eslint prettier

3. Create config files:

   • .editorconfig: https://editorconfig.org/#example-file

   • .nvmrc (optional, store Node version):

     node -v > .nvmrc

   • README.md describing tools and versions.

8. Validate the Setup

1. Initialize TypeScript:

   npx tsc --init

2. Create index.js:

   echo "console.log('Hello from Windows');" > index.js
   node index.js

3. Add basic ESLint config (.eslintrc.json) or use npx eslint --init (see: https://eslint.org/docs/latest/use/getting-started).

4. Run:

   npx eslint .

5. Create a GitHub repo and push: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository

---

macOS Workflow

1. Install VS Code

1. Go to: https://code.visualstudio.com/
2. Click Download for macOS.
3. Open the downloaded .zip and drag Visual Studio Code.app to Applications.
4. Add code to PATH:
   • Open VS Code → Cmd+Shift+P → type Shell Command: Install 'code' command in PATH → press Enter.

Docs: https://code.visualstudio.com/docs/setup/mac

2. Configure VS Code Extensions

1. Open VS Code → Extensions (Cmd+Shift+X).
2. Install:
   • ESLint: dbaeumer.vscode-eslint
   • Prettier - Code formatter: esbenp.prettier-vscode
   • tailwindcss-intellisense: bradlc.vscode-tailwindcss
   • Any framework-specific extensions (React) as needed.
3. Set default formatter:
   • Cmd+, → search default formatter → choose esbenp.prettier-vscode.
   • Enable: Format on Save.

Docs:

• ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Tailwind CSS IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

3. Install Terminal & Shell

1. Use built-in Terminal.app or install iTerm2: https://iterm2.com/
2. Default shell is zsh.
3. Optional prompt & plugins:
   • Oh My Zsh: https://ohmyz.sh/
   • Starship: https://starship.rs/guide/

4. Install Git & Connect to GitHub

1. Install Xcode Command Line Tools:

   xcode-select --install

   or install Git via Homebrew: https://brew.sh/ → brew install git.

2. Configure Git:

   git config --global user.name "Your Name"
   git config --global user.email "you@example.com"

3. Generate SSH key:

   ssh-keygen -t ed25519 -C "you@example.com"

   Add the public key to GitHub: https://docs.github.com/en/authentication/connecting-to-github-with-ssh

4. Optional GitHub CLI:

   brew install gh
   gh auth login

5. Install Node.js & Package Managers

1. Install Homebrew (if not installed): https://brew.sh/

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Install nvm:

   brew install nvm
   mkdir -p ~/.nvm

   Follow the on-screen instructions to add nvm init lines to your shell profile.

3. Install Node LTS:

   nvm install --lts
   nvm use --lts
   node -v
   npm -v

4. Optional package managers:

   npm install -g pnpm
   pnpm -v
   # or
   npm install -g yarn
   yarn -v

Node docs: https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

6. Install Browsers & DevTools

1. Install browsers:
   • Chrome: https://www.google.com/chrome/
   • Firefox: https://www.mozilla.org/firefox/
2. Add framework devtools from Chrome Web Store:
   • React: https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi
   • Vue: https://chromewebstore.google.com/detail/nhdogjmejiglipccpnnnanhbledajbpd
   • Svelte: https://chromewebstore.google.com/detail/ckolcbmkjpjmangdbmnkpjigpkddpogn

7. Project Scaffolding Checklist

1. In Terminal/iTerm2:

   mkdir modern-web-playground
   cd modern-web-playground

2. Initialize Git & npm:

   git init
   npm init -y
   npm install -D typescript eslint prettier

3. Add .editorconfig, .nvmrc, and README.md as described in the Windows workflow.

8. Validate the Setup

1. Initialize TypeScript:

   npx tsc --init

2. Create index.js:

   echo "console.log('Hello from macOS');" > index.js
   node index.js

3. Add basic ESLint config (.eslintrc.json) or use npx eslint --init (see: https://eslint.org/docs/latest/use/getting-started).

4. Run:

   npx eslint .

5. Create a GitHub repo and push: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository

---

Linux Workflow

1. Install VS Code

1. Open: https://code.visualstudio.com/

2. Choose your distro package:

   • .deb for Debian/Ubuntu
   • .rpm for Fedora/RHEL
   • Or use Snap/Flatpak

3. Install (Ubuntu example):

   sudo apt install ./code_<version>.deb
   # or
   sudo snap install code --classic

Docs: https://code.visualstudio.com/docs/setup/linux

2. Configure VS Code Extensions

1. Open VS Code → Extensions (Ctrl+Shift+X).
2. Install:
   • ESLint: dbaeumer.vscode-eslint
   • Prettier - Code formatter: esbenp.prettier-vscode
   • tailwindcss-intellisense: bradlc.vscode-tailwindcss
   • Any framework-specific extensions (React) as needed.
3. Set default formatter:
   • Ctrl+, → search default formatter → choose esbenp.prettier-vscode.
   • Enable: Format on Save.

Docs:

• ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Tailwind CSS IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

3. Install Terminal & Shell

1. Use your default terminal (GNOME Terminal, KDE Konsole, kitty, etc.).
2. Shell: bash or zsh.
3. Optional prompt:
   • Starship: https://starship.rs/guide/

4. Install Git & Connect to GitHub

1. Install Git via your package manager, e.g.:

   sudo apt update && sudo apt install git
   # or
   sudo dnf install git

2. Configure identity:

   git config --global user.name "Your Name"
   git config --global user.email "you@example.com"

3. Generate SSH key:

   ssh-keygen -t ed25519 -C "you@example.com"

   Add it to GitHub: https://docs.github.com/en/authentication/connecting-to-github-with-ssh

4. Optional GitHub CLI:

   # Ubuntu
   type -p curl >/dev/null || sudo apt install curl -y
   curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
   sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
   echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
   sudo apt update
   sudo apt install gh
   gh auth login

(Adjust per distro: https://github.com/cli/cli#linux)

5. Install Node.js & Package Managers

1. Install nvm:

   curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
   # restart shell or:
   source ~/.nvm/nvm.sh

2. Node LTS:

   nvm install --lts
   nvm use --lts
   node -v
   npm -v

3. Optional package managers:

   npm install -g pnpm
   pnpm -v
   # or
   npm install -g yarn
   yarn -v

Node docs: https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

6. Install Browsers & DevTools

1. Install:
   • Chrome: https://www.google.com/chrome/
   • Chromium/Firefox via package manager.
2. Add framework devtools from Chrome Web Store:
   • React: https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi
   • Vue: https://chromewebstore.google.com/detail/nhdogjmejiglipccpnnnanhbledajbpd
   • Svelte: https://chromewebstore.google.com/detail/ckolcbmkjpjmangdbmnkpjigpkddpogn

7. Project Scaffolding Checklist

1. In your terminal:

   mkdir modern-web-playground
   cd modern-web-playground

2. Initialize project:

   git init
   npm init -y
   npm install -D typescript eslint prettier

3. Add .editorconfig, .nvmrc, and README.md as in Windows/macOS.

8. Validate the Setup

1. Initialize TypeScript:

   npx tsc --init

2. Create index.js:

   echo "console.log('Hello from Linux');" > index.js
   node index.js

3. Add basic ESLint config (.eslintrc.json) or use npx eslint --init (see: https://eslint.org/docs/latest/use/getting-started).

4. Run:

   npx eslint .

5. Create a GitHub repo and push: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository

Next Steps

With your environment ready, proceed to Day 2 to explore modern frontend tooling, module bundlers, and framework bootstrapping.