# Using environment variables in React applications ## For React applications using Vite In React applications using Vite (e.g. those using `@nrwl/vite:*` executors), Nx includes the following variables in the build process: - `NODE_ENV` - Variables prefixed with `VITE_`, such as `VITE_CUSTOM_VAR` You can read more about how to define environment variables in Vite [here](https://vitejs.dev/guide/env-and-mode.html). You can then use these variables in your application code like so: `import.meta.env.VITE_CUSTOM_VAR`. ### Using environment variables in `index.html` You cannot interpolate environment variables into your `index.html` file for React applications using Vite. ## For non-Vite React applications In React applications (e.g. those using `@nrwl/web:webpack` or `@nrwl/next:build` executors for `build` target), Nx includes the following variables in the build process: - `NODE_ENV` - Variables prefixed with `NX_`, such as `NX_CUSTOM_VAR` Defining environment variables can vary between OSes. It's also important to know that this is temporary for the life of the shell session. ### Using environment variables in `index.html` Nx supports interpolating environment variables into your `index.html` file for React and Web applications. To interpolate an environment variable named `NX_DOMAIN_NAME` into your `index.html`, surround it with `%` symbols like so: ```html {% fileName="index.html" %}

The domain name is %NX_DOMAIN_NAME%.

```