Setting Up Your First MEAN Stack Application

What is the MEAN Stack?

The MEAN stack is a popular full-stack JavaScript framework used to build dynamic web applications. It includes:

M: MongoDB – NoSQL database for storing data

E: Express.js – Web application framework for Node.js

A: Angular – Front-end framework for building the user interface

N: Node.js – JavaScript runtime for running server-side code

The MEAN stack is powerful because it uses JavaScript throughout the entire application, from front to back.

Step-by-Step: Set Up Your First MEAN Stack App

✅ Step 1: Install the Required Tools

Make sure you have the following installed:

Node.js and npm (Node Package Manager)

Download and install from https://nodejs.org

Check installation:

bash

Copy

Edit

node -v

npm -v

MongoDB

Install MongoDB locally or use MongoDB Atlas for cloud-based storage.

Angular CLI (Command Line Interface)

bash

Copy

Edit

npm install -g @angular/cli

✅ Step 2: Set Up the Backend (Node.js + Express + MongoDB)

Create a new folder for your project:

bash

Copy

Edit

mkdir mean-app

cd mean-app

Initialize a Node.js project:

bash

Copy

Edit

npm init -y

Install backend dependencies:

bash

Copy

Edit

npm install express mongoose cors body-parser

Create a basic server (e.g., server.js):

javascript

Copy

Edit

const express = require('express');

const mongoose = require('mongoose');

const cors = require('cors');

const bodyParser = require('body-parser');

const app = express();

const PORT = 3000;

app.use(cors());

app.use(bodyParser.json());

// Connect to MongoDB

mongoose.connect('mongodb://localhost:27017/mean-app', {

  useNewUrlParser: true,

  useUnifiedTopology: true

}).then(() => console.log('MongoDB connected'))

  .catch(err => console.log(err));

// Sample route

app.get('/', (req, res) => {

  res.send('Hello from Express!');

});

app.listen(PORT, () => {

  console.log(`Server is running on http://localhost:${PORT}`);

});

✅ Step 3: Set Up the Frontend (Angular)

Create Angular frontend inside the project folder:

bash

Copy

Edit

ng new frontend

cd frontend

ng serve

Open http://localhost:4200 in your browser to see the Angular app.

✅ Step 4: Connect Angular to Express

You’ll eventually want Angular to send HTTP requests to your Express server. You can use Angular's built-in HttpClient module to do this.

Generate a service in Angular:

bash

Copy

Edit

ng generate service api

Use the service to call your backend API from Angular components.

Example using Angular service:

typescript

Copy

Edit

// api.service.ts

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })

export class ApiService {

  private API_URL = 'http://localhost:3000';

  constructor(private http: HttpClient) {}

  getMessage() {

    return this.http.get(`${this.API_URL}/`);

  }

}

✅ Step 5: Run Everything Together

Start MongoDB (if running locally).

Run the backend server:

bash

Copy

Edit

node server.js

Run the Angular frontend:

bash

Copy

Edit

cd frontend

ng serve

Your MEAN app is now live with a working frontend and backend!

✅ Optional Tips

Use Postman to test your API routes.

Use Angular routing to create multiple pages.

Use environment variables to manage development and production URLs.

For real-world apps, add authentication, validation, and error handling.

Conclusion

You’ve now set up your first MEAN stack application! The MEAN stack is a powerful way to build full-stack apps entirely in JavaScript—from the database to the browser.

Learn Mean Stack Course

Read More

What is the MEAN Stack? A Beginner’s Guide

How do I learn MEAN stack?

Visit Our Quality Thought Training in Hyderabad

Get Directions