How to Deploy Angular Application to Heroku
It has always ‘seemed’ easy until you try it. Having deployed other apps to heroku, I encountered series of challenges deploying Angular 4 recently but I pulled through finally. So am writing to explain in details how I did it.
This article will show you guides on deploying your Angular 2/4 apps easily to Heroku, more importantly, avoiding common pitfalls.
This is not a tutorial to help you learn Angular. It will be assumed you have completed development and ready to deploy. However, we’ll setup basic angular project from start and deploy. This tutorial will cover:
- Creating basic angular project
- Setting automatic deployment from GitHub to Heroku
- Deploying Angular app on Heroku server
Setup Your Angular Application
Making use of the Angular CLI, setup a new project by running:
ng new demo-deploy
From this, our application will be named
demo-deploy . Allow for few minutes to setup the new project and install npm packages.
Change directory into new project and launch it using the commands below. This will open in new browser on port 4200 by default. i.e http://localhost:4200.
Our basic angular app is ready and running — locally. Lets push to github
Create its GitHub repo and Push
Here, we’ll be creating a fresh github repository and pushing our app to it.
- Login to github and create new repository. No need to initialize repository with README
- Open new tab in your terminal/CMD. Or hit Ctrl+C to stop running app. Then run the following commands:
git remote add origin <new_github_repository_url>
git add .
git commit -m "initial commit"
git push -u origin master
Now our app is on github.
Setup Automatic Deployment from GitHub to Heroku
Advantage of this step is so that, once you push a change to your github repository, it automatically pushes the change to your codebase on heroku, which then takes effect live on the web. This means, you’ll only have to push your changes to github and its done.
If you dont have an account yet, create one on heroku website. Its free. Login to your dashboard and create a new app.
Click Create app
In the Deploy menu, under Deployment method, select GitHub. If you have not done this already, it will ask you to login your github account so it can connect to it.
Enter the name of the GitHub repository and click Search. Once the repo is shown below, click Connect. Viola!
Uh, wait. Two more simple steps.
- Under Automatic Deploys, select the master branch and click Enable Automatic Deploys.
2. Under Manual Deploys, click Deploy Branch. This is to push our fresh code to heroku.
Okay, we’r done with this stage really. It might take a little while but will show you successfully deployed message once done, like so:
If you click View, a new tab will be opened but your app will not display. Next series of steps will guide you on configuring and spinning up your angular app.
Configure Your Angular App to Deploy Properly on Heroku
The following are production-ready steps to easily and properly deploy your app without hitches.
Ensure you have the latest version of angular cli and angular compiler cli.
Install them into your application by running this commands in your terminal:
npm install @angular/cli@latest @angular/compiler-cli --save-dev
In your package.json, copy
from devDependencies to dependencies
Create postinstall script in package.json
Under “scripts”, add a postinstall command like so:
"postinstall": "ng build --aot -prod"
EDIT: You might get error running the postinstall command. This works instead:
"heroku-postbuild": "ng build --prod"
This tells Heroku to build the application using Ahead Of Time (AOT) compiler and make it production-ready. This will create a
Add Node and NPM engines
You will need to add the Node and NPM engines that Heroku will use to run your application. Preferably, it should be same version you have on your machine. So, run
node -v and
npm -v to get the correct version and include it in your package.json file like so:
Copy typescript to dependencies.
"typescript": "~2.3.3" from devDependencies to dependencies to also inform Heroku what typescript version to use.
Install Enhanced Resolve 3.3.0
Run the command
npm install email@example.com --save-dev
Install Server to run your app
Locally we run
ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading.
Install Express server by running:
npm install express path --save
Create a server.js file in the root of the application and paste the following code.
Change start command
In package.json, change the “start” command to
node server.js so it becomes:
"start": "node server.js"
Here’s what the complete package.json looks like. Yours may contain more depending on your application-specific packages.
Push changes to GitHub:
git add .
git commit -m "updates to deploy to heroku"
At this point, your application on Heroku will automatically take the changes from GitHub and update itself.
Also, it’ll look into your package.json and install packages.
It will run the postinstall and then,
node server.js to spin up your application.
You can check Activity tab and open Build log t o see how it actually runs.
You should not run into any issue. I followed through while writing this post also and.
Viola!! Our Angular app is Ready and LIVE!
For following through till this stage, Thank you.
You can follow me on Twitter or here on Medium.
Say cheese! … comment below, also if you encountered any issue or want to suggest better ways.