Deploy same Javascript webapp build to different environments

Question

I have an ExtJS application and some different environments (local machine, development, production-like test environment, and production). The ExtJS application is backed by a Java backend which is also running on either a local machine, in a development environment, a production-like test environment or a production environment (not the same servers as where the front end application lives though).

For the last two environments, I want to build ONE build of the ExtJS app and first deploy it to the test server, then when ready for release deploy the exact same build to the production server.

Question: Is it possible to somehow use the environment where the frontend is deployed, to decide which backend the ExtJS should connect to? Since the ExtJS front-end is executed on the client's machine, it doesn't know if it should connect to the production backend or the test backend.

What is the best way to solve a problem like this? How (in a clean way) is usually a javascript web application built and deployed to several different environments and communicates with their corresponding backend application?

Answer 1

How (in a clean way) is usually a javascript web application built and deployed to several different environments and communicates with their corresponding backend application?

Well, the case is not very usual. Usually the backend app would be (at least seemingly) on the same server that the frontend app is loaded from. Therefore, probably the most hassle free way to accomplish your task is to make the frontend server proxy requests from frontend app to corresponding backend server. This way frontend app will still talk to its origin server which allows you to have just one build for all environments.

The "official" way would be to use the per-environment sections in the app.json file like this:

"production": {
    "backend": "backend.domain.tld",
    // other stuff
},
"testing": {
    "backend": "backend.testing.domain.tld",
    // other stuff
},
"development": {
    "backend": "backend.dev.domain.tld",
    // other stuff
}

The backend value will end up in the build's classic.json (and/or modern.json ) file. Frontend app will see the value as Ext.manifest.backend . But this way is effectively creating different builds which you wanted to avoid. Therefore, you could just manually create several versions of classic.json / modern.json files for ONE production build like this:

• classic.json.testing
• classic.json.staging
• classic.json.production

and then use rewriting on the frontend server to respond to "/classic.json" requests with whatever json file matches the server purpose.

Yet another way is to the keep the frontend-backend mapping for ALL environments within the frontend app like this:

var ENV_CONF = {
    'frontend.testing.domain.tld': 'backend.testing.domain.tld',
    'frontend.staging.domain.tld': 'backend.staging.domain.tld',
    'domain.tld': 'backend.domain.tld' // production
};

The app would use location.host as the key and talk to the corresponding backend.