CODEWITHSUNDEEP
angularherokudeployment
maryum375
maryum375

Reputation: 727

Deploying angular app to Heroku using correct environments file

I am working on an Angular4 app using the Angular CLI. I have environments files (environments.prod.ts and environments.dev.ts). I want to create two different apps on Heroku that each is using a different environments file, but both are deploying from the same git repo.

My app is delivered by a NodeJS server and running this script in package.json file:

  "scripts": {
    "heroku-prebuild": "npm install && cd ng-client && npm install && ng build",
    "start": "node ./bin/www"
  },

my Heroku procfile looks like that:

web:npm start

I know that eventually I need to run ng build --prod instead of ng build.

I was reading about environment variables I can pass to heroku environment. But how do I complete the entire cycle?

Thanks.

Upvotes: 3

Views: 1124

Answers (1)

fluxa
fluxa

Reputation: 1031

You can create your own bash script and define that logic using the environment variables you set for your app on Heroku. The env variables can be set programmatically or on your app’s settings tab on the Dashboard. You can find more info about Heroku env vars here.

  1. Configure the env variable on each of your environments on Heroku, if you are using Node.js, you can use the NODE_ENV var. For example, the Development app will be set as NODE_ENV=development and the Production app as NODE_ENV=production.

  2. Create a bash script file on the root of your project, for example: build.sh:

    #!/usr/bin/env bash

echo "Building Angular app for $NODE_ENV"

build_dev='ng build'
if [ $NODE_ENV = "development" ]; then
 echo "running $build_dev ..."
 eval "$build_dev"
fi

build_prod='ng build --prod'
if [ $NODE_ENV = "production" ]; then
 echo "running $build_prod ..."
 eval "$build_prod"
fi

  3. Run your bash script on the heroku-postbuild hook:

    ...
"heroku-postbuild": "bash build.sh",
...

You can modify the build.sh according to your needs.

Upvotes: 3

Related Questions