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.
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.
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
This will update the public folder or create a new one if it does not exist.
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
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.
