Heroku pipeline with Angular 2 environments

Question

I built an Angular 2 project using the Angular 2 CLI and was able to deploy the application to Heroku using this tutorial .

Now I would like to create a pipeline for different application environments (dev, staging, production, etc.).

In my .json package, I have "postinstall": "ng build -prod" , which creates a production assembly of my code, which ends my application. Is there a way that I could change -prod based on CONFIG_VARS that I would use in setting up Heroku? For example, he would say "postinstall": "ng build -dev" for the dev environment or "postinstall": "ng build -staging" for the middleware. Or will I need to set up my project differently?

Answer 1

Short answer: No, you will need to do something else.

Explanation: The Npm postinstall script runs when building Heroku clubs, when you do a git click on the first Heroku application in your pipeline. Subsequently, when you “promote” releases through your Heroku pipeline (for example, from “development” to “production”), the pre-built Heroku plug moves forward “as is” and is not restored.

Therefore, let's say you have a var configuration configured in your development application that will set the argument that you pass "ng build" to "dev". This means that when you git click on your development application, the pool will be created using the "dev" options. This is normal for a "development" application. HOWEVER, when you subsequently promote "production" and "production," you will promote a pre-built slug that was built using the "dev" options, which is NOT what you want.

So, to get the functionality you need, you will need to consider a different approach.

One way to do this is to run the "ng build" script in the "npm prestart" phase. This should work and allow you to use Heroku configuration files to modify your Angular2 application, depending on the phase of the Heroku pipeline on which they are deployed. However, I usually DO NOT recommend this approach. This will cause your "ng build" to run every time "npm start" starts, which quite often happens on Heroku (i.e. at least once every 24 hours or so, plus every time, when your Heroku revolvers restart for any reason). This will cause your application to experience more downtime than necessary. EVERY time your dinosaurs reboot. Not a good idea, usually.

Instead, it is better to use the Angular2 application for your server when it is initialized and return to the server any specific pipeline parameters that your Angular2 application requires based on the regular Heroku configuration configurations.

Answer 2

If you run your application in the Heroku node environment, you can try to take a look at this solution to avoid hard coding your environment variables and security keys in the repositories: https://medium.com/@natchiketa/angular-cli-and-os- environment-variables-4cfa3b849659

I highly recommend also taking a look at his first answer, which presents a dynamic solution for creating an environment file at build time: https://medium.com/@h_martos/amazing-job-sara-you-save-me-a-lot-of -time-thank-you-8703b628e3eb

They may not be the best solutions, but the trick is to set up projects differently each time.