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.
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"
After almost 15 to 20 mins you will be able to see your changes to the deployed url.blog