Deploying Angular and Node Js application on Heroku

In this session, we will deploy our Node Js and Angular application on the Heroku platform.

I split this application into two folders.

The folder structure of application

Entire backend code resides inside expenseTracker folder and frontend part is inside ui_angular folder.

So we will start with creating an angular build inside expenseTracker which is our backend code. For that, we need to edit outputPath from angular.json which is inside ui_angular folder.

angular.json

In the above line, the first two dots(..) explained the need to go one level up so your application will go one level up from angular. Now go to expenseTracker folder and create a public folder.

Now run ng build inside the angular project

ng build to create an angular build

This will update the public folder or create a new one if it does not exist.

Result of the build command

Now, this public folder consists of all necessary files from an angular project for the application deployment.

Go to Heruko account and login to the portal. Create a new application

This will create a new application (in my case expensetrackerforu) on heruko on which we will deploy our code.

Now move to your Node JS application location from cd command like.,

PS F:\work\ET> cd expensetracker
PS F:\work\ET\expensetracker>

Type below commands

//Initialize git 
git init
//Add all files to git console
git add .
//Add message to your commit statement
git commit -m "Initial Commit message"
//Connect your git to heruko application(expensetrackerforu is heruko application name)
heroku git:remote -a expensetrackerforu
//Pushing all files to heroku
git push heroku master
After all successful deployment, you will get a link where you can find you deployed application

Whenever new features are added in angular, do ng build and follow below process but instead of adding all files add specific file
git add “filename”
or
add all modified files
git add -A

Rest process remains the same.

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