React setupProxy.js for different environments

Question

I am very new to react but my issue is really around strategies for deploying my app to different environments (dev, QA, UAT). My react app makes an api call and I am using a setupProxy.js to define the url for that api, works great locally. I have also built the api and it is hosted separately. My question is how do I change the setupProxy.js so that the url respects the environment it's deployed to. Right now I'm using AzureDevops and Octopus for building and deploying. It seems like everything gets compiled so trying to change this file after is built won't work. Just looking to see what your deployment strategies are.

Here is my setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');


const baseUri = 'http://localhost:5000/api';


const proxy = {
    target: baseUri + '/UsageRequest/ScreenScrapeErrors',
    changeOrigin: true
}

const proxy2 = {
    target: 'https://www.stackoverflow.com',
    changeOrigin: true,
}

module.exports = function (app) {
    app.use(
        '/SceenScrapeErrors',
        createProxyMiddleware(proxy)
    );


    app.use(
        '/jobs',
        createProxyMiddleware(proxy2)
    );
};

I would like to modify the baseUri variable as it's getting deployed to the different environments.

Answer 1

This blog post may help you: https://octopus.com/blog/javascript-configuration

You can move your environmental configuration to a JSON configuration file and modify your app to read the values from that value.

Octopus can replace variables in JSON configuration files during deployment using the structured configuration variables feature .