Deploying Angular application to Heroku

The following are some of the free sites available for hosting your applications.

1. Netlify
2. Heroku
3. Github pages
4. Versel
5. Google cloud
6. Firebase

This article will guide you on deploying Angular applications to Heroku assuming that you have an angular application developed and is ready to deploy and also assuming that your code base is available in Github repository . If your code base is not available in Github , create a repository and push your code to that repository . This article will cover:-

1. Creating an account in Heroku website.
2. Creating an App in Heroku.
3. Deploying your App to Heroku.
4. Configuring your Angular application to deploy it to Heroku.
5. Setting up automatic deployment to Heroku.

Creating an App in Heroku

Assuming that you have created an account in Heroku. Login to Heroku and follow below steps to create an app in Heroku.

1. Navigate to Dashboard page.
2. Create new app. Click on create new app.

Creating new app.

3. Give name to your app and choose the region of your choice(leave it as default , it is optional). Click on Create app. Will look into Pipeline option later as it is not required now.

Create app

4.After creating an app , you will see as below.

Deploying your App to Heroku

In Deploy menu , under Deployment section , select Github as our code base is in Github.

If its first time you are connecting to Github through Heroku , it will ask for credentials . Enter your Github credentials and connect to it.Once you connect your app to Github your screen should look like below.

Give the repository name and click search. Once you click on search , it will display all the available repositories with the given search keyword.

Select your repository and click on Connect.Once you click on connect your Heroku app will connect to your repository . On successful connection to repository 2 more sections are displayed below that Automatic deploys and Manual deploy.

For manual deployment select the branch from choose branch to deploy dropdown under Manual Deploy section and Click on Deploy Branch.If your code base is available directly in the root directory of Github repo , then your app will be deployed successfully and you would see some successful message on your screen.

Now , click on Open app button at the top of menu bar , your application will open in new tab and you will see below error page.

Above error is occurred because we just deployed our code base to Heroku app , but we have not configured our angular application yet.Next steps will guide you on how to configure your Angular applications.

Adding buildpack

Go to settings menu and in settings menu , under Buildpacks section click on Add buildpack and select nodejs as your build pack and click save.

Configuring your Angular application to deploy it on Heroku

1. Copy below lines from devDependencies to dependencies in package.json file.

"@angular/cli": "~8.3.12",
"@angular/compiler-cli": "~8.2.11",
"typescript": "~3.5.3",

Above lines tell to angular which versions of Angular CLI and typescript to use.

Note: devDependencies are those dependencies which are required for development purpose and dependencies required for production purpose . So when your application runs on any server , it looks for dependencies in package.json and installs all those dependencies.

2.Under “scripts” in package.json , add below command

"heroku-postbuild": "ng build --prod"

3.Add below lines to package.json file

"engines": {
"node": "12.16.2",
"npm": "6.14.4"
}

4.Install server to run your app.Run below command

npm install express path --save

create server.js file at the root of your application and paste below contents to that file and save file.

//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(__dirname + '/dist/<name-of-app>')); 
app.get('/*', function(req,res) {    res.sendFile(path.join(__dirname+'/dist/<name-of-app>/index.html'));}); 
// Start the app by listening on the default Heroku 
portapp.listen(process.env.PORT || 8080);

Replace <name-of-app> with your root folder name.

5.Change start command in “scripts” section in package.json file.

"start": "node server.js"

Finally , your package.json file should look as below.

6.Push all these changes to Git.

Now , you are ready to deploy your app to heroku.

7. Go to your Heroku app , in Deploy menu , under manual deployment section , select the branch you want to deploy and click deploy branch.If you want to see the build log , go to Activity menu and there you will find all the activities related to your builds.

Once build is succeeded , click on Open app button , you will see your application is up and running.

Setting up automatic deployment

To setup an automatic deployment , it is a simple step.

In Deploy menu , under Automatic deploys section , click on “Enable Automatic Deploys” button and that all you have to do for automatic deployment.

So , when you enable automatic deployment , when ever you push your code to github , deployment process will start automatically.

Steps to follow if your code base is a sub-directory of github repository

But in my case , code base is available in sub-directory of repository .

If the code base of your application is in sub-directory of Github repository then when you click on Deploy Branch , you will see some error message as in below screen shot.

Follow below steps , if you want to deploy a sub-directory of your Github repository to Heroku app.

1. Install Heroku CLI in your machine and add environment variable as below.

2. After that , open command prompt and verify if heroku is installed successfully or not.If it is successfully installed , then your command prompt should as below.

3. Open Git bash in root directory of your application and run the command : heroku login -i and enter your heroku credentials

4.Run the command as below:

heroku git:remote -a <heroku-app-name>

5.Run next command as below:

git subtree push --prefix <path-to-your-subfolder> heroku master

Above command will push the sub-folder from Git repository to heroku as a master branch.

Once you run the above command , it will automatically initiate deployment process and builds all required packages and deploys your application.

To check if your application is deployed successfully or not , navigate to Activity menu you will see as below.

Click on build log to see steps processed during build process.

Once build is succeeded , click on open app button , you will see your application is up and running.

This is the end of this article. Comment below if you find this article helpful or if you encounter any issues or for any suggestions.