Deploy Angular 4 app with Express to heroku

Angular 4 is out? I worked with AngularJS a while back. Guess I was a little out of touch with the Angular world because I didn’t even know Angular 4 came out. I thought I had skipped two major versions. Great news, it’s because the Angular developers wanted to sync up with their dependency versions, so they decided to name the new version Angular 4, which was just released in March 2017!


If you just stumbled upon this, maybe you haven’t read the last story I published: Add Sass to NodeJS and deploy to heroku. This story is not a continuation of the previous story, but if you feel like adding Sass to your app, please feel free to read it.

Create Angular 4 app

I pretty much followed what’s on the Angular site to create a new Angular 4 app, but prior to that, I made sure I have Node ≥ 6.9.x and npm ≥ 3.x.x. Some other modules fail to install if we don’t have those. Please feel free to update the versions of your node and npm.

The commands I ran to create a new Angular 4 app:

$ npm install -g @angular/cli
$ ng new my-app
$ cd my-app
$ ng serve -o

So, the first line installs angular globally. The second line creates a new app called my-app. The last line launches the server and opens http://localhost:4200 on your browser.


Add Express to Angular 4 app

We need to install express to the app.

$ npm install --save express

Then, go to the app and add an app.js file to the root level.

Express in app.js

In the app.js, I specified that my path is in “dist” and all routes will be going to “dist/index.html” for now. Why “dist”? Because files are put into the “dist” folder when we run “ng build”. The express module should be listed as a dependency in the package.json already because we ran “--save” when installing Express. To check if the app runs, go back to your terminal and run:

$ node app.js

Then, open http://localhost:3001 (you can change the port number) on your browser.


Prepare changes for heroku

This is where things get tricky. I had a lot of trials and errors, so hopefully, this is useful for anybody stumbled upon this.

My last story mentioned some changes needed for heroku, so some of you might find the following redundant.

Let’s add Procfile to the app, so heroku knows how to start the server.

Procfile for heroku

Also, heroku needs “main” (the main file to start the server) and “engines” (which versions of node and npm to install) to be specified in package.json. We need to call “ng build” in the “postinstall” script so that the “dist” folder is created on the server with files inside. Since we created the Angular 4 app through the cli, we need to move the “@angular/cli” and “@angular/compiler-cli” from the “devDependencies” to “dependencies” so that heroku installs them.

package.json

I already have sass in my “postinstall” script, so if you don’t use sass, just remove it and take off the “&&” sign.

In order to deploy the app to heroku, check in all your code to GitHub. GitHub is free for public repos, so don’t be shy to use it :) If you have never used GitHub, this is a good tutorial on GitHub. Be sure to come back after all your code is ready on GitHub!


Lastly, deploy the Angular 4 app to heroku

If you don’t have heroku cli, please install it. After installing it, close your terminal and open a new one. Change your directory back to where your Angular 4 app is and run the following to make sure heroku is installed:

$ heroku --version

Then, run:

$ heroku create
$ git push heroku master

The first line tells heroku to create a new app on the server. Heroku will assign a random url for you https://random-url.herokuapp.com/. The second line pushes all the code in the git master branch to heroku.

While the deployment is going on, go to your app > Resources on the heroku UI. Click the “Edit” icon.

Turn on the dyno on heroku

Click the toggle and “Confirm” button. By turning it on, the container is now ready to serve your app.

Confirm turning on the dyno on heroku

Check if your deployment is done on the terminal. If it is, navigate to the url to check out your Angular 4 app!


Side note: If you don’t like the random url, you can rename it by running:

$ heroku apps:rename newname

But, if you already created an app on heroku and want to associate it with this app, run:

$ git remote rm heroku
$ heroku git:remote -a newname

That’s it! Hopefully, this helps with your project.