Add environment variables to manifest.json files

Is your proposal related to a problem?

In the application, we have several places where we put the values that are in the manifest file, like the theme color, the app name, etc. Unfortunately, if we need to change them one day, we would need to do it everywhere we use them.

Describe the solution you’d like

It would be of very good use if we were able to insert those names in an environment variable file, such as .env, and use it in the manifest.json as well, just like we do in the index.html file.

{
  "short_name": "%REACT_APP_SHORT_NAME%",
  "name": "%REACT_APP_NAME%"
}

Describe alternatives you’ve considered

The only solution to have it automatic would be to or eject the configuration and apply the JSON files to the compilation files, or to add another compilation script that would run during the build process.

[paulmwatson]

@Marian0 In webpack.config.js I used CopyPlugin which has a transform method that you can do string replacements on. e.g.

module.exports = {
...
  plugins: [
    new CopyPlugin([
      {
        from: 'manifest.json',
        transform(content, path) {
          return content
            .toString()
            .replace(
              'process.env.API_BASE_URL',
              process.env.API_BASE_URL
            )
        },
      },
...

This works in dev and builds.

[bkeating]

Would love to env var support build into CRA for any/all(?) public dir files.