Access Node env variables on both server and client

[stay2be]

Given the following example:

The Google Analytics Tracking Id is configured via an environment variable. In the config file I can easily write process.env.GoogleAnalyticsTrackingId or whatever.

How can I access this value on the client for the npm package 'react-ga', which needs to be initialized in the code client.js:

...
ReactGA.initialize(myConfigObject.google.trackingId);
...

Including the config file with other sensitive information on the client is not the way to go and accessing environment variables is also not possible. Hardcoding the value in the config file should be avoided in terms of maintenance.

Creating 'window' variables does also not work, because when the site is rendered on the server, the window object is not available (components/Html.js).

...
<script>
window.google = { trackingId: 'whatever' };
</script>
...

client.js

...
ReactGA.initialize(window.google.trackingId); // err: Does not work when rendering on the server
...

Thanks for any hints on this problem.

[ShaunBaker]

Hey

Just chiming in here to offer some assistance!

If you see here:

https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L235

Using the Webpack Define plugin:

https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin

You can pass in what you need to use within the client etc

[koistya]

@stay2be take a look at PR #883 that shows how to integrate Redux including passing data from the server to a client. In your server.js/app.get('*', ...) file you can initialize a new store with some initial state, e.g. context.store = createStore({ user: req.user, analytics: config.analytics }), this data will be serialized during server-side rendering and dehydrated on the client, so that on the client you can access it by calling ReactGA.initialize(store.getState().analytics.google.trackingId). Will this work for your case?

[stay2be]

Thanks for your response.

@ShaunBaker Setting the values via Webpack is only possible when the bundle is build, but the config values are retrieved when the app is run (in this case on Heroku via env variables).

@koistya This approach looks more suitable for me, I'll have a look at this.