Deploying Angular application to Heroku

  1. Netlify
  2. Heroku
  3. Github pages
  4. Versel
  5. Google cloud
  6. Firebase
  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.
  1. Navigate to Dashboard page.
  2. Create new app. Click on create new app.
Click on create new app to create app
Creating new app.
Create app
  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",
"heroku-postbuild": "ng build --prod"
"engines": {"node": "12.16.2","npm": "6.14.4"}
npm install express path --save
//Install express server
const express = require('express');
const path = require('path'); const app = express(); // Serve only the static files form the dist directoryapp.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);
"start": "node server.js"
  1. Install Heroku CLI in your machine and add environment variable as below.
heroku git:remote -a <heroku-app-name>
git subtree push --prefix <path-to-your-subfolder> heroku master

--

--

--

Full stack developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Migrating Class Base Components to Functional Components Using React Hooks

Fundamentals of React.js

Fundamentals of React.js

Jquery appendTo And prependTo Example

5 Painful Lessons to Avoid as a Junior Developer

Joi validate create and update operations with only one schema

Joi schema

FIREBASE & REACT: Setting Up React APP with Firebase

coverImage

Introducing Server-Sent Event (SSE): An Open, Lightweight, Connection-less Push

How to use react-share npm in reactJS??

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dheeraj Thodupunuri

Dheeraj Thodupunuri

Full stack developer

More from Medium

Loading Configuration Before Angular App starts…

Github Search Project Using Angular

NgStyle in Angular with example

How to add Bootstrap to the Angular Project