Use environment variables with EAS Update

Learn how to set up and use environment variables with EAS Update.

Using .env files with EAS Update

Environment variables in Expo describes how to use .env files to set and use environment variables within your JavaScript code. The Expo CLI will substitute properly prefixed variables in your code (for example,process.env.EXPO_PUBLIC_VARNAME) with the corresponding environment variable values in .env files present on your development machine.

When you run eas update, any .env files present will be evaluated when your JavaScript is bundled. Any EXPO_PUBLIC_ variables in your application code will be replaced inline with the corresponding values from your .env files that are present on the machine from which the update is published, whether that is your local machine or your CI/ CD server.

When publishing with EAS Update, EXPO_PUBLIC_ variables in .env files will only be used when bundling your app's JavaScript. They will not be available when evaluating app.config.js.

Sharing environment variables between local development, EAS Update, and EAS Build

Your local development environment and EAS Update can use .env files to inline EXPO_PUBLIC_ variables into your app source code as long as they are present on the machine the eas update command is being run. Meanwhile, EAS Build also supports defining environment variables that will be available on the EAS Build server in eas.json.

One approach to ensure the correct variables are defined in all cases would be to define your variables in .env files for local development and EAS Update, while setting the same variables in a second place in eas.json for EAS Build. However, this duplication can be avoided by consolidating common environment configurations into code and switching based on EAS Update channel.

For example, you might have separate staging and production channels for EAS Update defined in your eas.json:

{
  "build": {
    "production": {
      "channel": "production"
    },
    "staging": {
      "channel": "staging"
    }
  }
}

Each channel uses a different apiUrl, and enableHiddenFeatures enables an experimental feature flag, and these values rarely change. Instead of defining these values in the env inside eas.json, create a Config.js file in your project that exports the correct values based on the channel:

import * as Updates from 'expo-updates';

let Config = {
  apiUrl: 'https://localhost:3000',
  enableHiddenFeatures: true,
};

if (Updates.channel === 'production') {
  Config.apiUrl = 'https://api.production.com';
  Config.enableHiddenFeatures = false;
} else if (Updates.channel === 'staging') {
  Config.apiUrl = 'https://api.staging.com';
  Config.enableHiddenFeatures = true;
}

export default Config;

Since channel is set for a build when using EAS Build, and builds configured for EAS Update only download updates from that channel, using channel to set your environment ensures that the correct values are used for all standalone builds, whether running the original embedded JavaScript or an update.

Setting a custom local environment

Note the above solution only allows for one local configuration. That may not be flexible enough, as it is common to sometimes point your local development environment to different servers. We can update Config.js to also look at our .env files:

let Config = {
  apiUrl: process.env.EXPO_PUBLIC_API_URL || 'https://localhost:3000',
  enableHiddenFeatures: process.env.EXPO_PUBLIC_ENABLE_HIDDEN_FEATURES || true,
};

// set variables based on channel...

export default Config;

Now you can set EXPO_PUBLIC_API_URL and EXPO_PUBLIC_ENABLE_HIDDEN_FEATURES in an uncommitted .env.local file, and they will be used instead of the default when running npx expo start.

This can also be used for EAS Updates run from your development build. For example, you can point updates created for PR previews to a specific API server by committing an .env file with EXPO_PUBLIC_API_URL set.

Using variables in app.config.js

In previous versions, it was common to set variables to be used in updates in app.config.js under the expo.extra property:

export default () => ({
  expo: {
    extra: {
      API_URL: process.env.API_URL || null,
    },
    // ...
  },
});

Then, to set the API_URL environment variable during development, you can prepend the variables before running npx expo start as shown below:

The command sets the API_URL to "http://localhost:3000". Then, the expo-constants library provides the Constants.expoConfig.extra.API_URL property to access it inside a project.

Variables expo.extra are still accessible but it is recommended to use the EXPO_PUBLIC_ prefix and .env files instead to reference variables directly in your application code.