Deploy Angular Universal app to Heroku for Free

Deploying any web application is required more analysis about performance, cost, and whatnot. For a simple test of your application or any MVP application, I found Heroku is one of the best options. I have used it much time to verify my work or show demonstration to others.

I am assuming that you have already created an angular with Universal application. If not please check out my previous blog and create one application. The codebase which I have used for the demo has been uploaded to GitHub, feel free to check this out. Github Demo Application link

Step 1: Open the package.json file and rewrite few dependencies from ‘devDependencies’ to ‘dependencies’.

"@angular/cli": "~9.0.3",

"@angular/compiler-cli": "~9.0.2",

"@nguniversal/builders": "^9.0.2",

"@types/express": "^4.17.0",

"@types/node": "^12.11.1",

"typescript": "~3.7.5"

If you are using bootstrap 4 and installed it using npm library, the below change you need to do in angular.json file under architect > build > options section.

"scripts": [

"node_modules/jquery/dist/jquery.min.js",

"node_modules/popper.js/dist/umd/popper.js",

"node_modules/bootstrap/dist/js/bootstrap.min.js"

]

Step 2: I hope you have a GitHub account, if not please create one account and push all code to the GitHub repository.

Step 3: Create an account in Heroku or if you have it already, please create one account.