So you are done developing your Angular application and you want it to deploy it for the world but have you ever wondered if there is a exiting tech that will allow us to deploy our app on the fly and skip all the server configuration headaches, well, Heroku saves the day for us!
Major question is what is Heroku, it is a Cloud service platform that allows developers to manage monitor and deploy applications easier and faster not worrying about any other sophisticated configurations, it is also flexible such that it can run applications written on different languages like Ruby, NodeJS Java and other popular languages, as a MEAN stack developer, Heroku is very useful when it comes to rapid deployment because this is where both of my backend (Node JS) and Front End (Angular) will be served.
In this tutorial I will show you how to setup our Angular application to be deployed in Heroku and how we can use automatic deploys when pushing our changes to Github.
1. Setting up our Angular Application
suppose I assume that you already have developed your angular application and it is ready for the configuration but if you still don't have an existing app, you can use the angular-cli to scaffold the angular project.
ng new <project-name>after creating your angular app, we can execute the command npm start to check if our application will run locally, visit localhost:4200 in your browser and you should this page.
2. Creating Repo in Github
go to github.com and click new to create a new repository.
then, let's place all our details for our new repository.
After successfully creating our repository, copy the repository url and we will configure this as our remote origin for our project, on the root of our Angular app, execute the following command.
git remote add origin <repo-url>and we will push all our changes in the repository:
git add . // this will add all files in the staging
git commit -m "initial commits in angular app" // this will commit all our files with a message
git push origin master // this will push or changes in our remot repository3. Configurations for Angular App
after we have successfully created our repository, our next step is to configure our angular app allowing it to be deployed in heroku.
The first step is to create a postinstal script in our package.json.
"postinstall": "ng build --aot --prod"This script will be run by heroku and it will build a compiled angular application using AOT (Ahead of Time).
The next step is adding Node and NPM engines in the package.json use the command npm -v and node -v to check the versions installed on your system, this will be the versions used in our package.json.
"engines": {
"node": "12.16.1",
"npm": "6.14.2"
}then we will copy our typescript version from devDependencies into the dependencies in our package.json to allow Heroku identify what version of typescript will be used, in my case the version of my Typescript is "typescript": "~3.7.5"
we will laso install enhanced-resolve as dev dependency that will be used for file paths.
to install, we will execute the following command:
npm install enhanced-resolve --save-dev Our next step is we will create a server that will allow the compiled angular application run in heroku, we will use Express server for running our application.
To install express, execute the following command:
npm install express path --save we will create a server.js file that will serve as an entry point to run our express server.
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/heroku-deploy'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/heroku-deploy/index.html'));
});
app.listen(process.env.PORT || 8080);In my case, the name of my project is heroku-deploy, you should change this on the name of your poject which found under package.json.
Our last step is e need to change the start script into node server.js as this will be the command that heroku will run to start our express server.
"start": "node server.js",and we can now push all our changes again in our master branch.
and that's it! we have successfully configure our angular app with some basic steps, our next step is to connect our repository to Heroku to deploy our app.
4. Connecting Github and Heroku
this will be our last step for us to deploy our Angular Application, this only involves pretty basic steps in order to connect our repository to Heroku.
Our first step is simply got to heroku.com, if you still don't have an account, you can create one for free, after creating one, click new then click Create new app.
enter the app name (this will be also used as your default domain name) and click Create App.
after creating a new app, we will see a page where we will connect our repository for our github, if you havent connect your github to heroku, it will ask for your credentials and it will automatically get all your available repositories.
click on Github, click search and find our Angular app repository.
Click on Enable Automatic deploys to allow Heroku to redeploy whenever new commits have been pushed in our master branch and lastly, click on deploy branch to deploy our master branch.
And that's it! all we have to wait for our angular app to be deployed in the cloud. we can see in the dashboard of our project that Heroku is building our application that is under the master branch, to check the status of the build, we can check the build logs of our project by clicking on the View build progress, this is useful especially if we have build errors on our application.
if our build is successful we will see a successful build in our dashboard.
click on Open App and this would open our Angular Application. we should see our home page as our build is successful
And we are successful deploying our Angular application in Heroku, this can now be accessed by external users as our application is already served in cloud.
for more reference, you can check out the repository in my github: https://github.com/SeijiV13/heroku-deploy-sample
you can also follow me on github for more tutorials on Web and mobile development.