How To Deploy Angular Application To Heroku

 

Being good enough to create an angular application is a great thing! Apparently, everyone knows to develop but only very few of us know to deploy the application in production environment. In this article, am planning to explain you guys about creating and deploying an angular app to Heroku. This guide covers the entire life cycle of an angular application from development to deployment.

 

Create Angular app with Angular CLI

Configuring Angular app before deploying on Heroku

Deploy Angular App To Heroku Git

 

Create Angular app with Angular CLI

 Create a basic angular project with the help of Angular CLI, you can use the following code to create an angular app.

 

ng new angular-app

 

After creating an angular application (angular-app), you have to run the app using following code. 

 

Before that, we should navigate to the app installation path,

 

Cd angular-app

 

Now, you can run the application with this command,

 

ng serve

 

 

deploy angular app in heroku

 

 

After entering the browser app URL http://localhost:4200 we will get the output as shown in following fig.

 

 

create Angular app

 

Now the initial basic angular app set up is ready. So, before deploying an app to the Heroku server we have to configure the deployment initial setup.

 

 Configure Angular App Before Deploying On Heroku

 

Initiate the local environment by running an app using ng serve whereas in production environment we have to install node services using the following command.

 

npm install express  --save

 

We’re about to install the Nodemon as it helps to develop node.js based applications. Also, Nodemon tool is good in auto-compiling and restarting the application whenever any changes occurs.

 

npm install nodemon  --save

 

After installing this tool, Create a server.js file in root path and open the file then paste the below code,

 

const path = require("path");

const express = require("express");

const app = express();

app.use(express.static(__dirname + '/angular-build'));

app.get('/*', function(req,res){

res.sendFile(path.join(__dirname, 'angular-build', 'index.html'))

});

// Start the app by listening on the default Heroku port

app.listen(process.env.PORT || 8080);

 

Next, open the package.json, change the command as nodemon server.js  for “start” object value so this will start running the application as you can see below.

 

Deploy angular app to Heroku

 

 

By chance, if this command no longer helping you to run an app then you can simply use the command “node server.js”.

 

Configure the angular app production build path to get the app bundle for your deployment.

 

Open the angular.json and add the output path & folder name which you can see in below image.

 

Deploy angular app to Heroku

 

 

Finally, use the following command to run the production build.

 

ng build

 

Once the build is running successfully, your app folder will be created in the name you had mentioned. Okay guys, now we’re ready to deploy our angular app.


Deploying Angular App On Heroku Server

 

If you don’t have an account in Heroku, you can go & create one on heroku account and choose a website node. It’s free.

 

Once the account is created then you can login to your dashboard and create a new app.

 

Heroku Login

 

Open the dashboard choose new and select the Create a new app as shown in following picture.

 

Heroku dashboard

 

 

create a angular app in Heroku

 

 

Open the angular-app-deploy and then select the deploy tab, by default it will set Heroku git as the deployment method. If you have integrated your gitup account then you can choose Gitup. In my case, am using Heroku Git since the blog is about the deployment in Heroku Git.

 

Related: How To Build Login Page Using Angular Material Design Clearly Explained


Deploy Angular App To Heroku Git

 

Download & Install the Heroku CLI.

 

After installing, log-in to your Heroku in your local machine

   

heroku login

 

Initialize the git repository your angular application path using the following code,

 

git init

heroku git:remote -a angular-app-deploy

 

Finally, deploy your app using the following code

 

git add .

git commit -am "initial commit deploy"

git push heroku master

 

deploying angular app in heroku

 

Once you are done with pushing your code. Go to Heroku account and select settings tab, there you will get the production running URL https://angular-app-deploy.herokuapp.com/

 

deploying angular app in heroku

 

You can also read: Deploying An Angular CLI App To Firebase Hosting

 

Great guys! Successfully we’re done with deploying an Angular app to Heroku. Hopefully, now you guys know to play well in production environment too! Try it from your end and let us know your favorite way of deploying. Would love to hear from you!

 

Contact form 7 Mailchimp extension by Renzo Johnson - Web Developer