How to host your angular web app/website on heroku — For FREE !!
In this tutorial i will be sharing how to host your local angular app on heroku. I hope you have developed a angular app and its working on local machine. This tutorial will cover:
- Setting automatic deployment from GitHub to Heroku (Heroku will automatically fetch your files from github repo and deploy it to public internet).
There are three sections, Let’s Start
Section 1) Add a server.js file in app root folder (Mandatory). This file will help heroku to setup and run a server for your website and locate build package where website is build similar to as you do with ng serve on local machine.
Step 1: Create a new file with name server.js in root of your existing angular app and paste below code in it.
const express = require(‘express’);
const app = express();
const PORT = process.env.PORT || 5000;
// Serve only the static files form the dist directory
app.use(express.static(__dirname + ‘/dist/app_name’));
app.get(‘/*’, function(req, res) {
res.sendFile(path.join(__dirname + ‘/dist/app_name/index.html’));
});
// Start the app by listening on the default Heroku port
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}…`);
});
This server.js file is importing express module, and this is a Node.js framework that makes it easy to get our server up and running.
So to install express module, type below command:
(There is a double dash before save)
npm install express — save
Step 2: Open and edit package.json file
Inside scripts make sure each of these fields are present
“scripts”: {
“ng”: “ng”,
“start”: “node server.js”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“preinstall”: “npm install -g angular-cli”,
“heroku-postbuild”: “ng build — prod”
},
And, add below field inside dependencies scripts :
“express”: “^4.17.1”
Section 2) Creating a GitHub repo and Pushing your project to it.
Step 1 : Go to github and create new repository by clicking “+” icon next to your profile option.
You will get a window as below.
> Name your repository
> Public/Private ( As per your concern )
> READ ME initialization ( No need to do this )
Step 2: Open your terminal/CMD window and then run the following commands:
git remote add origin <new_github_repository_url>
git add .
git commit -m “initial commit”
git push -u origin master
- First command connects your local repo ( project files ) to your newly created repo at github.
- Second command adds a change in the working directory to the staging area. ( If you feel this confusing then read about working with git first )
- Third command is used to save your changes to the local repository (App files ).
- Fourth command pushes your local repo (code) to github repo.
Congratulations !! Your app is on github. Ready to be deployed.
Section 3) Setup Automatic Deployment in Heroku
After this step, every time when you will push your code to github heroku will fetch your code in its codebase and deploy it automatically. So, there is no need to upload your changes on heroku, just connect your newly created github repo to heroku and then magic will happen.
Log on to heroku ( Or sign up, Its Free !! )
Step 1: Login to your dashboard and create a new app.
> Name your app and click on create. And you will be having window similar to image given below inside your project option.
Step 2: Click on the Deploy menu. You will be having this section there.
Under the Deployment method, select GitHub. It will ask you the github authentication and after that enter the name of the your newly created github repository where your webapp is uploaded and click Search. Once the repo is shown below, click Connect.
A now it will show connected to <repo> by <your name>.
Step 3: There are 2 sections under Deployment Methods
- Automatic Deployment
Click on the “enable automatic deploys” to make heroku fetch your code everytime you push changes to github.
2. Manual Deployment (If you need manual deployment else skip this)
Click Deploy Branch, this is to push our github code to heroku. But manually.
Well Done !! Now heroku will host your app on its subdomain (eg. app-name.heroku.com)
Click on “Open App” button in the right top corner. And have a look of your hard work.
If there is any error, please wait for a while. Sometimes it shows application crash error for about 5 minutes after launch but after that it shows what is expected.
If error persists after 5–10 minutes, then Download and install the Heroku CLI. After installing cli type these commands on terminal/cmd:
heroku login
( Type and authenticate your credentials )
2. heroku logs
(if needed select your app with -a <app name>, eg. heroku logs -a app_name)
After this command, you will be having logs of your app. In this log file, there will be some error codes and using these error codes, you can find out the solutions on heroku dev website.
