Process.env variables inside index.html

[CodeJjang]

I've read the docs thoroughly as well as issues here and haven't found such a suggestion.

How about injecting the process.env values to index.html too, just like PUBLIC_URL is being injected?

It's useful in cases you want to must embed variables (like API keys) in a script tag, e.g. when using react-google-autocomplete and you have to put the following in index.html:

 <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=%SOME_ENV_VARIABLE%&libraries=places"/>

I know I can do it by ejecting and adding parameters to webpack config, but I thought there should be a better way to perform this without ejecting.

Thanks

[thien-do]

Based on our current code, you can see that only PUBLIC_URL is injected, explicitly (detail)

If you don't want to eject, then forking Create React App might be a good option!

[gaearon]

I'm open to making all variables visible to JS also visible to HTML. Wanna send a PR?

[thien-do]

@gaearon do you mean something like this: thien-do@ca8e0c5

If so I can make one. The above is just idea, I will add for config.prod.js and do some test before making a PR.

[gaearon]

Hmm yea this seems about right probably

[ddemolina]

I'm trying to make a PR but I have some questions.

I have relized env['process.env'] values has been stringified. I think it's beacause webpack.DefinePlugin needs an object like this one:

{REACT_APP_CONFIG: ""value""}

Because of that, InterpolateHtmlPlugin is replacing %REACT_APP_CONFIG% by "value" (in quotes) instead of value (without quotes)

I have three ideas to make a solution but I don't know what to use:

A) In env.js/getClientEnviroment return another version of env['process.env'] with non-stringified values.

B) Modify InterpolateHtmlPlugin.js to JSON.parse(value) (to remove quotation marks)

C) Modify InterpolateHtmlPlugin.js to remove first and last character( to remove quotation marks)

If somebody knows why DefinePluging uses stringify values and how parse them, maybe I can port the solution to InterpolateHtmlPlugin

[gaearon]

This was implemented in #1440.