Goodheads
GENERAL
Posted By Toni Solarin —

How To Deploy a Mean Stack App To Microsoft Azure

Microsoft Azure has been picking up steam in the development space when it comes to hosting apps in the cloud. However, being a Microsoft product the general developer community seems to perceive it as a service for only Microsoft developers. In reality, Azure is just like any of it’s counterparts and supports a wide range of technologies including PHP, Node.js, Java, Python and of course  .NET :)

In this tutorial, we’ll be looking at deploying an already built MEAN stack app on Azure. This tutorial assumes you already have a working knowledge of building MEAN stack apps.

Let’s get started deploying!

Step 1: The database

The first step in our deployment process will be to set up our MongoDB database. If you already have a production database setup then you can skip this step. Azure comes with a marketplace where you can find a lot of ready made products that you can quickly spin up an instance of in your App Service. For our database, we are going to spin up an instance of MongoLab, a MongoDB hosting service.

 

Login to your Azure management portal click new and go to marketplace

In the developer services menu select MongoLab and click the next arrow

 

Specify a service plan and give this service instance a name then click the next arrow. In my case I called mine MongoLab

 

Read through the summary of your service and click purchase to finalize

 

Once the App Service has been provisioned, it’ll appear in a list in the marketplace menu

 

Highlight the service you just created and click connection info at the bottom menu. A popup will appear showing you the connection string for the MongoLab. Copy and paste this into your code and you’re all setup.

Time to move on to deploying the app

Step 2: The app

Deploying the front-end and back-end of your app is as easy as pie. No special configurations need to be made in your Azure portal. When deploying to Azure here are some things to note:

1. Azure automatically determines that your app is a node.js app when it sees the presence of a server.js or app.js file in its root.

2. Azure automatically installs your node modules in the absence of a node_modules folder based on the dependencies in your package.json file

3. Azure only runs npm install so you’ll need to include any folders generated by other package managers like bower etc.

4. Azure has full support for gulp and grunt task runners although I’ve not tested this feature.

5. No other files are required, but you can optionally specify a web.config file in your application root to better customize your deployment. This is however beyond the scope of this tutorial.

Let’s get cracking

 

First let’s create a new web app instance by hitting the NEW selecting compute, web app and finally Click Create. You will need to specify the URL which is typically youruniquename.azurewebsites.net in the case of my example I chose learners and you can go leave the default values and go ahead and create it

Once the website has been provisioned (this usually takes a few minutes) it’s time to push the files that make up your app. There are multiple ways to publish a website to Azure however, the easiest and platform-agnostic method (I use a MacBook Pro) is via source control.

So we go ahead and select the Integrate source control menu

There are multiple sources to choose from including VS online, a local git repo on Azure that you can push to, Github, Dropbox, Bitbucket etc. In this tutorial I’m going to use Github. 

 

Once authentication has been successful you’ll get the opportunity to select the repository and the branch.  

 

You’ll get a notification on this screen to tell you the deployment process is underway 

And voila!!! Deployment successful. Now all that’s left for you to do is navigate to youruniquename.azurewebsites.net  and you should see your app live. 

This is my MEAN stack app.

The deployment process is fairly straightforward but if you run into any challenges just hit me up in the comments section.

Have Fun!