MEAN Stack - create & deploy the project on MDB GO

How to deploy & host MEAN app - tutorial & free hosting

After reading this tutorial you will know how to create full-stack apps using MEAN stack.

What does MEAN stand for?

MEAN is an acronym for web development tech stack consisting of these four technologies:

MongoDB
Express.js
Angular
Node.js

Let's quickly recall what are these.

MEAN recap

Here's a quick recap what are the main technologies used in the MEAN stack:

MongoDB is a document-oriented NoSQL database meant to store non-tabular data. If you want to learn more about it check out a separate tutorial.
Express.js is a web framework built for Node.js that allows you to create web servers in a very convenient way. Learn more about it here.
Angular is a JavaScript framework that allows you to create very advanced single-page apps. You can check out how to create an Angular project in another tutorial.
Node.js is a multi-platform JavaScript runtime built on V8 engine. It's used as a backend side of web apps. Read more about it here.

We won't dive deep into details about how to get started with these technologies using MDB GO. Go ahead and check the linked tutorials and once you learn a few things get back here.

If you have enough knowledge to get started, let's do this.

Building the MEAN app

Our example app will be a TODO list. It's a very popular use-case so let's simply get things done one at a time. We will go through the following steps:

Create a MongoDB database named todo_app
Create Node.js API with Express and Mongoose
Connect our frontend app to the Node.js API.

Let's go!

Creating MongoDB database

In order to create a new database you need to run the following command:


              $ mdb database init -db mongodb

Now you need to provide your user data and then the database details. Please provide the values of your choice. For example:

? Enter username tony
  ? Enter password Stark_12
  ? Repeat password Stark_12
  ? Enter database name todo_app
  ? Enter description Database for the TODO app

Note: the password must contain at least one uppercase letter, one lowercase letter, one number, one special symbol and have minimum length of 8.

Hit Enter and it's done.

Please notice that in the command output the username and database name slightly differs from what you provided earlier. Don't worry - it's OK. A few random characters have been added to these values to randomize them and improve security of your database credentials.

Important: Do not close your terminal window until you save your credentials somewhere. This is the only time we will show you your database password. If you won't save it you'll loose it.

That's pretty much it. You can now see how to connect with this database from the Node.js API.

Note: in MongoDB you don't need to create collections before they are used. MongoDB will create a collection when it's first time accessed.

Creating Node.js API with Express and Mongoose

In case you don't know, Mongoose is a MongoDB object modeling tool. It helps managing MongoDB access and models. You can initialize a MDB GO starter that already has configured Mongoose. Simply run the following command:


              $ mdb backend init

and choose Express.js + MongoDB API starter from the list that shows up.

After initialization just go to the newly created project directory and open the .env file. After that edit the DB_CONNECTION_STRING value. You should paste the connection string that's been shown to you in the previous step. In my case the updated value looks like this:

DB_CONNECTION_STRING=mongodb://tonye9c88223:Stark_12@mongo.db.mdbgo.com:8604/todo_appbd2f70e0

Save the file and close it.

The starter project is ready to use. You don't have to change anything to run the example app for the sake of this tutorial. Simply publish it using the following command:


              $ mdb publish -p node12

After your files get uploaded you can access your app under the address shown in the output.

Note: You may want to check the tutorial where we explain in detail what can go wrong here and how to deal with it.

Note: Since we need to install dependencies and run your app, it may take a few moments until it will be available under the provided URL.

When you open the app URL you will see the default view on the / endpoint but when you'll visit /tasks you will see an empty array indicating that the tasks collection has been created and is empty. There are also other endpoints defined like this:

GET /tasks/:id
POST /tasks
PUT /tasks/:id
DELETE /tasks/:id

These are self-explanatory but if you don't know how to operate on that go and check the tutorial where it is explained.

Alright, only one step left for the fully-working TODO app - Angular frontend. Let's create it.

Connecting to the API via Angular app

We won't show how to create the whole Angular app here. Instead, you'll learn how to connect to the API assuming you already have a working app.

Here's what we are going to do:

Import HttpClientModule in the app/app.module.ts file
Create an TodoApiService that will perform requests
Demonstrate how to use our service in an example app/todo-list.component.ts component

So the first thing is quite quick - let's see how to do it

Importing `HttpClientModule`

You surely have the app/app.module.ts file in your app. Open it and do two things:

Add the following import at the top of the file: import { HttpClientModule } from '@angular/common/http';
Add HttpClientModule to the imports array like this: // ... imports: [ // ... other modules, HttpClientModule ] // ...

Now let's create the TodoApiService service.

Creating `TodoApiService`

In order to do that you can make use of the Angular CLI and generate appropriate class. Just run this command:


              $ ng g s todo-api

It will generate necessary files and add required imports where necessary. Open the app/todo-api.service.ts file.

Next step is to add required imports. In order to do that add the following lines at the top of the file:


              import { HttpClient } from '@angular/common/http'; import { Observable, throwError }
              from 'rxjs'; import { catchError, retry } from 'rxjs/operators';

Now, inject the module into the constructor like this:


              @Injectable({
                providedIn: 'root'
              })
              export class TodoApiService {
                  constructor(private http: HttpClient) { }
              }

Alright, let's add CRUD operations so that we could talk to our API. Before we do that let's apiUrl field in our class so that we don't have to repeat it every time:


              @Injectable({
                providedIn: 'root'
              })
              export class TodoApiService {
                apiUrl = 'http://express-mongoose-starter.mdbgo.io'; // in your case it will be different
  
                constructor(private http: HttpClient) { }
              }

In order to read data from the server we need to make a GET /tasks request. You can do it like this:


              getTasks() {
                return this.http.get(`${this.apiUrl}/tasks`);
              }

It's a new method that performs the GET request and returns the result. We will take care of this result later. In a meantime let's add the remaining three methods:


              addTask(name: string, desc: string) {
                return this.http.post(`${this.apiUrl}/tasks`, { name, desc });
              }
  
              updateTask(id: number, name: string, desc: string) {
                return this.http.put(`${this.apiUrl}/tasks/${id}`, { name, desc });
              }
  
              deleteTask(id: number) {
                return this.http.delete(`{this.apiUrl}/tasks/${id}`);
              }

These are very simple methods that work the same way as the first one - performing POST, PUT and DELETE requests and returning the result.

Alright, let's find out how to use this.

Using the `TodoApiService` in an example component

Assume you have a component named TodoListComponent where you want to display a list of tasks from the database. You need to make an API request to fetch the real data.

This is how you can make use of our service. First, import your service and inject it into the constructor:


              import { Component, OnInit } from '@angular/core';
              import { TodoApiService } from '../todo-api.service.ts';
  
              @Component({
                  selector: 'app-todo-list',
                  templateUrl: './todo-list.component.html',
                  styleUrls: ['./todo-list.component.scss']
              })
              export class TodoListComponent implements OnInit {
  
                  constructor(private api: TodoApiService) { }
  
                  ngOnInit() {
                  }
              }

Now you can simply invoke our service method like this:


              ngOnInit() {
                  this.api.getTasks()
                      .subscribe((tasks) => {
                        this.tasks = tasks;
                      });
              }

It will make an API request and assign the result to the tasks field in your component (we did not show how to create one).

Making POST, PUT and DELETE requests is just as easy:


              createTask() {
                  this.api.addTask('Wash the dishes', 'will take a while')
                      .subscribe((newTask) => {
                        this.tasks.push(newTask);
                      });
              }
  
              updateTask() {
                  const currentTaskId = 1;
                  this.api.updateTask(currentTaskId, 'Wash the dishes', 'Will take 30 mins')
                      .subscribe((updatedTask) => {
                          const oldTask = this.tasks.find((t => t.id === currentTaskId));
                          oldTask.id = updatedTask.id;
                          oldTask.name = updatedTask.name;
                          oldTask.desc = updatedTask.desc;
                      });
              }
  
              deleteTask() {
                  const currentTaskId = 1;
                  this.api.deleteTask(currentTaskId)
                      .subscribe(() => {
                          const idx = this.tasks.findIndex(t => t.id === currentTaskId);
                          this.tasks.splice(idx, 1);
                      });
              }

And that's how you communicate with your API from the Angular app.