Angular CLI Deployment: Host Your Angular 2 App on Heroku
- Push to Heroku to Deploy the App
- // server.js const express = require(‘express’); const app = express(); // Run the app by serving the static files // in the dist directory app.use(express.static(__dirname + ‘/dist’)); // Start the app by listening on the default // Heroku port app.listen(process.env.PORT || 8080);
- In the tutorial we’ll cover how to deploy an Angular 2 app (built with the Angular CLI) to Heroku.
- Once the app is served over HTTPS, one remaining issue is that it will still be accessible with the unencrypted HTTP protocol.
- No need to build the app locally and commit the dist folder to version control.
The Angular CLI is all around awesome and gives us a ton of time-saving features out-of-the-box. One that I love is the development server it comes with. If you’ve used the Angular CLI, there’s a…
@ryanchenkie: Ready to deploy your @angularjs app? Learn how to host an Angular CLI app on @heroku: …
to see your app.
This is great for development purposes, but what do we do when it comes time to put our apps into production? The CLI comes with a command to deploy to GitHub Pages, which may be just fine for your use case. However, there’s a good chance that you’ll need more fine-grained control over how your app is served when it’s ready to go live.
Beyond this, the Angular CLI doesn’t come with a command for, nor is it concerned with, how we put our apps into production. Those details are up to us. This is fine, but it can sometimes be confusing to figure out how all the pieces come together to actually deploy an Angular 2 app.
In this tutorial we’ll cover how to deploy an Angular 2 app (built with the Angular CLI) to Heroku. We’ll also cover how to configure the app to redirect users to HTTPS and to properly handle routes.
Get the code and check out the live demo. Also, stay tuned to Angularcasts if you’d like the screencast version of this tutorial.
The beauty of Heroku is in its simple model: push your code to a remote Heroku repo and it will run everything necessary to deploy it. The key is that we need to tell Heroku a few things about how the app should be deployed.
Start by creating a Heroku account if you haven’t already done so. Once you have one, be sure to install the Heroku CLI for your platform and log in with your credentials in your terminal. Follow Heroku’s guide for the full instructions.
From the terminal, change directories into your Angular app and create a Heroku remote.
directory with all the files necessary to run the app. We can pass a number of options with this command that let us specify things like whether it’s a development or production build, what the output path should be, and perhaps most importantly, whether we want the app to be compiled ahead of time. With ahead of time compilation, the compiler itself is left out of the build, meaning we get a much smaller overall app size. This is recommended for all production applications.
command be run on the server itself.
scripts, they will be run at the appropriate times. What we want to do in this scenario is have the build command run after the dependencies have been installed.
folder to version control. What’s more is that this all happens automatically when we push our code to Heroku.
file a bit.
so that Heroku can boot up the application server at the end of the deployment process.
There are a few different ways we could serve the application once it gets to Heroku. For example, we could install and run a simple server with something like http-server. However, this won’t allow us to have control over the details of how the app is served, which means it’s not the best approach.
folder. This will easily allow us to handle routes properly and redirect to HTTPS for all requests.
. This will be an express application, so install and save express.
All non-trivial applications should be run over HTTPS. If you don’t already have SSL set up for your Heroku app, follow the steps to do so.
will just be allowed to pass through.
work properly is some configuration on the server, and fortunately, it’s fairly easy with express.
request that comes in for any route. This will allow Angular to handle the routing instead of the server. Now when we navigate directly to a sub-route (instead of clicking our way there in the app), the route will be served as expected.
With all of this in place, it’s now time to deploy! This part is simple. Just commit your work and push it up.
to handle this for us in one step.
Now after the work is committed, we just need to run:
file is needed, along with a custom Node server. Setting the deployment up in this way is advantageous because we now have a lot of control over how the app is served.
Thanks for reading! Say hi to me on Twitter and join me on Angularcasts for in-depth, end-to-end Angular screencasts.