MEAN Stack on an Azure Linux VM

Introduction

You’re a software developer at an online retail store that specializes in children’s books. You’re building a new web site for your business. You haven’t yet fully defined the exact needs for your site, but you’ll be responsible for the site from start to finish. You have lots of experience in JavaScript, so you want to find a solution that plays well to your strengths.

You’ve heard about the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js) and you know it uses JavaScript, so you decide to try it out by building a MEAN stack and a basic web application that stores information about books. You can use what you learned to get a jump-start on your new web site.

Decide if MEAN is right for you!

MEAN is a development stack for building and hosting web applications. MEAN is an acronym for its component parts: MongoDB, Express, AngularJS, and Node.js. The main reason you might consider MEAN is if you’re familiar with JavaScript. Here are some other reasons you might want to choose MEAN, or choose a different development stack for your next web application.

• Your data isn’t highly structured MongoDB is what’s called a NoSQL database. A NoSQL database doesn’t require data to be structured in a pre-defined way like it would with a relational database like Microsoft SQL Server or MySQL. Instead, MongoDB stores its data in JSON-like documents that don’t require the rigid data structures that MySQL or other relational databases require.
• MEAN is well documented The components of the MEAN stack are all popular right now. Resources for working with MongoDB, Express, AngularJS, and Node.js are easy to find.
• MEAN runs almost anywhere You can also develop MEAN stack applications from your favorite development environment, whether that’s Windows, macOS, or Linux.
• MEAN is scalable In addition to being cross platform, MEAN stack applications can be scaled out and easily tested for accelerated growth in enterprise environments and offer high performance.

Why might MEAN not be right for me?

Here are some reasons you might want to choose a development stack other than MEAN. Even if you decide that MEAN isn’t right for you, you might still be interested in this module. Many of the patterns you’ll see apply to other kinds of web application frameworks.

• Your data is highly structured If your data is highly structured, you might benefit from putting your data in a relational database such as Microsoft SQL Server or MySQL.
• JavaScript isn’t your strongest skill If you prefer another language over JavaScript, there may be an alternative framework out there for you.

For example, the LAMP stack, which consists of Linux, Apache, MySQL, and PHP (sometimes with Perl or Python instead of PHP) might better align to your strengths and experience.

Create a VM to host your web application

Like most application frameworks, you can run your MEAN stack application in many different environments. You can run your application on a physical computer in your server room, on a virtual machine, or in containers. Here you’ll run your application on a VM running on Azure. MEAN supports many different operating systems. For learning purposes, you’ll use Ubuntu Linux here.

Create an Ubuntu Linux VM

Normally, you create a resource group before you create other resources on Azure. A resource group is a container that holds the resources that are related for an Azure solution. For this exercise, the Azure sandbox provides a resource group for you. However, when working in your own Azure subscription, you’d run the following command to create a resource group in a location near you.

## Azure CLI
az group create \\
  --name <resource-group-name> \\
  --location <resource-group-location>

From Cloud Shell, run the az vm create command to create an Ubuntu VM:

## Azure CLI  

az vm create \\
   --resource-group [sandbox resource group name] \\
   --name MeanStack \\
   --image Canonical:0001-com-ubuntu-server-focal:20_04-lts:latest \\
   --admin-username azureuser \\
   --generate-ssh-keys

The command takes about two minutes to complete. When the command finishes, you’ll see output similar to this:

## JSON Output Example  
{
   "fqdns": "",
   "id": "/subscriptions/00000000-0000-0000-0000-000000000000/resourceGroups/myResourceGroup/providers/Microsoft.Compute/virtualMachines/MeanStack",
   "location": "eastus",
   "macAddress": "00-0D-3A-1E-1B-3B",
   "powerState": "VM running",
   "privateIpAddress": "10.0.0.5",
   "publicIpAddress": "104.211.9.245",
   "resourceGroup": "[sandbox resource group name]",
   "zones": ""
 }

The VM’s name is MeanStack. You’ll use this name in future commands to identify the VM you want to work with. The next step is Open port 80 on the VM to allow incoming HTTP traffic to the web application you’ll later create.

## Azure CLI
  az vm open-port \\
   --port 80 \\
   --resource-group [sandbox resource group name] \\
   --name MeanStack

View your IP Instance for SSH connection to your VM. Start by running az vm show. This command saves the IP address in a Bash variable named ipaddress.

## Azure CLI
  ipaddress=$(az vm show \\
   --name MeanStack \\
   --resource-group [sandbox resource group name] \\
   --show-details \\
   --query [publicIps] \\
   --output tsv)

Connect to your VM like this.

## Your Terminal  
ssh azureuser@$ipaddress

When prompted, enter yes to save the VM’s identity locally so future connections are trusted.

MongoDB

MongoDB is a popular NoSQL database solution that’s free and open source. A NoSQL database doesn’t require data to be structured in a predefined way like it would with a relational database like SQL Server or MySQL. MongoDB stores its data in JSON-like documents that don’t require rigid data structures. You interact with MongoDB using queries and commands sent using JavaScript Object Notation, or JSON.

What MongoDB editions are available?

MongoDB provides two editions:

• MongoDB Community Server
• MongoDB Enterprise Server

NodeJs

Node.js acts as the server-side host for your web application and handle inbound HTTP traffic. Node.js also provides you with a way to communicate with your MongoDB installation,

What versions of Node.js are available?

• Long Term Support (LTS): LTS is generally considered to be more stable and is recommended for most users and for production environments.
• Current: Current is for those who want to experiment with the latest features. Because it can introduce breaking changes between releases, it’s not recommended for production environments.

<aside> 💡 *Through details above, here’s how each component of the MEAN stack fits in. **- MongoDB stores information about books.

• Express.js routes each HTTP request to the appropriate handler.
• AngularJS connects the user interface with the program’s business logic.
• Node.js hosts the server-side application.***

What about Express?

Express.js is a web server framework that’s built for Node.js that simplifies the process for building web applications.

The main purpose of Express is to handle request routing. Routing refers to how the application responds to a request to a specific endpoint. An endpoint is made up of a path, or URI, and a request method such as GET or POST. For example, you might respond to a GET request to the /book endpoint by providing the list of all books in the database. You might respond to a POST request to the same endpoint by adding an entry to the database based on fields the user entered into a web form.

In the web application you’ll build shortly, you’ll use Express to route HTTP requests and to return web content to your user. Express can also help your web applications work with HTTP cookies and process query strings. Express is a Node.js package. You use the npm utility, which comes with Node.js, to install and manage Node.js packages. Later in this unit, you’ll create a file named package.json to define Express and other dependencies, then run the npm install command to install these dependencies.

What about AngularJS?

AngularJS makes web applications easier to write and test because it allows you to better separate the appearance of your web page — your HTML code — from how your web page behaves. If you’re familiar with the model–view–controller (MVC) pattern or the concept of data binding, AngularJS will be familiar to you.

Model View Controller (MVC) Architecture Pattern

AngularJS is what’s called a front-end JavaScript framework, which means it needs to only be available on the client that accesses the application. In other words, AngularJS runs in your user’s web browser, not on your web server. And because AngularJS is JavaScript, you can use it to easily fetch data from your web server to show on the page.

## Here's an example that loads AngularJS from a CDN. You'd typically add this code to the <head> section of your HTML page.

<script src="<https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js>"></script>

Don’t confuse AngularJS with Angular. While many of the concepts are similar between the two, AngularJS is the predecessor to Angular. AngularJS is still commonly used for building web applications. While AngularJS is based on JavaScript, Angular is based on TypeScript, a programming language that makes it easier to write JavaScript programs.

Read more on the link below for detailed steps about it.

How will I build the application?

Summary

MEAN is a development stack for building and hosting web applications. Recall that MEAN is an acronym for its component parts: MongoDB, Express, AngularJS, and Node.js. In this module, you learned when the MEAN stack is a good choice for web development and when you might want to choose something else. The main reason you might consider MEAN is if you’re familiar with JavaScript.

To see the MEAN stack in action, you created an Ubuntu virtual machine on Azure and installed the MEAN stack on it for web development. With your MEAN stack in place, you created a basic book inventory web application. To summarize, the web application uses:

• MongoDB to store information about books.
• Express.js to route each HTTP request to the appropriate handler.
• AngularJS to connect the user interface with the program’s business logic.
• Node.js to host the server-side application.

You can find the source code for the web application on GitHub.