Deploying MEAN Applications - MEAN Machine - A beginner's practical guide to the JavaScript stack (2015)

MEAN Machine - A beginner's practical guide to the JavaScript stack (2015)

Deploying MEAN Applications

Up to this point, we have been working locally on our computers when building all these applications. We have been creating our files, starting our server courtesy of Node and Express, and testing on http://localhost:8080.

The great things we create won’t be visible to the rest of the world! We’ll need to deploy our applications to some hosting service so that we can access it from a website.

There are many different ways to deploy sites to an online server. For our purposes, it is best to look for an online host that specializes in hosting Node applications.

Currently, the most popular server configuration is the LAMP stack (Linux, Apache, MySQL, and PHP). Since we are using Node instead of Apache, MongoDB instead of MySQL, and Node instead of PHP, it makes sense to look for a host that specializes in this sort of thing.

Great Node Hosts

Each of these hosts provides great features and are good choices for deploying your applications.

Modulus - We’ve been using Modulus to host MongoDB databases in some of our chapters. They also provide great Node hosting and feature really good support.

Digital Ocean - Digital Ocean is a VPS (virtual private server) provider so you are tasked with configuring and setting up your own server. Digital Ocean offers SSH access and plans that start at $5/mo. They also provide server images to install a Node environment with just a click of a button.

Heroku - Our personal favorite for hosting Node applications. Deploying Heroku applications is extremely easy and the command line tools they provide are very simple to get started with. They also let you host smaller applications for free, though there are limits to the amount of traffic they will support.

Honorable Mention

These hosts have great reputations, but we haven’t used them personally:

· Joyent - The creator’s of Node offer great cloud computing options with scalable pricing.

· Nodejitsu - An easy to use hosting solution created by some of the earliest contributors to Node.

Heroku provides a great balance between price, features, support, uptime, and tools available. We’ll be looking at how to deploy a MEAN stack application to Heroku. This process is similar to other hosts and these techniques can be used across most of them.

Deploying to Heroku

Heroku is known for making server configurations easy and painless. It allows us to build faster and focus on the details of our application rather than trying to configure our own servers.

We’ll be deploying the full MEAN stack application that we have been working on throughout the book - our User CRM. The deployment is a fairly pain-free process and we’ll have our full application on the web in mere minutes.

Let’s get started.

Create a Heroku Account

Go ahead and go to Heroku.com and create your free account. As you can see, the dashboard is incredibly simple and user friendly. It gives us this great Getting Started with Heroku dialog where we can find the instructions for each type of app you can deploy.

Heroku Dashboard

Heroku Dashboard

We’ll be walking through Heroku’s Node deployment instructions. You can follow along with this book and reference that link in the future since they provide a large amount of scenarios for deployment.

Tools Needed

You’ll need a few things to start your deployment:

· Node and npm (pretty sure you already have this one installed)

· Heroku Toolbelt

· Git

Git Repository

First, we will need to turn our application into a git repository. First we are going to create a local git repository and then have a git remote pointed at Heroku. We will then have the ability to push straight to Heroku.

If you already have been using a git repository for your projects and have been working on GitHub or BitBucket, awesome! You already have a git repository and can skip this step.

To create your local git repository, make sure you have git installed and have access to the git commands in your console.

cd into your project and type the following to create a git repository:

git init

That will create your git repository. Now we will need to add your files to the repository and commit them.

git add .

git commit -m 'adding first files'

Git Repo Creation

Git Repo Creation

Now that we have our git repository ready to go, we can move onto the Heroku side of things.

The Heroku Toolbelt

The toolbelt will give us access to the Heroku Command Line Utility which we will need for deploying to Heroku.

Heroku Toolbelt

Heroku Toolbelt

After we install the Toolbelt, we’ll have access to the heroku command. Go into your command line and type:

1 $ heroku

Heroku Command

Heroku Command

Now you can see all the commands available to us. We’ll only be using a few of them when deploying to Heroku in this chapter. The first of these will be logging in.

Logging Into Heroku

This is the way we can link our local desktop to Heroku. We will authenticate from the command line so that Heroku will know that we are authorized to send applications for deployment. This is a fairly easy process.

Just type:

1 $ heroku login

Heroku Login

Heroku Login

We’ll authenticate and Heroku will also ask you to upload a public SSH key. Since I already have my SSH key on Heroku, it did not prompt me for that. Now let’s move on and start building a very simple application so that we can deploy it to Heroku.

Deploying Our User CRM App

We will be taking the User CRM application that we created and deploy that to Heroku so that we can see exactly how to make our MEAN application live.

This is a very simple process. From within the folder of your git repo, we take the following steps:

1. Create a remote repository (called heroku as opposed to our main origin remote repository) so our application knows where to push our deployable code

2. Push the repository!

Let’s create the remote repository:

1 $ heroku create

Heroku Create

Heroku Create


Heroku Warning

Heroku’s warning here about updating Git is misplaced. Their blog says to update to version 1.9.5, which is what we are using here. We’ve reached out to see what can be done about this and will update this chapter with information on that.

Just keep moving forward since this warning does not affect our ability to use git or the Heroku Toolbelt.


We can now see that our remote repository has been created by typing the git command:

1 $ git remote -v

Git Remotes

Git Remotes

The heroku create command will create a random name for our application, in this case, fathomless-stream-3632. This means that our application will soon be reachable at http://fathomless-stream-3632.herokuapp.com.

That isn’t really ideal so let’s rename that to user-crm. We can see the apps we have created with the command heroku apps. Then we’ll go ahead and rename it.

1 $ heroku apps:rename user-crm --app fathomless-stream-3632

If the name of the application we want is taken (user-crm is taken since we used it for this book), then we will have to change the name or add some numbers to the end of it. Let’s add 123 to the end of that name.

1 $ heroku apps:rename user-crm-123 --app fathomless-stream-3632

You can also bypass all this renaming business by naming your application from the start:

1 $ heroku create user-crm

Eventually when you want your application to go live, you probably won’t want people to visit it at http://xxxx.herokuapp.com. Heroku provides an easy way to point any of the domains you may own to this application so don’t worry. We’ll revisit how to point a domain to our Heroku app later in this chapter.

Image

Image

Deploying Code

Now that we have everything in order, we’re going to go ahead and get our site up to Heroku! This takes one simple git command. We are essentially saying, push all of our local git repository code to the remote repository hosted by Heroku.

1 $ git push heroku master

This informs git that we would like to push to the newly create heroku repository and the master branch (which is the default git branch that was automatically created for us).

Heroku Deploy

Heroku Deploy

We can see as Heroku goes through a great many things when deploying our application. It sees that our we have a Node based application. It will then go through adding the dependencies by reading our package.json file. It will also start our Node server by running the file declared as mainin the package.json file. That file will be server.js in our case.

Ensure One Instance Is Running

We want to be sure that our app is running and that Heroku has started a server for us (called dynos). Type the following to get confirmation:

1 $ heroku ps:scale web=1

If we go into our dashboard, we are able to see under the Dynos section, that we have one dyno and it is the free tier. You can quickly scale your applications up or down by editing how many dynos are used.

Heroku Dynos

Heroku Dynos

Our application is now ready for viewing!

View Our Application in Browser

We’re finally at the part that we’ve been waiting for since the beginning of the book! Seeing our full stack MEAN application in the browser!

If you remember the crazy random name that Heroku generated for you, or renamed the app yourself, go ahead and visit that in browser:

https://user-crm.herokuapp.com/

Heroku also provides a shortcut to open your application in the browser using the command line:

1 $ heroku open

It’s magic! We have our site in the browser just like we wanted.

Defining a Specific Run Command

Sometimes we may have a specific command that we want to run when Heroku gets its hands on our application. This could be using a task runner to start the server like grunt or gulp (we’ll get into gulp in the next chapter). Heroku will look at the main attribute in our package.json file and will also look under scripts if we have defined that attribute.

There is another way to tell Heroku exactly what command we would like to see run. You can do this by defining a new file in the root of our project called a Procfile.

Just create a Procfile in the root of your project and define the start command like so:

1 web: node server.js

This tells Heroku that when deploying to the web, this command should be used to start our application. Now when we git push heroku master, Heroku will run that specific command and our site will be live.

Using a Current Heroku App

If you switch to a different computer and want to access the Heroku app that you have already been using, there are a few steps that have to be taken. These steps assume you are on a new computer and have not yet installed Heroku.

· Download the Heroku Toolbelt

· Login: heroku login

· Add your public key: heroku keys:add

· Pull down your current application heroku git:clone -a app-name

· Make your improvements

· Git add and commit your changes

· Push back to heroku: git push heroku master

With these simple steps, you can jump onto any computer and immediately grab your current projects.

Using Your Own Domain

Heroku provides very simple steps for adding a domain to an app. For this example, we will assume you have a domain named www.supercool.com.

To add that domain to your application, you will need to do two things:

1. Tell Heroku which domains are matched to this application

2. Configure your domain’s DNS to point to Heroku

The first part of this is very easy. We will tell Heroku what domain we will need using the following command:

1 $ heroku domains:add www.supercool.com

Once that step is done, you will need to make sure that you have a CNAME record is generated wherever you have your domain registered. CNAME creation varies across domain registrars, but should look something like the following:

Record

Name

Target

CNAME

www

user-crm.herokuapp.com

This may take some time to propagate before you will be able to visit http://www.supercool.com in your browser. This usually depends on the registrar but it usually averages anywhere between 10 minutes to 3 hours.

If you would also like to add the root domain (supercool.com), then you will have to repeat the steps above.

As long as you follow the two steps, you will be able to see your site at your domain in no time!

For more information, visit the Heroku Domain Docs. They give more detailed information about more types of domains (wildcards, sub-domains) if you are interested in those. They also provide more instructions for CNAME configuration across a few other registrars.

Conclusion

We have finally built a full MEAN stack application and have it online. Many of the techniques learned so far in this book can be applied to different applications and use cases.

No matter what you are trying to build, Heroku is a fast and easy way to deploy your apps/websites.

Moving forward, now that we’ve built an app and deployed it, let’s look at different techniques to make our development process easier. We’ll be looking at how to use Gulp, a task-runner, and Bower, a front-end resource manager. These two tools will be able to speed up our workflow immensely.