Change React Webpack application file and api path

Question

I'm working on an app that is going to be deploy on-prem (no cloud) and there are requirement to deploy the application to different server path. For example in one company it might be company1.com and on another it might be company2.com/app because they already have a server and want to deploy it on the same server under a different context path.

The problem is in Webpack we compile the app and create HTML+JS+CSS files. The HTML and JS files have the server context path (part after the domain name) hardcoded into the code. For example loading the JS files will be done with <script src="/hello.js" /> so if the app will be deploy to company2.com/app I need the script tag to be <script src="/app/hello.js" />

I'm looking for way to change the server context path dynamically preferably using environment variable.

For compare we use Spring on the server side and there we can define env-var server.contextPath which will change the context path in which the app works.

If it changes anything the app is deployed as docker image.

Any ideas how to implement such thing?

Answer 1

That's an interesting question, and there are some ways you can resolve that. I'll list some options below.

I'm looking for way to change the server context path dynamically preferribly using environment variable.

I will list some other options, but the first one is using env vars.

Using Environment Variables When Building

webpack has a plugin (DefinePlugin) that allows us to set environment variables to the javascript code.

Then, you will be able to get those environment variables using process.env. For exemple, if you have the following configuration:

plugins: [
    new webpack.DefinePlugin({
        fruit: JSON.stringify('orange'),
        MY_VAR: JSON.stringify('value'),
        API_URL: JSON.stringify('http://some-api')
    })
]

Then, in your code you can get them using:

console.log(process.env.fruit); // "orange"
console.log(process.env.MY_VAR); // "value"
console.log(process.env.API_URL); // "http://some-api"

This said, you can do something like this:

Passing environment-dependent variables in webpack

Then, for example, you can just use process.env.API_URL in your code, instead of using it hardcoded.

IMPORTANT: this method will only work if you have can build your code before releasing it to production. (I think it's not a problem for you).

I think this is the best option, because your code will be "clean", it is more "customizable" and it will "simply work", regardless your environment.

Using a Map

You can have some application logic to decide your variables. For example, you may "look" to the URL (i.e. location.href) and decide the values to use based on this address.

let api;

if (domain === 'domain1.com') api = 'api1';
if (domain === 'domain2.com') api = 'api2';

Using an Extra HTTP Server

You can always point to a hardcoded path in your server, lets say /api. Then, in your code, you will point to /api. So, all your requests will go to /api.

You will need to have an HTTP Server (it can be a Nginx, a NodeJS, whatever you want) listening to /api and then have this "routing" logic there.

It will work fine, but you will need to control the deployment of this HTTP server. This may not be a good option for you, but it may suit your needs.

One advantage is that you'll be able to only change the code of this HTTP server when changing some routes, without need to deploy your front-end code again.

---

I think that sums it.

Hope it helps!