Environment variables

Environment variables can be entered directly ("from value"), or you can reference Config variables ("from config variable"). Use config variables for values you want to share across multiple views.
In the following example, we add two environment variables to our view. The first is set directly from a value, and the second is set from a config variable:
tsx
Copied
1
// my_view.airplane.tsx
2
import airplane from "airplane";
3


4
export default airplane.view(
5
  // View configuration
6
  {
7
    slug: "my_view",
8
    name: "My View",
9
    envVars: {
10
      MY_URL: { value: "https://airplane.dev" }, // From value
11
      MY_CONFIG: { config: "MY_CONFIG_VAR" }, // From config variable
12
    },
13
  },
14
  MyView
15
);
Note that environment variables can be seen in the View source code in the browser, so anybody with access to the view can see the value of the environment variable.
If you need to use a secret in a view, we recommend pulling business logic that requires the secret into a task and and using a task environment variable.
Access environment variables in your code on the process.env object using bracket notation. For example:
tsx
Copied
1
const myURL = process.env["MY_URL"];
Environment variables cannot be accessed using dot notation (process.env.MY_URL). You must use bracket notation (process.env["MY_URL"]).

Project wide environment variables
In addition to setting environment variables on individual views, you can also set environment variables for all tasks and views in a project.
Set project-wide environment variables in your airplane.yaml configuration file.
yaml
Copied
1
# airplane.yaml
2
view:
3
  # These environment variables can be accessed by all views in the project.
4
  envVars:
5
    MY_CONFIG:
6
      config: MY_CONFIG_VAR

Environment variables and TypeScript
Since process.env is typically not available in the browser, TypeScript may complain that process is undefined.
To fix this, install the @types/node package as a dev dependency:
bash
Copied
1
npm install -D @types/node
This will allow you to use process.env in your code without TypeScript complaining, and will also provide type definitions for all of the build-in environment variables listed below.
If you want to add your own environment variables to the type definitions, you can do so by adding an environment.d.ts file to the root of your project:
ts
Copied
1
// environment.d.ts
2
declare namespace NodeJS {
3
  interface ProcessEnv {
4
    MY_ENV_VAR: string;
5
  }
6
}
7
export {};

Built-in environment variables
When a view runs—both locally in Studio and remotely in Airplane—the following environment variables are automatically set:
Variable NameDescription
AIRPLANE_ENV_IDID of the environment this view is in. Set to studio for Studio runs.
AIRPLANE_ENV_IS_DEFAULTWhether the view is in the default environment. Set to "true" for Studio runs.
AIRPLANE_ENV_SLUGSlug of the environment this view is in. Set to studio for Studio runs.
AIRPLANE_ENV_NAMEName of the environment this view is in. Set to studio for Studio runs.
AIRPLANE_USER_EMAILEmail of the user who is using the view.
AIRPLANE_USER_IDID of the user who is using the view.
AIRPLANE_USER_NAMEName of the user who is using the view.
AIRPLANE_VIEW_IDID of the view.
AIRPLANE_VIEW_SLUGSlug of the view.
AIRPLANE_VIEW_NAMEName of the view.
AIRPLANE_VIEW_URLURL that links to the view page in the Airplane app.
AIRPLANE_TEAM_IDID of the team this view belongs to.
AIRPLANE_DEPLOYMENT_IDID of the view's deployment.
PrivacyTermsSupport