Host Angular Universal App On Heroku

Understanding the deployment process of angular universal on Heroku.

Abhishek Dana
Abhishek Dana

Variscite system on module -  Your Professional System On Module (SoM) Partner: Variscite is a worldwide leader in the SoM market - serving thousands of satisfied customers for over a decade, providing a full span of solutions

In this blog we are going to learn about how we can host our angular universal app on heroku in just few steps, will also learn on how we can use heroku git to pull and push changes to heroku.

Before we began, i assume that you already have heroku account.Now let's get started by creating a simple angular application.

ng new angularHeroku

The above command will generate angular application now after generating navigate to angularHeroku in terminal and add support for angular universal with

ng add @nguniversal/express-engine

The above command will add universal support to our angular app by adding some extra files.

To test angular universal app we need to run the following command

npm run dev:ssr

Now let's start to host our application on heroku

So first create a new project on heroku and after creating back to project and use the commands to link your angular app with heroku.

git init
heroku git:remote -a "Project_Name"

Now lets modify our package.json file add the following lines in our scritps sections

"heroku-postbuild": "npm run build:ssr",
"start": "node dist/angularHeroku/server/main.js"

That's it we have successfully add universal to our project and also we have link it to heroku.

Now all you need to do is

git add .
git commit -m "your changes"
git push

After almost 15 to 20 mins you will be able to see your changes to the deployed

Angularherokuangular universal

Abhishek Dana

Hello there, I am abhishek dana Software Engineer at HeroVired currently living in India. My interests range from technology to entrepreneurship.