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. For example:
tsx
Copied
1
const myURL = 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, a handful of Airplane-related environment variables are automatically set. For more information, see the Views environment variables reference.
PrivacyTermsSupport