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:
tsxCopied1// my_view.airplane.tsx2import airplane from "airplane";34export default airplane.view(5// View configuration6{7slug: "my_view",8name: "My View",9envVars: {10MY_URL: { value: "https://airplane.dev" }, // From value11MY_CONFIG: { config: "MY_CONFIG_VAR" }, // From config variable12},13},14MyView,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:tsxCopied1const myURL = process.env.MY_URL;
Project wide environment variables
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.yamlCopied1# airplane.yaml2view:3# These environment variables can be accessed by all views in the project.4envVars:5MY_CONFIG:6config: MY_CONFIG_VAR
Environment variables and TypeScript
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:bashCopied1npm install -D @types/node
bashCopied1yarn add -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:tsCopied1// environment.d.ts2declare namespace NodeJS {3interface ProcessEnv {4MY_ENV_VAR: string;5}6}7export {};
Built-in environment variables
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.