Mean 02 Project Setup

title: "MEAN Stack Project Setup — Directory Structure and Dependencies" description: "Set up a MEAN Stack project with Express backend and Angular frontend, including directory structure, package dependencies, and development scripts." weight: 12 date: 2026-06-28 lastmod: 2026-06-28 tags: [frameworks, mean]

Setting up a MEAN stack project requires two main parts: the Express backend and the Angular frontend. This structure keeps concerns separated and organized.

What You'll Learn

You will create a MEAN project from scratch with proper directory structure, dependency management, and development scripts for both backend and frontend.

Why It Matters

A clean project structure prevents confusion as your application grows. Separating backend and frontend concerns makes development and deployment easier.

Real-World Use

DodaTech uses a monorepo structure for MEAN projects with a shared models directory for TypeScript interfaces used by both Express and Angular.

flowchart LR
    A[mean-project/] --> B[backend/]
    A --> C[frontend/]
    A --> D[shared/]
    B --> E[Node.js + Express]
    C --> F[Angular]
    D --> G[Shared Types]
    style A fill:#4a90d9,color:#fff

Project Directory Structure

Create the main project folder with separate backend and frontend directories.

mkdir mean-stack-app
cd mean-stack-app
mkdir backend frontend shared

// backend/package.json
{
  "name": "mean-backend",
  "version": "1.0.0",
  "description": "Express API for MEAN application",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^8.0.0",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.0"
  }
}

Expected output: A package.json file with Express, Mongoose, CORS, and dotenv as dependencies. Nodemon for auto-restart during development.

Install Backend Dependencies

cd backend
npm install

Expected output: All backend dependencies are installed in the node_modules directory.

Install Angular CLI and Create Frontend

npm install -g @angular/cli
cd ../frontend
ng new mean-frontend --routing --style=css
cd mean-frontend
npm install

Expected output: Angular CLI installed globally. A new Angular project created with routing enabled and CSS styling.

Environment Configuration

Create environment files for different deployment stages.

# backend/.env
PORT=3000
MONGODB_URI=mongodb://localhost:27017/mean-app
NODE_ENV=development
JWT_SECRET=your-secret-key-here

Expected output: Environment variables for port, database connection, and JWT secret. Keep this file out of version control.

Common Mistakes

1. Not using .gitignore: The node_modules directory should never be committed. Create a .gitignore file for both backend and frontend.

2. Forgetting environment variables in production: Set environment variables in your hosting platform. Do not hardcode secrets.

3. Running Angular and Express on the same port: Express runs on port 3000 by default. Angular dev server runs on port 4200. Configure CORS for cross-origin requests.

4. Not using nodemon for development: Without nodemon, you must manually restart the server after every change.

5. Installing Angular dependencies globally: Only the Angular CLI should be global. Project dependencies should be local.

Practice Questions

1. What ports do Express and Angular use by default?

Express uses port 3000. Angular uses port 4200.

2. What is the purpose of the cors package?

It enables Cross-Origin Resource Sharing, allowing the Angular app on port 4200 to request the Express API on port 3000.

3. Why should you keep backend and frontend in separate directories?

They have different dependencies, build processes, and deployment configurations. Separation prevents conflicts.

4. What does the dotenv package do?

It loads environment variables from a .env file into process.env.

5. How do you auto-restart the Express server during development?

Use nodemon. Run npm run dev which executes nodemon server.js.

Challenge

Create a MEAN project structure with backend, frontend, and shared directories. Add a .gitignore file that excludes node_modules, .env files, and build output directories.

Frequently Asked Questions

Mini Project

Set up a complete MEAN project structure with backend (Express + Mongoose), frontend (Angular with routing), and shared types. Verify both servers start correctly.

What's Next

Continue to Express Server Setup to build the backend API.