Environment variables
You can define environment variables and use them in Markdown and React pages in the project. By default, environment variables are not available in the browser. To access environment variables in React or Markdown pages, you have to prefix them with PUBLIC_
.
Define environment variables using one of the following two ways:
- Use the shell (in other words, in your local environment, CI)
- Create
.env
file in the root of the project
Example .env
file can look like this:
PUBLIC_CUSTOM_VARIABLE=Hello PUBLIC_IS_PRODUCTION=true PUBLIC_BUILD_NUMBER=50
Using the REDOCLY_ENV
variable, you can set up different environments and use separate .env
files like .env.production
, .env.development
, and .env.preview
based on your needs.
When hosting your project at Redocly, we will automatically set the proper REDOCLY_ENV
variable.
- for production builds, the
REDOCLY_ENV
variable will be set to"production"
. - for previews, the
REDOCLY_ENV
variable will be set to"preview"
.
Do not use environment variables with sensitive information like passwords or API keys on the pages because all users of the project can see them.
React
To use environment variables in your React code, refer to them using the following syntax: process.env.<env_var_name>
The following is an example of using an environment variable in a Typescript file:
import * as React from 'react'; export default function () { const buildNumber: number = parseInt(process.env.PUBLIC_BUILD_NUMBER || '') return ( <div> <h1>My custom variable value is {process.env.PUBLIC_CUSTOM_VARIABLE}</h1> <h2>Is this running in production? - {process.env.PUBLIC_IS_PRODUCTION}</h2> <h3>Is build number high? - {buildNumber > 40 ? 'Yes' : 'No'}</h3> </div> );
Environment variables always have String
type. PUBLIC_IS_PRODUCTION
and PUBLIC_BUILD_NUMBER
from example above will become "true"
and "50"
when used in React components. To get them in desired type, you'll have to do manual conversion.
Markdown
In Markdown files, access environment variables using Markdoc variables syntax under env
namespace:
# My custom variable is {% $env.PUBLIC_CUSTOM_VARIABLE" %}