pass environment variable from django to react app

Question

I would like to pass a variable from django to react app. I know I can do it by passing window object from html page but I would like to know if its possible to do it using environment variable. I came across this link How can I pass a variable from 'outside' to a react app? which mentions using .env file. Please advise on how it can be used with Django/Python setup.

What do you want to pass from Django to react? Sorry but the question is not very clear. — Arpit Solanki, Jun 27 '17 at 16:17
Your Django application and your React application are probably running in different environments. How exactly to you envision this working? — ChrisGPT was on strike, Jun 27 '17 at 16:24
@ArpitSolanki @Chris I don't know if what I'm asking is possible but I would like to see If I can save my server generated js variables in environment file so react app can read it like so `{process.env.globallyVisibleVar}` — Dmitry, Jun 27 '17 at 19:07
@Dimtry See my updated answer.What you are trying to do is not possible due to the nature of client-server-applications. — trixn, Jun 27 '17 at 20:33

score 5 · Answer 1 · edited Mar 26 '20 at 21:54

Just render it into a script tag in your template:

<script type="text/javascript">
    var globallyVisibleVar = {myVar}
</script>

But you will have to make sure, that the variable is JSON serialized. You could either write a template tag or JSON serialize it before passing it to the template context. Also make sure to use var and not const or let because they are block scoped and will not be globally visible in your react app.

As the documentation of create-react-app says:

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. Alternatively you can rebuild the app on the server anytime you change them.

Since you do not want to rebiuld your whole JavaScript on every request you can't use that to share dynamic data between your server application (Django) and your client application (react).

So if you follow the link you will read this:

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:

<!doctype html>
<html lang="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 as it makes your app vulnerable to XSS attacks.

That's what I'm doing currently but I wanted to see If could create some kind of environment file that contains `{myVar}` as described here https://stackoverflow.com/a/44669087/446629 — Dmitry, Jun 27 '17 at 19:00
Could you provide more context to your question because it's not very clear, what you mean. What kind of data to you want to share with your react app? The react app lives on the client side and has no direct access to any .env files. Depending on your tooling you could of course generate js files from environmental variables but this only works for data, that usually doesn't change. — trixn, Jun 27 '17 at 20:18
Thanks for a clear explanation on the build time vs run time. In my case I wanted to check user permissions and if the value is true then make api request. `myGlobalObject: {permissions: {permissions}, url: {myapi}...some other properties }`. — Dmitry, Jun 27 '17 at 21:12

pass environment variable from django to react app

1 Answers1