Deploying angular app to Heroku using correct environments file

Question

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.

fluxa · Accepted Answer · 2018-05-08 19:25:11Z

3

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.

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.

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

Run your bash script on the heroku-postbuild hook:
```
...
"heroku-postbuild": "bash build.sh",
...
```

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

answered May 8, 2018 at 19:25

fluxa

1,0311 gold badge10 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Israel Rodrigues Over a year ago

I'm trying to do something like this the whole day, thanks a lot <3

Collectives™ on Stack Overflow

Deploying angular app to Heroku using correct environments file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related