erikras / erikras/react-redux-universal-hot-example

Q: A better way of sharing env-specific variables on both client and server?

Open
#897 7 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

I came up with a solution to have the URL prefix of my API configurable, on a per environment basis.

In my case, I'm not using server proxying as in the boilerplate - my app connects directly to my API. This means I need a fully qualified domain name on my requests, whether they happen during SSR, or in the browser.

If we look at the current version of ApiClient.js, we have;

```
function formatUrl(path) {
const adjustedPath = path[0] !== '/' ? '/' + path : path;
if (__SERVER__) {
// Prepend host and port of the API server to the path.
return 'http://' + config.apiHost + ':' + config.apiPort + adjustedPath;
}
// Prepend `/api` to relative URL, to proxy to API server.
return '/api' + adjustedPath;
}
```

and in config.js

```
apiHost: process.env.APIHOST || 'localhost',
apiPort: process.env.APIPORT,
```

So I want ApiClient to look something like this, which (I think) is the least amount of code I need to change;

```
function formatUrl(path) {
const adjustedPath = path[0] !== '/' ? '/' + path : path;
// Prepend host and port of the API server to the path.
return 'http://' + config.apiHost + ':' + config.apiPort + adjustedPath;
}
```

Which won't work client-side since process.env vars are from node.

The solution I came up with was this;

(Note in my code below I combine apiHost and apiPort into 'apiUrl')

in Html.js

```

```

and in config.js

```
apiUrl: __SERVER__ ? process.env.APIURL || 'localhost' : window.__apiUrl,
```

This feels a bit of a hack. The config module writes a variable, which is read by the server code to render the html with a variable, which is read by the config module in the client. Phew.

Is there a better way to share env variables between client & server code?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.