Mean Stack Tutorial | Mean.js Tutorial

In the world of web development, choosing the right technology stack is crucial for building fast, scalable, and maintainable applications. One such stack that has gained significant popularity in recent years is the MEAN stack. Composed of MongoDB, Express.js, Angular, and Node.js, MEAN provides a full-stack JavaScript solution for building modern web applications. In this tutorial, we will dive into the MEAN stack and focus on the MEAN.js framework to help you understand how to get started with building applications using this powerful stack.

What is MEAN Stack?

Before diving into the specifics of MEAN.js, let’s first understand the components of the MEAN stack:

1. MongoDB: A NoSQL database that stores data in a flexible, JSON-like format, making it ideal for handling large volumes of unstructured data.
2. Express.js: A web application framework for Node.js that simplifies server-side application development. It helps manage routes, requests, middleware, and more.
3. Angular: A front-end framework developed by Google for building dynamic single-page applications (SPAs). It enables the development of rich user interfaces with data binding and reusable components.
4. Node.js: A JavaScript runtime built on Chrome’s V8 engine that allows developers to run JavaScript on the server side. It is event-driven and non-blocking, making it great for handling concurrent requests.

Together, these technologies form the MEAN stack, allowing developers to build end-to-end web applications using a single language—JavaScript.

What is MEAN.js?

MEAN.js is a full-stack JavaScript framework that provides a scaffolding and boilerplate for building web applications using the MEAN stack. It simplifies the development process by offering a set of best practices, pre-configured components, and essential tools for building scalable applications.

With MEAN.js, you get:

• A unified development environment using JavaScript for both front-end and back-end.
• Built-in support for MongoDB and Mongoose, making it easy to interact with the database.
• Integration with Angular for creating responsive and dynamic user interfaces.
• A robust routing system using Express.js and Node.js for handling HTTP requests and serving data.

Setting Up a MEAN.js Application

Let’s walk through the steps to create a simple MEAN.js application from scratch. In this tutorial, we will set up a basic project and explore the main components of MEAN.js.

Prerequisites

Before you begin, make sure you have the following installed on your system:

• Node.js and npm (Node Package Manager)
• MongoDB (either locally or using a cloud service like MongoDB Atlas)
• A code editor (such as Visual Studio Code)

Step 1: Install the MEAN.js Framework

To begin using the MEAN.js framework, the easiest way is to clone the official MEAN.js GitHub repository. Open your terminal and run the following commands:

# Clone the MEAN.js repository
git clone https://github.com/meanjs/mean.git my-mean-app

# Navigate into your project directory
cd my-mean-app

# Install the dependencies
npm install

This will download the MEAN.js codebase and install all necessary dependencies like Angular, Express, and MongoDB integration tools.

Step 2: Start MongoDB

If you’re running MongoDB locally, make sure it is running. If you are using MongoDB Atlas, make sure your database is set up and you have your connection URI ready. For local MongoDB, run the following command to start the MongoDB server:

mongod

Step 3: Run the Application

Now that the dependencies are installed and MongoDB is running, you can start the application. Run the following command:

# Start the development server
npm start

By default, your application should be running at http://localhost:3000. Open this URL in your browser to view the application.

Step 4: Structure of a MEAN.js Application

A typical MEAN.js application is divided into several key directories:

• app/models: Contains the Mongoose models for MongoDB collections.
• app/routes: Defines the routes for handling HTTP requests (GET, POST, etc.).
• app/controllers: Contains the logic for handling requests and interacting with models.
• app/views: Houses the Angular views and templates.
• config: Includes configuration files like database connections and server settings.
• public: Contains static files such as stylesheets, images, and client-side JavaScript.

Step 5: Understanding the Key Files and Folders

1. Models

In the app/models directory, you will define your data models using Mongoose. A model defines the structure of the data and the methods for interacting with MongoDB.

Example of a simple model (user.model.js):

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var UserSchema = new Schema({
    username: { type: String, required: true },
    email: { type: String, required: true },
    password: { type: String, required: true }
});

module.exports = mongoose.model('User', UserSchema);

2. Controllers

Controllers contain the logic for handling HTTP requests and processing data from the models.

Example of a simple controller (user.controller.js):

var User = require('../models/user.model');

exports.createUser = function(req, res) {
    var newUser = new User(req.body);
    newUser.save(function(err, user) {
        if (err) return res.status(500).send(err);
        res.status(200).json(user);
    });
};

3. Routes

Routes are responsible for mapping URLs to controllers. In app/routes, you’ll define how different HTTP requests (GET, POST, PUT, DELETE) are handled.

Example of defining routes (user.routes.js):

var users = require('../controllers/user.controller');

module.exports = function(app) {
    app.route('/api/users')
        .get(users.getUsers)
        .post(users.createUser);
};

Step 6: Front-End with Angular

On the front end, Angular is used to create dynamic and interactive single-page applications. The app/views directory houses Angular components and templates.

Example of a simple Angular component to interact with your Express API (user.component.js):

angular.module('mean').controller('UserController', ['$scope', '$http', function($scope, $http) {
    $scope.users = [];
    $scope.addUser = function(user) {
        $http.post('/api/users', user).then(function(response) {
            $scope.users.push(response.data);
        });
    };
}]);

Step 7: Deployment

Once your application is complete, you can deploy it on platforms like Heroku, DigitalOcean, or AWS for production use. MEAN.js applications are easily deployable due to their reliance on JavaScript throughout the stack.

Conclusion

The MEAN stack, with its powerful combination of MongoDB, Express.js, Angular, and Node.js, is a popular choice for building modern web applications. With the MEAN.js framework, developers can leverage a well-structured starting point for developing scalable and maintainable full-stack JavaScript applications.

In this tutorial, we’ve covered the basics of setting up and understanding the MEAN.js framework. By following these steps and exploring the various components, you’ll be able to start building robust applications using the MEAN stack. As you grow more comfortable with the stack, you can dive deeper into advanced features, such as authentication, middleware, and more complex data interactions.