Deploying an Angular Universal App to Heroku

tl;dr — view/clone/install the ready-made repo here: https://github.com/stephengardner/universal-starter-heroku

Angular Universal is officially the newest, coolest, stable thing to hit the Angular platform. It’s finally received support and compatibility with major frameworks like the Angular flex-layout system, and if we have the option to adopt it, I can’t find any reason why not.

To some, however, the idea of “universal” — or server-side — rendering is simply just another piece to an already complicated puzzle. It’s another potential break-point of debugging claustrophobia in their full-stack application.

Developing a Universal app does have it’s own set of “gotchas”. They’re even listed in the official Universal Starter repository. But it doesn’t have to be a grim experience. And for those familiar with the ease of quick prototyping and scalable production builds using Heroku, the process can stay super simple.

Deploying a Universal Starter app to Heroku can be accomplished in just a few clicks, we first need a to make a few necessary edits to the original Universal Starter repo, which I’ll explain here. Don’t be scared, they’re not that difficult, and they don’t change the underlying structure of the app.

Looking for a shortcut?

Before I begin, you can find my repo with all of these changes made already, here: https://github.com/stephengardner/universal-starter-heroku

Installing the Universal Starter Repo

You can grab the Universal Starter Repo here, or do the following from the command line:

git clone https://github.com/angular/universal-starter universal-starter-heroku
cd universal-starter-heroku
npm i

Making the changes to Universal Starter

1. Removing yarn.lock.
   This first change we need to make is due to the fact that Universal Starter has both a package-lock.json and a yarn.lock file. If we don’t remove one of these, then Heroku will complain with the error:
   Two different lockfiles found: pacakge-lock.json and yarn.lock
If you prefer to use yarn over npm, I don’t blame you, but for the sake of this tutorial we’re just going to stick with npm, and we’ll remove the yarn.lock. Yep, just delete it.
2. Add a Procfile.
   What is a Procfile? In super-simple terms, it’s just a file that tells Heroku what command-line string to execute in order to start up your app. You can have multiple “processes” (hence “Proc”-file), but Heroku comes standard with 1 web process. So for this basic setup, we have a Profile that will tell Heroku “Hey, Heroku. Do this when you start up that web process”.
   How to create a Procfile?
   The same way you create any file, just name it Procfile with no extension, none at all.
   What goes in the Procfile?
   web: npm run start:heroku
   That’s it. Close that file, now, we’re done with it.
3. Next, edit the package.json to create a script command that we’re going to need.
   Add a line under the scripts object of our package.json and put in the following code:
   “start:heroku”: “node dist/server”.
   This command will eventually start the node server that will be built by Angular Universal.
4. Once again go ahead and edit the package.json’s scripts object and create a postinstall script.
   What is a postinstall script?
   A “postinstall” script is a script that is run automatically by Heroku after npm has finished installing all the dependencies on each build.
   In this case, we want to make sure that our dist server is built and ready for deployment by Heroku, so what we can do is kick off the build:ssr command on Heroku’s end, after Heroku has received the code.
   How do I create it?
   To do this, add another line under the “scripts” object of our package.json file and put in the following code:
   “postinstall”: “npm run build:ssr”

That’s it, your changes are all made, now the fun stuff!

Deploying to Heroku

git init
heroku login
heroku create
git add .
git commit -m "initial commit"
git push heroku master

Wait a moment for the push to complete. Remember that we’re running build:ssr on Heroku’s end, so it might take a minute or two.

Now run heroku open, and you will see your freshly deployed Angular Universal app on Heroku.

Hope this helped :)

If you have any questions, reach out in the comments and I’ll be happy to explain further.

❤️ Augie