Deploying angular project to heroku

Asked by Edith Newman on
9 Answers

Answer by Roberto Burch

Make a production build of our application.,Serve our dist folder after it is deployed.,Deploy our production build on Heroku.

Let’s install it.

npm i express --save

Source: https://betterprogramming.pub/how-to-deploy-your-angular-9-app-to-heroku-in-minutes-51d171c2f0d


Answer by Kaden Marin

npm install @angular/[email protected] @angular/compiler-cli --save-dev,Deploying Angular app on Heroku server,"@angular/cli”: “1.4.9”,"@angular/compiler-cli": "^4.4.6",

Under “scripts”, add a “heroku-postinstall” command like so:

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

Source: https://itnext.io/how-to-deploy-angular-application-to-heroku-1d56e09c5147


Answer by Valentin Zimmerman

From the terminal, change directories into your Angular app and create a Heroku remote.,In this tutorial we’ll cover how to deploy an Angular 2 app (built with the Angular CLI) to Heroku. We’ll also cover how to configure the app to redirect users to HTTPS and to properly handle routes.,Thanks for reading! Say hi to me on Twitter and join me at Angularcasts for in-depth, end-to-end Angular screencasts.

From the terminal, change directories into your Angular app and create a Heroku remote.

heroku create

When we push code to Heroku, the scripts listed in the package.json file will be consulted, and if we have any preinstall or postinstall scripts, they will be run at the appropriate times. What we want to do in this scenario is have the build command run after the dependencies have been installed.

// package.json"scripts": {  // ...  "postinstall": "ng build --aot -prod"},

Angular CLI apps put the @angular/cli module itself as a dev dependency, meaning that we won't be able to access any ng commands on the server. To get around this, we need to move it to dependencies.

// package.json"dependencies": {  // ...  "@angular/cli": "1.2.3",},

Create another script for the start command.

// package.json"scripts": {  // ...  "start": "node server.js"},

Heroku likes to know about which version of Node and npm you’re using during development so that it can use the same ones for production. This is helpful for preventing unanticipated behavior due to version issues. Add your specific Node and npm versions in the engines key in package.json.

// package.json"engines": {  "node": "6.11.1",  "npm": "3.10.9"}

Start by creating a new file in the application root called server.js. This will be an express application, so install and save express.

npm install --save express

Next, require express and create a simple app which serves static files from dist.

// server.jsconst express = require('express');const app = express();// Run the app by serving the static files// in the dist directoryapp.use(express.static(__dirname + '/dist'));// Start the app by listening on the default// Heroku portapp.listen(process.env.PORT || 8080);

Once the app is served over HTTPS, one remaining issue is that it will still be accessible with the unencrypted HTTP protocol. By default, unless the user specifically types in https:// ahead of the domain, they'll get the http version of the app. The desired behavior is to have all requests for the application be redirected to https. There are a few ways to do this, but the simplest one in our case is to check the protocol in all incoming requests for the app and redirect to https if necessary.

// server.jsconst express = require('express');const app = express();// If an incoming request uses// a protocol other than HTTPS,// redirect that request to the// same url but with HTTPSconst forceSSL = function() {  return function (req, res, next) {    if (req.headers['x-forwarded-proto'] !== 'https') {      return res.redirect(       ['https://', req.get('Host'), req.url].join('')      );    }    next();  }}// Instruct the app// to use the forceSSL// middlewareapp.use(forceSSL());// ...

For routing, Angular apps employ PathLocationStrategy by default, meaning that there won't be any hashes in the URL. This is generally cleaner and more desirable, but it comes at the cost of sub-routes not being accessible when someone navigates directly to them. What's required to make PathLocationStrategy work properly is some configuration on the server, and fortunately, it's fairly easy with express.

// server.jsconst path = require('path');// ...// For all GET requests, send back index.html// so that PathLocationStrategy can be usedapp.get('/*', function(req, res) {  res.sendFile(path.join(__dirname + '/dist/index.html'));});

With all of this in place, it’s now time to deploy! This part is simple. Just commit your work and push it up.

git add .git commit -m "first deploy"git push heroku master

It’s likely that we’ll want to commit our work to a GitHub or Bitbucket repo in addition to the Heroku repo. We can set up another script in package.json to handle this for us in one step.

// package.json"scripts": {  // ...  "deploy": "git push origin master && git push heroku master"},

Now after the work is committed, we just need to run:

npm run deploy

Source: https://medium.com/%40ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352


Answer by Tyson Sosa

To enable your Heroku app for CD, select the master branch under the “Automatic deploys” section. Click on the “Enable Automatic Deploys” button. If you have configured any integration service for your repo then select the “Wait for CI to pass before deploy”.,Under the Manual deploy section, select the master branch and click on the “Deploy Branch” button. This will deploy the current state of the master branch.,You can access the app which we have deployed here at https://ng-forms-validation.herokuapp.com/

Heroku needs an express server to run our Angular application in production mode. Open a command window in the root folder of the Angular application. Execute the following command to install the express server.

npm install express --save

Now create a new JavaScript file in the root folder of the application and name it as server.js. Open the server.js file and put the following code into it.

const express = require('express');
const path = require('path');

const ngApp = express();

ngApp.use(express.static('./dist/angular-forms-validation'));

ngApp.get('/*', function (request, response) {
    response.sendFile(path.join(__dirname, '/dist/angular-forms-validation/index.html'));
});

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

Add the following lines of code under the scripts section.

"postinstall": "ng build  --aot --prod"

We will update the start script under the scripts section. Currently, the start script looks like the following.

"start": "ng serve",

Update this script as shown below.

"start": "node server.js",

We need to specify the Node and NPM engines which will be used by Heroku to run our application. Get the version of Node and NPM installed in your machine by executing the command shown below.

node -v
npm -v

Add the following lines of code specifying the versions of Node and NPM.

  "engines": {
    "node": "12.13.0",
    "npm": "6.12.0"
  }

Finally, the package.json file will look like below. You can also refer to the file on GitHub.

{
  "name": "angular-forms-validation",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build  --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "bootstrap": "^4.4.1",
    "express": "^4.17.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "engines": {
    "node": "12.13.0",
    "npm": "6.12.0"
  }
}

Create a new repository on GitHub. Here I have created the repository with name angular-forms-validation. Navigate to the application root folder and open a command window. Execute the following set of commands to commit the code to your repository.

git init
git add .
git commit -m "configure Heroku build"

Get the URL of your repository from GitHub. Here the URL is https://github.com/AnkitSharma-007/angular-forms-validation. Now run the following set of commands to push the code to GitHub. Replace the URL with your own repository URL.

git remote add origin https://github.com/AnkitSharma-007/angular-forms-validation
git push -u origin master

Source: https://ankitsharmablogs.com/continuous-deployment-for-angular-app-using-heroku-and-github/


Answer by Zayd Zamora

  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/ ,  After entering the browser app URL http://localhost:4200 we will get the output as shown in following fig. 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.,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.

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

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.

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.

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

ng build


Download & Install the Heroku CLI.
After installing, log-in to your Heroku in your local machine


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

Source: https://www.agiratech.com/how-to-deploy-angular-application-to-heroku


Answer by Rory Murphy

Setting automatic deployment from GitHub to Heroku,Push changes to GitHub:,Creating basic angular project

Making use of the Angular CLI, setup a new project by running:


    ng new demo-deploy

Change directory into new project and launch it using the commands below. This will open in new browser on port 4200 by default. i.e http://localhost:4200.

cd demo-deploy
ng serve

  • Login to github and create new repository. No need to initialize repository with README

  • Open new tab in your terminal/CMD. Or hit Ctrl+C to stop running app. Then run the following commands:


    git remote add origin <new_github_repository_url>
    git add --all
    git commit -m "initial commit"
    git push -u origin master

Install them into your application by running this commands in your terminal:

npm install @angular/[email protected] @angular/compiler-cli --save-dev

In your package.json, copy


"@angular/cli”: “~11.0.5”,
"@angular/compiler-cli": "~11.0.5",

Under “scripts”, add a “heroku-postinstall” command like so:

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

You will need to add the Node and NPM engines that Heroku will use to run your application. Preferably, it should be same version you have on your machine. So, run node -v and npm -v to get the correct version and include it in your package.json file like so:


    "engines": {
    "node": "15.2.0",
    "npm": "7.0.12"
  }

Install Express server by running:


npm install express path --save

Create a server.js file in the root of the application and paste the following code.


    //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 port
    app.listen(process.env.PORT || 8080);

In package.json, change the “start” command to node server.js so it becomes:


    "start": "node server.js"

Here’s what the complete package.json looks like. Yours may contain more depending on your application-specific packages.


{
  "name": "demo-deploy",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --aot --prod "
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.5",
    "@angular/cdk": "^11.0.3",
    "@angular/cli": "~11.0.5",
    "@angular/common": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/forms": "~11.0.5",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "typescript": "~4.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@types/googlemaps": "3.39.14",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },
  "engines": {
    "node": "15.2.0",
    "npm": "7.0.12"
  }
}

Push changes to GitHub:


    git add .
    git commit -m "updates to deploy to heroku"
    git push  

Source: https://girishgodage.in/blog/how-to-deploy-angular-application-to-heroku


Answer by Tessa Townsend

Step 1: Ensure you have the latest version of angular CLI and angular compiler cli:,Configure Angular App to Deploy Properly on Heroku,Follow the below simple steps to configure the Angular App to deploy properly on Heroku. 

Now, we need to check the Node and NPM versions. Open the terminal or Node command line then type these commands.


PS G:\angular\deployment> node -v
v12.18.2
PS G:\angular\deployment> npm -v
6.14.5

To install or update Angular 10 CLI, type this command in the terminal:

npm install -g @angular/cli

PS G:\angular\deployment> ng --version

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.7
Node: 12.18.2
OS: win32 x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.7
@angular-devkit/core         10.0.7
@angular-devkit/schematics   10.0.7
@schematics/angular          10.0.7
@schematics/update           0.1000.7
rxjs                         6.5.5

Let's use the below command to generate an Angular 10 application. We name this project as "angular-app-heroku".

ng new angular-app-heroku

Here is the output of the app:

PS G:\angular\deployment> ng new angular-app-heroku
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-app-heroku/angular.json (3662 bytes)
CREATE angular-app-heroku/package.json (1270 bytes)     
CREATE angular-app-heroku/README.md (1034 bytes)        
CREATE angular-app-heroku/tsconfig.base.json (458 bytes)
CREATE angular-app-heroku/tsconfig.json (426 bytes)     
CREATE angular-app-heroku/tslint.json (3184 bytes)
CREATE angular-app-heroku/.editorconfig (274 bytes)
CREATE angular-app-heroku/.gitignore (631 bytes)
CREATE angular-app-heroku/.browserslistrc (853 bytes)
CREATE angular-app-heroku/karma.conf.js (1030 bytes)
CREATE angular-app-heroku/tsconfig.app.json (292 bytes)
CREATE angular-app-heroku/tsconfig.spec.json (338 bytes)
CREATE angular-app-heroku/src/favicon.ico (948 bytes)
CREATE angular-app-heroku/src/index.html (302 bytes)
CREATE angular-app-heroku/src/main.ts (372 bytes)
CREATE angular-app-heroku/src/polyfills.ts (2835 bytes)
CREATE angular-app-heroku/src/styles.css (80 bytes)
CREATE angular-app-heroku/src/test.ts (753 bytes)
CREATE angular-app-heroku/src/assets/.gitkeep (0 bytes)
CREATE angular-app-heroku/src/environments/environment.prod.ts (51 bytes)
CREATE angular-app-heroku/src/environments/environment.ts (662 bytes)
CREATE angular-app-heroku/src/app/app.module.ts (314 bytes)
CREATE angular-app-heroku/src/app/app.component.html (25725 bytes)
CREATE angular-app-heroku/src/app/app.component.spec.ts (978 bytes)
CREATE angular-app-heroku/src/app/app.component.ts (222 bytes)
CREATE angular-app-heroku/src/app/app.component.css (0 bytes)
CREATE angular-app-heroku/e2e/protractor.conf.js (869 bytes)
CREATE angular-app-heroku/e2e/tsconfig.json (299 bytes)
CREATE angular-app-heroku/e2e/src/app.e2e-spec.ts (651 bytes)
CREATE angular-app-heroku/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.

Let's run the Angular app with the following command:

PS G:\angular\deployment> cd .\angular-app-heroku\
PS G:\angular\deployment\angular-app-heroku> ng serve

Step 1: Ensure you have the latest version of angular CLI and angular compiler cli:

npm install @angular/[email protected] @angular/compiler-cli --save-dev
    "@angular/cli": "^11.0.2",
    "@angular/compiler-cli": "^10.0.14",
    "typescript": "~3.9.5"

Step 3: Create heroku-postbuild script in package.json. Under “scripts”, add a “heroku-postbuild” command like so:

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

Step 4: Add Node and NPM engines

  "engines": {
    "node": "12.18.2",
    "npm": "6.14.5"
  }

Step 5: Install Server to run your app

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 directory
app.use(express.static('./dist/angular-app-heroku'));

app.get('/*', (req, res) =>
    res.sendFile('index.html', {root: 'dist/angular-app-heroku/'}),
);

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Step 7: Change start command In package.json, change the “start” command to node server.js so it becomes:

"start": "node server.js"
{
  "name": "angular-app-heroku",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.11",
    "@angular/cli": "~10.0.7",
    "@angular/common": "~10.0.11",
    "@angular/compiler": "~10.0.11",
    "@angular/compiler-cli": "~10.0.11",
    "@angular/core": "~10.0.11",
    "@angular/forms": "~10.0.11",
    "@angular/platform-browser": "~10.0.11",
    "@angular/platform-browser-dynamic": "~10.0.11",
    "@angular/router": "~10.0.11",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "typescript": "~3.9.5",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.7",
    "@angular/cli": "~10.0.7",
    "@angular/compiler-cli": "~10.0.11",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "engines": {
    "node": "12.18.2",
    "npm": "6.14.5"
  }
}

You can use Git to push source code of newly created Angular App to this GitHub repository using the following commands:

git remote add origin <new_github_repository_url>
git add .
git commit -m "initial commit"
git push -u origin master

Source: https://www.javaguides.net/2020/11/how-to-deploy-angular-application-to-heroku.html


Answer by Analia Wang

Search for Heroku CLI on Google; you’ll see this link. From this link, download and install Heroku CLI.,Now, we need to log into Heroku.,Now, we want to replace this with our Angular app.

More Details Refer

Source: https://www.c-sharpcorner.com/article/deployment-of-angular-app-to-heroku/


Answer by Phoenix Shelton

In this step you will deploy the app to Heroku.,Create an app on Heroku, which prepares Heroku to receive your source code.,In this step, you will prepare a sample application that’s ready to be deployed to Heroku.

Also available via Homebrew:

$ brew install heroku/brew/heroku

Source: https://devcenter.heroku.com/articles/getting-started-with-nodejs