Project Setup — Folder, npm & Dependencies

Every Node.js project starts the same way: create a folder, run npm init, install packages, and organize files. In this lesson we prepare the empty skeleton. No chat logic yet — just a clean foundation.

Step 1 — Create the project folder

Open your terminal (PowerShell on Windows, Terminal on Mac/Linux) and run:

mkdir chat-app
cd chat-app

This creates a folder named chat-app and moves you inside it. All project files will live here.

Step 2 — Initialize npm (package.json)

npm is Node’s package manager. It tracks your dependencies (Express, Socket.IO) and scripts (how to start the app).

npm init -y

The -y flag accepts all defaults instantly. You will see a new file: package.json.

Step 3 — Install production dependencies

We need two packages:

• express — serves files and handles HTTP
• socket.io — real-time WebSocket communication

npm install express socket.io

npm downloads packages into node_modules/ and records versions in package.json.

Step 4 — Install dev dependency (nodemon)

During development, nodemon restarts the server automatically when you save a file — no manual stop/start every time.

npm install --save-dev nodemon

Step 5 — Update package.json scripts

Open package.json and make sure the scripts section looks like this:

{
  "name": "chat-app",
  "version": "1.0.0",
  "description": "Real-time chat app with Node.js, Express, and Socket.IO",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": ["chat", "socket.io", "nodejs", "express"],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.21.0",
    "socket.io": "^4.8.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

• npm run dev — starts server with nodemon (development)
• npm start — starts server with plain Node (production / Railway)

Step 6 — Create folder structure

Create the public folder for frontend files. We add the actual HTML/CSS/JS in the next lessons.

mkdir public

Your tree should match this:

chat-app/
├── public/
│   ├── index.html      ← Chat UI (login + messages)
│   ├── style.css       ← WhatsApp-style layout & colors
│   └── client.js       ← Socket.IO client logic
├── server.js           ← Express + Socket.IO server
├── package.json        ← Dependencies & npm scripts
└── node_modules/       ← Created after npm install (do not edit)

Checkpoint — verify before moving on

• ✅ Folder chat-app exists
• ✅ package.json lists express, socket.io, nodemon
• ✅ node_modules/ folder exists after install
• ✅ Empty public/ folder exists

In the next lesson we write server.js — the brain of the chat app.