-[Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
-[Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
-[Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env)
-[Can I Use Decorators?](#can-i-use-decorators)
-[Integrating with an API Backend](#integrating-with-an-api-backend)
-[Node](#node)
...
...
@@ -36,6 +39,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
-[Proxying API Requests in Development](#proxying-api-requests-in-development)
-[Using HTTPS in Development](#using-https-in-development)
-[Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
-[Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
-[Running Tests](#running-tests)
-[Filename Conventions](#filename-conventions)
-[Command Line Interface](#command-line-interface)
...
...
@@ -518,6 +522,8 @@ Your project can consume variables declared in your environment as if they were
default you will have `NODE_ENV` defined for you, and any other environment variables starting with
`REACT_APP_`.
**The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them.
>Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527).
These environment variables will be defined for you on `process.env`. For example, having an environment
...
...
@@ -570,6 +576,21 @@ The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the
value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in
a `.env` file.
### Referencing Environment Variables in the HTML
>Note: this feature is available with `react-scripts@0.9.0` and higher.
You can also access the environment variables starting with `REACT_APP_` in the `public/index.html`. For example:
```html
<title>%REACT_APP_WEBSITE_NAME%</title>
```
Note that the caveats from the above section apply:
* Apart from a few built-in variables (`NODE_ENV` and `PUBLIC_URL`), variable names must start with `REACT_APP_` to work.
* The environment variables are injected at build time. If you need to inject them at runtime, [follow this approach instead](#generating-dynamic-meta-tags-on-the-server).
### Adding Temporary Environment Variables In Your Shell
Defining environment variables can vary between OSes. It's also important to know that this manner is temporary for the
...
...
@@ -713,6 +734,21 @@ Then, on the server, regardless of the backend you use, you can read `index.html
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
## Injecting Data from the Server into the Page
Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example:
```js
<!doctype html>
<htmllang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
```
Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.**
## Running Tests
>Note: this feature is available with `react-scripts@0.3.0` and higher.<br>
