Store/retrieve config settings in React project with Typescript

Question

I am currently working on a project in React and I use Typescript as language. In my project I have Webpack installed. Everything works fine but now, since we are going to production, I would like to have an easy way to store/retrieve config settings such as server URL (which is usually different between development, testing and production phases) and I got stuck. I tried to use the webpack.config.js file by adding the "externals" key:

externals: {
  'config': JSON.stringify(process.env.ENV === 'production' ? {
    serviceUrl: "https://prod.myserver.com"
  } : {
    serviceUrl: "http://localhost:8000"
  })
} 

and then try to reference the file from my tsx component files as such (take into account that the webpack.config.js is in the root folder and my components in /ClientApp/components):

import config from '../../webpack.config.js';

or

import {externals} from '../../webpack.config.js';

but I get the following error message:

'webpack.config.js' was resolved to '[PROJECT_DIR]/webpack.config.js', but '--allowJs' is not set.

Any solution/alternative to solve this issue? Thanks

Answer 1

My favorite way of solving the problem you're describing is to use Webpack's DefinePlugin:

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.

In your webpack.config.js, you can create a global constant that you can access in your application code like this:

new webpack.DefinePlugin({
    ENVIRONMENT: 'prod'
})

Then, in your TypeScript code, you can access this constant like this:

declare const ENVIRONMENT: 'prod' | 'test' | 'dev' | 'etc...';
if (ENVIRONMENT === 'prod') {
    serverUrl = 'https://example.com';
} else {
    .... 
}

Note that this method requires that you build your application separately for each environment. If instead you build your application once, and then deploy the output to multiple environments, you might consider putting this kind of configuration in a JSON file that you can swap out on a per-environment basis.