Environments

Switch to Environments view using the icon in the main menu.

Environment Variables

Environment variables are key-value pairs that store configuration data outside of your application code. In apps built with Draftbit, environment variables are injected into your app at build time. This means they’re available throughout your app code, but they’re not included in your source code repository, keeping sensitive data secure.

These variables can be used to:

• Store API keys and secrets - Keep sensitive credentials out of your codebase
• Configure API endpoints - Use different backend URLs for development vs production
• Set feature flags - Enable or disable features based on the environment
• Manage app configuration - Store app IDs, bundle identifiers, and other build settings

Best Practice

Never commit environment variables containing sensitive data (like API keys or passwords) to your code repository. Use the Environments page in Draftbit to manage these securely.

Adding Environment Variables

To add a new environment variable to your app project, navigate to the Environments page and click the button to open the environment variable form.

Field	Description
Name	The name of your environment variable. This should be uppercase and use underscores instead of spaces (e.g., API_BASE_URL, STRIPE_PUBLIC_KEY). Variable names cannot contain spaces or special characters except underscores. This name is what you’ll use to reference the variable in your code as process.env.VARIABLE_NAME. Plain text environment variables must be prefixed with EXPO_PUBLIC_.
Value	The actual value for your environment variable. This can be a URL, API key, string, number, or any other configuration value your app needs. For sensitive values like API keys or secrets, the value will be masked in the UI after you save it for security purposes.
Visibility	Controls how the environment variable is included in your app. See the Visibility Settings section below for details on each option.
Environments	Select which environments this variable should be available in. You can choose one or more of: Development, Staging, and Production. This allows you to use different values for the same variable name across different environments (e.g., different API endpoints for development vs production).

EXPO_PUBLIC_ Prefix Required

Plain text environment variables must be prefixed with EXPO_PUBLIC_ This prefix is enforced by Expo and required for plain text variables to be accessible in your app code. For example, if you want to create a variable called API_BASE_URL, you would name it EXPO_PUBLIC_API_BASE_URL in the form.

After filling in all required fields, click the Save button to create the environment variable. Once created, it will be available in your app builds and can be accessed in your code using process.env.VARIABLE_NAME.

Visibility Settings

Environment variables in Draftbit support two visibility levels that control how the variables are included in your app.

Security Warning

Always use Sensitive visibility for environment variables containing sensitive data like API keys, passwords, or authentication tokens. Plain text visibility should only be used for non-sensitive configuration values, as these variables will be visible to anyone who inspects your app’s compiled code.

Visibility	Description
Plain text	Visible in plain text in your app and in compiled code. These variables are always visible to users of your app. Use this setting for non-sensitive configuration values like public API endpoints, feature flags, or other settings that don’t contain secrets or credentials.
Sensitive	Hidden from your app and compiled code. Only visible in configuration files (e.g. app.config.js, babel.config.js). Use this setting for API keys, tokens, passwords, or other credentials that should never be exposed in your app’s compiled code.

Using Environment Variables

Once you’ve added environment variables in the Environments page, you can access them in your app code or reference them in the AI Agent chat.

Variables in code

When using environment variables in your app code, you can access them using process.env.VARIABLE_NAME. However, the visibility setting you choose affects how these variables are included:

• Plain text variables are accessible in your app code using process.env.VARIABLE_NAME and will be visible in your compiled app code.
• Sensitive variables are only available in configuration files like app.config.js and babel.config.js, and are not included in your compiled app code.

For example, with plain text variables:

// Access a plain text environment variable
const apiBaseUrl = process.env.API_BASE_URL;

// Use in API calls
fetch(`${apiBaseUrl}/users`);

Plain text environment variables are visible in your compiled app code, meaning anyone can inspect your app and see these values. Never use plain text visibility for sensitive data like API keys or passwords.

Sensitive variables are typically used in configuration files during the build process, such as setting app IDs or bundle identifiers, but are not accessible in your runtime app code.

Tip

If you need to use environment variables in your code, make sure to reference them using the exact variable name you set in the Environments page. Variable names are case-sensitive.

Variables in chat

You can reference your environment variables when chatting with the AI Agent in the Builder. The agent has access to your environment variables and can use them when building features or making changes to your app.

When you mention an environment variable in your chat messages, the agent will automatically use the correct variable name and can help you integrate it into your code. For example, you might say:

• “Use the EXPO_PUBLIC_API_BASE_URL environment variable for all API calls”
• “Create a function that uses EXPO_PUBLIC_STRIPE_PUBLIC_KEY to initialize Stripe”
• “Update the login screen to use the EXPO_PUBLIC_AUTH_ENDPOINT variable”
• “Initialize Supabase using EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_KEY”

The AI Agent understands your environment variable names and will reference them correctly in the code it generates. This makes it easy to build features that rely on your environment-specific configuration without having to manually edit code.

Tip

When referencing environment variables in chat, use the exact variable name as it appears in the Environments page. The agent will recognize both plain text variables (with the EXPO_PUBLIC_ prefix) and sensitive variables.

Learn More

For more detailed information about how environment variables work in Expo apps, including advanced configuration options, multiple .env files, and migration guides, see the Expo documentation on environment variables.