ranyeli
10/1/2017 - 11:56 PM

Angular + Heroku

How to prepare the angular app for deployment and deploy it

1.  Add a server or main file to run on production e. g. "server.js", "index.js" or "app.js" in the app root

2.  In the root of the package.json add a entry like:
    "main": "server.js"
    
3.  Add a file named "Procfile" without extension and add the following:
    web: node server.js
    
4.  Add an entry "postinstall": "ng build --prod" within the "script" entry on the package.json file
    to create production files on dist folder after deployment

5.  Make sure you add the main dependencies in "devDependendies" entry to the "dependencies" entry
    which are:
    
      * "@angular/cli": "^1.4.4"
      * "@angular/compiler-cli": "^4.2.4"
      * "@types/jasmine": "~2.5.53"
      * "@types/node": "~6.0.60"
      * "typescript": "~2.3.3"
      
- Create a git repo for an existing app and point it to an app on heroku:

  $ git init
  $ heroku git:remote -a invoice-client
  
- Create the production files for Angular 4 projects within the "dist" folder:
  
  ng build --prod
  
- Push git repo changes to heroku app:

  git push heroku master