Using environment variables with EAS Update
EAS Update is currently available only to customers with an EAS subscription plan.
Sign up.
⚠️
The APIs below are not stable and are expected to change as we develop EAS Update. An alternate solution is to use a babel plugin to transform variables into environment variables, as described
here.
EAS Build and EAS Update allow setting and getting environment variables at different times. There are multiple steps to ensure the proper environment variables are available when developing, building, and publishing an update to a project.
To expose environment variables in our project, we'll have to set up our app config to allow it. After this, we'll be able to access these variables throughout our entire project.
First, we'll need to rename app.json to app.config.js, which will allow us to export our app's config, including JavaScript variables.
Next, we'll add an API_URL
environment variable to our project.
To add it to our app config, we'll add it under the extra.eas
property.
app.config.js
export default () => ({
expo: {
extra: {
eas: {
API_URL: process.env.API_URL || null,
},
},
},
});
The code above sets the extra.eas
property. Now, we need to set and get the variable in our project.
To set the API_URL
environment variable during development, we can prepend the variables before running expo start
like this:
API_URL="http://localhost:3000" expo start
The command above will set the API_URL
to "http://localhost:3000"
. Now, it's time to access that value inside our project.
To access it, we can use the expo-constants
library. It's located under the Constants.manifest2?.extra?.expoClient?.extra?.eas?.API_URL
property.
To set the API_URL
environment variable during a build, we can include an "env"
property in an eas.json build profile, like below:
eas.json:
{
"production": {
"env": {
"API_URL": "https://prod.example.com"
}
},
"staging": {
"env": {
"API_URL": "https://staging.example.com"
}
}
}
Once we run a command like eas build --profile production
, the "env"
property in the "production" build profile will set the API_URL
to https://prod.example.com/
inside the build.
To access it, we can use the expo-constants
library. It's located under the Constants.manifest?.extra?.eas?.API_URL
property.
To set the API_URL
environment variable when publishing an update, we can prepend the environment variables before running eas update
like this:
API_URL="https://prod.example.com" eas update --branch production
When EAS CLI creates the update, it will set the API_URL
to https://prod.example.com
inside the update's bundle.
To access it, we can use the expo-constants
library. It's located under the Constants.manifest2?.extra?.expoClient?.extra?.eas?.API_URL
property.
Note: we could also use the expo-updates
library to access API_URL
. It is under Updates.manifest?.extra?.expoClient?.extra?.eas?.API_URL
. However, Updates.manifest
is only present when an update is currently running. If the project is in development, Updates.manifest
will be undefined
. In addition, if a build is running without an update (e.g. it was just downloaded or there are no updates yet), Updates.manifest
will also be undefined
.
Many developers often create a file named Env.ts in their project, which they import into any file that needs to access environment variables. Combining the information above, we could write the following file to access API_URL
:
Env.ts
import * as Constants from 'expo-constants';
function getApiUrl() {
const API_URL =
Constants.manifest2?.extra?.expoClient?.extra?.eas?.API_URL ??
Constants.manifest?.extra?.eas?.API_URL;
if (!API_URL) {
throw new Error('API_URL is missing.');
}
return API_URL;
}
export const Env = {
API_URL: getApiUrl(),
};