Setting Up a Frontend Dev Environment

Frontend Development Environment — Photo by Ilya Pavlov on Unsplash

Frontend development requires three tools: an editor, a runtime, and version control.

Install VSCode

Download from code.visualstudio.com.

After installation, add useful extensions:

Prettier - Code formatting
ESLint - Code quality
Live Server - Local dev server

Open the extensions tab with Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows) and search to install.

Install Node.js

Download the LTS version from nodejs.org.

Verify installation:

node --version
npm --version

Version numbers mean success.

Install Git

Download from git-scm.com.

After installation, set your user info:

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

Verify settings:

git config --list

Create Your First Project

Create a project in the terminal:

mkdir my-project
cd my-project
npm init -y
git init

Open the folder in VSCode:

code .

Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Right-click and select “Open with Live Server” to view in browser.

Set Up .gitignore

Don’t include node_modules in Git:

echo "node_modules" > .gitignore

First Commit

git add .
git commit -m "Initial commit"

Your dev environment is ready.