Module 0.2: Setting Up Your Development Environment

🎯 Learning Objectives

Upon completing this module, you’ll be able to:

• Set up and configure Node.js using nvm for managing multiple versions.
• Install Git and configure SSH connectivity with GitHub.
• Customize Visual Studio Code with essential extensions for React development.
• Master basic Terminal/Command Line operations.
• Install and utilize React Developer Tools within your browser.

1. Node.js & npm

1.1. Check Your Current Environment

Before diving into installation, let’s see if Node.js is already on your machine.

For all platforms:

node -v
npm -v

What to expect:

• If installed: You’ll see the version numbers (e.g., v20.10.0, 10.2.3).
• If not installed: You’ll get an error like command not found or 'node' is not recognized.

1.2. Direct Installation (Beginner)

Windows

1. Head over to https://nodejs.org .
2. Download the LTS (Long Term Support) version – this is the recommended choice for production.
3. Run the installer (.msi file) and stick with the default options.
4. Restart your terminal after the installation is complete.

[Screenshot]

Description: A screenshot of the nodejs.org homepage, highlighting the green “LTS” download button. The text “Recommended For Most Users” is emphasized.

macOS

Option 1: Download the Installer

1. Visit https://nodejs.org .
2. Download the LTS version for macOS (.pkg file).
3. Run the installer and follow the on-screen prompts.

Option 2: Homebrew (Recommended)

# Install Homebrew if you don't have it yet
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 
# Install Node.js
brew install node

Linux (Ubuntu/Debian)

# Update your package list
sudo apt update
 
# Install Node.js using the NodeSource repository for the latest versions
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
 
# Verify the installation
node -v
npm -v

1.3. Node Version Manager - nvm (Recommended)

Why You Need nvm

In the real world, different projects often require specific Node.js versions. Imagine this scenario:

nvm (Node Version Manager) is your key to managing this complexity. It allows you to:

• Install multiple Node.js versions on a single machine.
• Seamlessly switch between versions with a single command.
• Automatically switch versions when you enter a project directory using an .nvmrc file.

Installing nvm

macOS / Linux:

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
 
# Reload your shell configuration
source ~/.bashrc    # If you use bash
source ~/.zshrc     # If you use zsh
 
# Verify installation
nvm --version

Windows (nvm-windows):

1. Go to: https://github.com/coreybutler/nvm-windows/releases 
2. Download the nvm-setup.exe file from the Assets section.
3. Run the installer with Administrator privileges.
4. Restart your terminal.

# Verify installation
nvm version

Essential nvm Commands

# List available Node.js versions to install
nvm list-remote           # macOS/Linux
nvm list available        # Windows
 
# Install the latest LTS Node.js version
nvm install --lts
 
# Install a specific Node.js version
nvm install 20
nvm install 18.19.0
 
# See which Node.js versions you have installed
nvm list                  # or: nvm ls
 
# Switch to a different Node.js version
nvm use 20
nvm use 18
 
# Set a default Node.js version
nvm alias default 20      # macOS/Linux
nvm alias default 20      # Windows: this is set during installation
 
# Check your current active Node.js version
nvm current

The .nvmrc File - Automatic Version Switching

Create an .nvmrc file in your project’s root directory to automatically switch Node versions:

# Create .nvmrc with a Node version
echo "20" > .nvmrc
 
# Or with a specific version
echo "20.10.0" > .nvmrc

When you cd into your project directory, simply run:

nvm use
# Output: Found '.nvmrc' with version <20>
# Now using node v20.x.x

Automation (Optional): Add this to your ~/.zshrc or ~/.bashrc file for automatic loading:

# Auto-load .nvmrc
autoload -U add-zsh-hook
load-nvmrc() {
  local nvmrc_path="$(nvm_find_nvmrc)"
  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")
    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

1.4. Validate Your Installation

Let’s make sure all your tools are up and running:

node -v
# Expected: v20.x.x (or the version you installed)
 
npm -v
# Expected: 10.x.x
 
npx -v
# Expected: 10.x.x (usually matches your npm version)

1.5. Troubleshooting

2. Git & GitHub

2.1. Installing Git

Windows

1. Visit https://git-scm.com/download/win .
2. Download and run the installer.
3. Pay attention to these crucial installation options:
   • Default editor: Select VS Code (if you’ve installed it).
   • PATH environment: Choose “Git from the command line and also from 3rd-party software.”
   • Line ending: Select “Checkout Windows-style, commit Unix-style line endings.”

macOS

# Option 1: Xcode Command Line Tools (automatically installs Git)
xcode-select --install
 
# Option 2: Homebrew
brew install git

Linux (Ubuntu/Debian)

sudo apt update
sudo apt install git

Verify:

git --version
# Expected: git version 2.x.x

2.2. Configuring Git

Set up your user information (this is mandatory before you can commit):

# Configure your name
git config --global user.name "Your Name"
 
# Configure your email (must match your GitHub email)
git config --global user.email "you@example.com"

2.3. Creating a GitHub Account

1. Go to https://github.com .
2. Click “Sign up” and fill in your details:
   • Email (use the same one you configured in Git).
   • Password (make it strong: mix of uppercase, lowercase, numbers, and symbols).
   • Username (this will be part of your profile URL).
3. Verify your email address.

2.4. Setting Up Your SSH Key

An SSH key allows you to connect to GitHub securely without typing your password every time you push or pull.

Step 1: Check for Existing SSH Keys

ls -la ~/.ssh
# Look for files named id_ed25519.pub or id_rsa.pub

Step 2: Generate a New SSH Key (if you don’t have one)

# Generate an SSH key using the Ed25519 algorithm (recommended)
ssh-keygen -t ed25519 -C "you@example.com"
 
# Press Enter to accept the default file path
# Enter a passphrase (optional but highly recommended for security)

Step 3: Add Your SSH Key to the ssh-agent

macOS/Linux:

# Start the ssh-agent
eval "$(ssh-agent -s)"
 
# Add your SSH key
ssh-add ~/.ssh/id_ed25519

Windows (Git Bash):

# Start the ssh-agent
eval $(ssh-agent -s)
 
# Add your SSH key
ssh-add ~/.ssh/id_ed25519

Step 4: Add Your SSH Key to GitHub

1. Copy your public key:

   # macOS
   pbcopy < ~/.ssh/id_ed25519.pub
    
   # Linux
   cat ~/.ssh/id_ed25519.pub
   # Manually copy the output
    
   # Windows (Git Bash)
   clip < ~/.ssh/id_ed25519.pub

2. On GitHub:

   • Go to Settings → SSH and GPG keys → New SSH key.
   • Title: Give it a descriptive name (e.g., “MacBook Pro Work”).
   • Key type: Authentication Key.
   • Key: Paste the public key you copied.
   • Click Add SSH key.

Step 5: Test Your Connection

ssh -T git@github.com

Successful Output:

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

2.5. Troubleshooting Git/SSH Issues

3. Visual Studio Code

3.1. Installing VS Code

1. Visit https://code.visualstudio.com .
2. Download the version for your operating system.
3. Follow the installation instructions.

macOS (Homebrew):

brew install --cask visual-studio-code

Linux (Ubuntu/Debian):

# Download and install from the .deb package
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

3.2. Essential Extensions

Open VS Code and install these extensions via the Command Palette (Ctrl+Shift+X / Cmd+Shift+X):

Quick Installation via CLI:

code --install-extension xabikos.reactsnippets
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension formulahendry.auto-rename-tag
code --install-extension formulahendry.auto-close-tag
code --install-extension steoates.autoimport
code --install-extension eamodio.gitlens
code --install-extension streetsidesoftware.code-spell-checker

3.3. Recommended Extensions

3.4. Configuring settings.json

Open your Settings JSON file (Ctrl+Shift+P → “Preferences: Open User Settings (JSON)”):

{
  // Editor settings
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.linkedEditing": true,
  // Formatting settings
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  // File settings
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  // Prettier specific settings
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 100,
  // ESLint specific settings
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  // TypeScript specific settings
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  // Terminal settings
  "terminal.integrated.fontSize": 13,
  // Theme and Icon settings
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  // Emmet specific settings
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

4. Terminal & Command Line

4.1. Choosing Your Terminal

Windows

Recommendation: Install Windows Terminal and use PowerShell or Git Bash within it.

macOS

Recommendation: Consider installing Oh My Zsh for an enhanced terminal experience:

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

Linux

Most Linux distributions come with a default Terminal. If you use Zsh, you can install Oh My Zsh:

# Install Zsh if you don't have it
sudo apt install zsh
 
# Install Oh My Zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4.2. Basic Commands

Useful Shortcuts:

5. Browser & DevTools

5.1. Installing a Browser

Recommendation: Use Google Chrome or Microsoft Edge (both Chromium-based) for the most powerful DevTools experience.

• Google Chrome: https://www.google.com/chrome 
• Microsoft Edge: https://www.microsoft.com/edge 

5.2. Installing React Developer Tools

1. Open Chrome/Edge.
2. Go to the Chrome Web Store:
   • React Developer Tools 
3. Click “Add to Chrome”.
4. Confirm by clicking “Add extension”.

After installation:

• You’ll see a React icon on your browser’s toolbar.
• When you open Developer Tools (F12), you’ll find two new tabs: Components and Profiler.

5.3. Installing Ddict (Vietnamese Dictionary)

Ddict is a handy extension for looking up English-Vietnamese translations when reading documentation:

1. Visit: Ddict - Chrome Web Store 
2. Click “Add to Chrome”.
3. How to use: Double-click a word or select it to see its meaning.

5.4. Basic Chrome DevTools

Open DevTools by pressing F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (macOS).