Smart Code Hub
Published in

Smart Code Hub

Host Angular Universal App On Heroku

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



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Neeraj Dana

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular,React,React-Native,