Beginner's Guide: Setting up a local MEAN Stack development environment on Windows, Linux, and macOS

The MEAN stack is one of the most popular tech stacks used for developing web applications. It includes MongoDB, Express.js, Angular, and Node.js. This tutorial will walk you through the steps to set up the MEAN stack on your local machine, regardless of whether you're using Windows, Linux, or macOS.

Prerequisites

Before we begin, make sure that you have the following:

• A computer with one of the supported operating systems (Windows, Linux, or macOS).
• An internet connection to download the required tools.

Step 1: Install Node.js and NPM

The Node.js runtime and the Node Package Manager (NPM) are essential for running both the server-side (Node) and the client-side (Angular) code.

Windows

1. Go to the Node.js download page.
2. Download the LTS version (Long Term Support).
3. Run the installer and follow the on-screen instructions.
4. To check if Node.js is installed correctly, open the Command Prompt and type:

   node -v
   npm -v

Linux

1. Open a terminal window.
2. For most Linux distributions, use the following command to install Node.js and NPM:

   sudo apt install nodejs npm

3. To verify the installation, check the version of Node.js and NPM:

   node -v
   npm -v

macOS

1. Open the Terminal.
2. Install Node.js using Homebrew (if you don’t have Homebrew installed, you can find installation instructions here):

   brew install node

3. After installation, verify the installation:

   node -v
   npm -v

Step 2: Install MongoDB

MongoDB is the database used in the MEAN stack. It stores data in a flexible, JSON-like format.

Windows

1. Go to the MongoDB download page.
2. Download the MSI installer for Windows.
3. Run the installer and follow the installation steps.
4. By default, MongoDB is installed in C:\Program Files\MongoDB\Server\5.x\bin.
5. Start MongoDB by opening the Command Prompt and typing:

   mongod

6. Open another Command Prompt window and type:

   mongo

   This should connect you to the MongoDB shell.

Linux

1. Open a terminal window and update your package list:

   sudo apt update

2. Install MongoDB:

   sudo apt install mongodb

3. Start MongoDB:

   sudo systemctl start mongodb

4. Check the status of MongoDB to ensure it’s running:

   sudo systemctl status mongodb

macOS

1. Install MongoDB using Homebrew:

   
   brew tap mongodb/brew
   brew install mongodb-community@5.0

2. Start MongoDB:

   brew services start mongodb/brew/mongodb-community

Step 3: Install Angular CLI

Angular is the front-end framework in the MEAN stack. To set up Angular, you need to install the Angular CLI.

Windows, Linux, and macOS

1. Open a terminal/command prompt and install the Angular CLI globally using NPM:

   npm install -g @angular/cli

2. Verify the installation:

   ng version

Step 4: Create Your First MEAN Stack Application

Now that all the dependencies are installed, it’s time to create a simple MEAN stack application.

1. Set Up the Backend (Node.js + Express)

1. Open your terminal/command prompt and create a new directory for your project:

   mkdir mean-stack-project
   cd mean-stack-project

2. Initialize a Node.js project:

   npm init -y

3. Install the required dependencies:

   npm install express mongoose

4. Create a file named server.js inside your project folder. Here's a simple Express server setup:

   const express = require('express');
   const mongoose = require('mongoose');
   
   const app = express();
   const PORT = process.env.PORT || 3000;
   
   // Connect to MongoDB
   mongoose.connect('mongodb://localhost:27017/meanstack', { useNewUrlParser: true, useUnifiedTopology: true })
     .then(() => console.log('Connected to MongoDB'))
     .catch(err => console.log('Error connecting to MongoDB:', err));
   
   // Basic route
   app.get('/', (req, res) => {
     res.send('Hello from MEAN stack!');
   });
   
   // Start server
   app.listen(PORT, () => {
     console.log(`Server is running on port ${PORT}`);
   });

2. Set Up the Frontend (Angular)

1. Create a new Angular application:

   ng new client

2. Navigate into the Angular application directory:

   cd client

3. To serve the Angular app, run:

   ng serve

   This will start the Angular development server and you can access your application at http://localhost:4200/.

Step 5: Test Your Application

1. Start your backend server (Node + Express):

   node server.js

2. In another terminal window, start the Angular frontend:

   cd client
   ng serve

3. Open your browser and go to http://localhost:4200/ to see your Angular app running. The backend should be available at http://localhost:3000/.

Step 6: Next Steps

• Add more routes to your Express server to handle different requests.
• Create MongoDB models to interact with the database.
• Connect the front-end with the back-end by using Angular services to make HTTP requests to the Express API.

Conclusion

In this tutorial, you’ve learned how to set up a local environment for MEAN stack development on Windows, Linux, and macOS. You’ve also created a basic backend with Express.js, set up a MongoDB database, and generated an Angular frontend.

With the basic setup in place, you can now start building more complex applications using the full power of the MEAN stack. Happy coding!