Environment Variable in React-js

Question

Have an environment variable in my project as

process.env.GOOGLE_MAPS_API

which a google api key and use it to render map and have the below code which is not working:

export default GoogleApiWrapper({
  apiKey: (process.env.GOOGLE_MAPS_API)
})(MapContainer)

But when I use the api key directly it is rendering the map

export default GoogleApiWrapper({
      apiKey: ('AI************************')
 })(MapContainer)

How do I use the google api key as environment variable in the above code?

Basavaraj Sonnad · Accepted Answer · 2018-02-28 09:55:57Z

2

If you are using Webpack to bundle the code, there is DefinePlugin Sample code -

// webpack.config.js
    new webpack.DefinePlugin({
  GOOGLE_MAPS_API: JSON.stringify(process.env.GOOGLE_MAPS_API)
})

app.js

console.log(GOOGLE_MAPS_API); // logs API_KEY

answered Feb 28, 2018 at 9:55

Basavaraj Sonnad

2151 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1