Question: Best way to support deployment into different environments?

[sazzer]

(Apologies if this is the wrong forum for this question)

I've got an app that I'm working on that consists of a Frontend - written using CRA - and a Backend - written in Java. We would like to support deploying this in multiple environments throughout our process, namely:

• Local development machine - This is easy. Just run "npm start" and use the "development" environment
• Local End-to-end tests - these build an infrastructure in Docker consisting of the Frontend, Backend and Database, and runs all of the tests against that
• Development CI system
• QA CI System
• Pre-production System
• Production System

The problem that I've got is - in the myriad of different systems, what is the best way for the Frontend to know where the Backend is? I've got the first two of these working so far - and they work by the use of the .env files and having a hard-coded hostname to call.

Once I get into the third and beyond - which is my next job - this falls down, because in each of the cases there is a different hostname to be calling, but with the same output of npm run build doing the work.

I've seen suggestions of:

• Hard-code every option and determine it based on the current browser location in a big switch statement. That just scares me - not only do I have to maintain my deployment properties inside my source code, but the Production source will know the internal hostnames.
• Run different builds with provided environment variables - e.g. REACT_APP_BACKEND=http://localhost:8080/backend npm run build. This will work, but then the code going into QA, PreProd and Prod are actually different and could arguably invalidate testing.
• Adding another Javascript file that gets deployed separately onto the server and is loaded from index.html. That again means that the different test environments are technically different code.
• Use DNS Tricks so that the hostnames are the same everywhere. That's just a mess.
• Serve the files from an active web server, and have it dynamically write the URL out somehow. That would work, but we're hoping that the Production one can just be a simple CDN that just serves up static files.

So - what is the best way to manage this?

Cheers

[heyimalex]

Those are pretty much your options. IMO rebuilds are the most idiomatic, followed by your third choice. Similar discussion here.

[piotr-cz]

I went with last option.
Web server loads local .env file, injects environment-specific data into index.html, then serves it to browser.

[Timer]

REACT_APP_BACKEND=http://localhost:8080/backend npm run build

Would be the most idiomatic method from our point of view!