Refer Video : https://www.youtube.com/watch?v=54km9J4Wh9s
Create a new angular project
ng new demo-deploy
Push project to github
git remote add origin <new_github_repository_url>
git add --all
git commit -m "initial commit"
git push -u origin master
Install them into your application by running this commands in your terminal:
npm install @angular/cli@latest @angular/compiler-cli --save-dev
In your package.json, copy from devDependencies to dependencies
"@angular/cli”: “~11.0.5”,
"@angular/compiler-cli": "~11.0.5",
Under “scripts”, add a “heroku-postinstall” command like so:
"heroku-postbuild": "ng build --aot --prod "
This tells Heroku to build the application using Ahead Of Time (AOT) compiler and make it production-ready. This will create a dist folder where all html and javascript converted version of our app will be launched from.
"typescript": "~4.3.5",
Locally we run ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading.
Install Express server by running:
npm install express path --save
Create a server.js file in the root of the application and paste the following code.
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static('./dist/angular-heroku'));
app.get('/*', function (req, res) {
res.sendFile('index.html', { root: 'dist/angular-heroku' }
);
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
Running to generate ./dist/xxx
ng build --prod
Run server from terminal
node server.js
Check the connection from
http://localhost:8080/
In package.json, change the “start” command to node server.js so it becomes:
"start": "node server.js"
git add .
git commit -m "updates to deploy to heroku"
git push
At this point, your application on Heroku will automatically take the changes from GitHub and update itself.
Also, it’ll look into your package.json and install packages.
It will run the postinstall and then, node server.js to spin up your application.
You can check Activity tab and open Build log to see how it actually runs.