{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"use-environment-variables","__idx":0},"children":["Use environment variables"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can define environment variables and use them in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]},", and Markdown and React pages in the project."," ","Environment variables are used during both build and run time for 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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PUBLIC_"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"define-environment-variables","__idx":1},"children":["Define environment variables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define environment variables using one of the following ways:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," file in the root of the project"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use the shell (in other words, in your local environment, CI)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add them individually on the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," page for the project"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"env-files","__idx":2},"children":[".env files"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," file can look like this:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"PUBLIC_CUSTOM_VARIABLE=Hello\nPUBLIC_IS_PRODUCTION=true\nPUBLIC_BUILD_NUMBER=50\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["REDOCLY_ENV"]}," variable, you can set up different environments and use separate ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," files like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.production"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.development"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.preview"]}," based on your needs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can also create branch-specific ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," files using the format ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.branch."]},"."," ","For example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.branch.feature-new-look"]}," would be loaded when working on the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["feature-new-look"]}," branch."," ","For branches containing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["feature/my-branch"]},"), replace ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-"]}," in the filename (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.branch.feature-my-branch"]},")."," ","In local development, the branch name is automatically detected from git."," ","On Redocly, it uses the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PUBLIC_REDOCLY_BRANCH_NAME"]}," environment variable."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The loading order is: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," -> ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.branch."]}," -> ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env."]},"."," ","Environment-specific files (like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.development"]},") take precedence over branch-specific files."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When hosting your project at Redocly, we will automatically set the proper ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["REDOCLY_ENV"]}," variable:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["For production builds, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["REDOCLY_ENV"]}," variable will be set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"production\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["For previews, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["REDOCLY_ENV"]}," variable will be set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"preview\""]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Variable priority"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The same variable can be defined both in Reunite (in the project ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Environment variables"]}," section) and in your base ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," file."," ","In that case, the value from Reunite is used."," ","Environment-specific ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," files (such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.production"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.preview"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.development"]},") and branch-specific ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env.branch."]}," files still take precedence over both."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"settings-page","__idx":3},"children":["Settings page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can also add environment variables individually through the Redocly interface:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In your project's workspace, select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Environment variables"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add environment variable"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enter the Environment variable name and value."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If the variable is a secret, select the secret checkbox to store it in an encrypted format and exclude it from the logs."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":4},"children":["Usage"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Protect sensitive information"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"api-functions","__idx":5},"children":["API functions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use environment variables in ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/api-functions/api-functions-reference"},"children":["API functions"]},":"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In Reunite, add variables to your project's ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Environment variables"]}," before using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["process.env.VAR_NAME"]}," in API function code."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If you're working locally, you can reference variables from your project's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," files in API functions."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"redoclyyaml","__idx":6},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Environment variables in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," only support string values."," ","To use environment variables in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]},", use the curly brace syntax ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{{ process.env. }}"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"logo:\n srcSet: '{{ process.env.LIGHT_LOGO_PATH }} light, {{ process.env.DARK_LOGO_PATH }} dark'\n altText: Redocly logo\n link: '/'\nnavbar:\n items:\n - page: index.md\n label: '{{ process.env.HOME_LABEL }}'\n - page: config/index.md\n label: Config\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can also provide a default value that is used when the environment variable is not set."," ","Add the default after a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["|"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["||"]}," separator and wrap it in single or double quotes."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"navbar:\n items:\n - page: index.md\n label: '{{ process.env.HOME_LABEL || \"Home\" }}'\n - page: config/index.md\n label: \"{{ process.env.CONFIG_LABEL | 'Config' }}\"\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Default values"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default value is applied only when the environment variable is not set."," ","If the variable is set to an empty string, the empty string is used."," ","When a default value is applied, the variable is not reported as unset."," ","Avoid using default values for any security-related variables that are required in production."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"react","__idx":7},"children":["React"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use environment variables in your React code, refer to them using the following syntax: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["process.env."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is an example of using an environment variable in a Typescript file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import * as React from 'react';\n\n\nexport default function () {\n\n const buildNumber: number = parseInt(process.env.PUBLIC_BUILD_NUMBER || '')\n\n return (\n
\n

My custom variable value is {process.env.PUBLIC_CUSTOM_VARIABLE}

\n

Is this running in production? - {process.env.PUBLIC_IS_PRODUCTION}

\n

Is build number high? - {buildNumber > 40 ? 'Yes' : 'No'}

\n
\n );\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Environment variables are always strings"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Environment variables always have ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["String"]}," type."," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PUBLIC_IS_PRODUCTION"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PUBLIC_BUILD_NUMBER"]}," from the preceding example above will become ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"true\""]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"50\""]}," when used in React components."," ","To get them in desired type, you'll have to do manual conversion."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"markdown","__idx":8},"children":["Markdown"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In Markdown files, access environment variables using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://markdoc.dev/docs/variables"},"children":["Markdoc variables syntax"]}," under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["env"]}," namespace:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"my-custom-variable-is"},"children":["My custom variable is ",null]}],"rawContent":"# My custom variable is {% $env.PUBLIC_CUSTOM_VARIABLE %}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"default-environment-variables","__idx":9},"children":["Default environment variables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following environment variables are available by default:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PUBLIC_REDOCLY_BRANCH_NAME"]},": The name of the branch that the project is built from"," ","Useful for configuring ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/env"},"children":["branch-specific settings"]}," in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"manage-environment-variables","__idx":10},"children":["Manage environment variables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can manage environment variables through the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," page in your project."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"change-an-environment-variable","__idx":11},"children":["Change an environment variable"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Once logged in to Redocly, select the project."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Environment variables"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Hover over the environment variable you want to update."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select the edit icon next to the variable you want to change."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Edit environment variable"]}," dialog that opens, make changes to your variable value select to make the variable secret."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"remove-an-environment-variable","__idx":12},"children":["Remove an environment variable"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Once logged in to Redocly, select the project."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Environment variables"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select the delete icon next to the variable you want to remove."," ","The variable is removed from the list immediately."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"restrictions","__idx":13},"children":["Restrictions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When defining custom names, avoid commonly reserved environment variables, such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HOME"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PATH"]},", and those related to the Node environment such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["NODE_ENV"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PUBLIC_"]}," prefix is shared with the client side, and should not be used for any secrets."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["REDOCLY_"]}," prefix is reserved for future use by Redocly."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":14},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://markdoc.dev/docs/variables"},"children":["Markdoc variables syntax"]}]}," - Learn the syntax for using environment variables within Markdown content and templates"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/manage-projects"},"children":["Manage projects"]}]}," - Explore other project configuration options and settings available in Reunite"]}]}]},"frontmatter":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["admonition","configOptionRequirements","markdoc-example"],"title":"Use environment variables","lastModified":"2026-09-24T16:15:48.000Z"}