Local Development

Table of contents

1. Local Development Guide
   1. Prerequisites
   2. MongoDB Setup
      1. Installation
      2. Database Initialization
   3. Backend (API) Setup
   4. Frontend Setup
   5. Testing the Application
   6. Debugging
      1. Backend Debugging
      2. Frontend Debugging
   7. Common Issues
      1. MongoDB Connection Problems
      2. CORS Issues
      3. JWT Authentication Issues
   8. Building for Production
      1. Backend
      2. Frontend

Local Development Guide

This guide explains how to set up and run the MEAN Stack Contacts application locally without Docker.

Prerequisites

Before getting started, make sure you have the following installed:

1. Node.js (LTS version (22+) recommended): Download Node.js
2. npm (comes with Node.js)
3. MongoDB (Community Edition): Download MongoDB
4. Angular CLI (optional but recommended): npm install -g @angular/cli

MongoDB Setup

Installation

1. Install MongoDB Community Edition following the official instructions for your operating system.
2. Start the MongoDB service:
   • Windows: The MongoDB service should start automatically
   • macOS: brew services start mongodb-community
   • Linux: sudo systemctl start mongod

Database Initialization

1. Create a new database:

   mongosh
   use mean-contacts
   

2. Create an admin user:

   db.createUser({
     user: "admin-user",
     pwd: "admin-password",
     roles: [{ role: "readWrite", db: "mean-contacts" }]
   })
   

3. Create a test user:

   db.users.insertOne({
     username: "nitin27may@gmail.com",
     email: "nitin27may@gmail.com",
     password: "$2a$10$nc0yO2eeCDOLg6sObsAHfuXQY8NnCrhHz5GbkmPYsAGLsQoSZa.qm", // P@ssword#321
     firstName: "Nitin",
     lastName: "Singh",
     create_date: new Date()
   })
   

4. Add sample contacts:

   db.contacts.insertMany([
     {
       firstName: "Nitin",
       lastName: "Singh",
       mobile: "9876543243",
       email: "nitin27may@gmail.com",
       city: "Mumbai",
       postalCode: "421201",
       create_date: new Date()
     },
     {
       firstName: "Sachin",
       lastName: "Singh",
       mobile: "9876540000",
       email: "sachin@gmail.com",
       city: "Pune",
       postalCode: "421201",
       create_date: new Date()
     },
     {
       firstName: "Vikram",
       lastName: "Singh",
       mobile: "9876541111",
       email: "vikram@gmail.com",
       city: "Pune",
       postalCode: "421201",
       create_date: new Date()
     }
   ])
   

Backend (API) Setup

1. Navigate to the API directory:

   cd mean-docker/api
   

2. Install dependencies:

   npm install
   

3. Create a .env file based on .env.example:

   example`:

   cp .env.example .env
   

   PORT=3000
   SECRET=your_jwt_secret_key
   MONGO_DB_USERNAME=admin-user
   MONGO_DB_PASSWORD=admin-password
   MONGO_DB_HOST=localhost
   MONGO_DB_PORT=27017
   MONGO_DB_PARAMETERS=?authSource=admin
   MONGO_DB_DATABASE=mean-contacts
   

4. Start the API in development mode:

   npm run dev:watch
   

The API will be available at http://localhost:3000/api.

Frontend Setup

1. Navigate to the frontend directory:

   cd mean-docker/frontend
   

2. Updated the API endpoint in environment.ts

   export const environment = {
    production: false,
    apiEndpoint: 'http://localhost:3000/api',  // updating this
    angular: 'Angular 19',
    bootstrap: 'Bootstrap 5',
    expressjs: 'Express.js 4.17.1',
    mongoDb: 'MongoDB 7.0',
   };
   
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run serve
   

The frontend will be available at http://localhost:4200.

Testing the Application

1. Open your browser and navigate to http://localhost:4200
2. Log in with the test credentials:
   • Username: nitin27may@gmail.com
   • Password: P@ssword#321
3. After successful login, you’ll be redirected to the home page
4. Navigate to Contacts to view, add, edit, and delete contacts

Debugging

Backend Debugging

1. You can debug the Node.js backend using:
   • Visual Studio Code’s debugger (launch configuration is included)
   • Chrome DevTools by running:

     node --inspect server.js
     

   • Then open chrome://inspect in Chrome
2. For real-time API testing, use tools like:
   • Postman
   • Insomnia

Frontend Debugging

1. Use the Angular DevTools extension for Chrome
2. Use the browser’s built-in DevTools (F12)
3. Enable source maps in Chrome for better debugging

Common Issues

MongoDB Connection Problems

If you encounter issues connecting to MongoDB:

1. Ensure MongoDB is running: mongosh
2. Check your firewall settings
3. Verify credentials in the .env file
4. Try connecting manually:

   mongosh mongodb://admin-user:admin-password@localhost:27017/mean-contacts?authSource=admin
   

CORS Issues

If you encounter CORS errors:

1. Ensure the API is running on the expected port (3000)
2. Check the frontend is correctly proxying requests to the API

JWT Authentication Issues

If authentication fails:

1. Check the SECRET in your .env file
2. Ensure the user exists in the database with the correct credentials
3. Verify the token is being sent correctly in the Authorization header

Building for Production

Backend

cd mean-docker/api
npm run build

Frontend

cd mean-docker/frontend
npm run build:prod

The frontend build will create a production-ready bundle in the dist/ directory, which can be deployed to any static hosting service or server.