Profile Picture

Lazy Panda

Developer

Posts
56
Comments
48
Likes
76
Posts
56
Comments
48
Likes
76
sidebar

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.

heroku-deployment

Step 4: Create one application there as well.

heroku-ng-deployment

Step 5: Connect your GitHub account with your Heroku application and deploy it.

angular-heroku-deployment

 

That's it, please check out my video on youtube as well. 

 

Happy Coding!

- LP