Environment variables 

Storing environment variables 

To store environment variables in Gadget, click on Environment Variables found under Settings in the navigation menu. To add a new environment variable, click on Add Variable and add the variable's Key and Value.

If a variable is sensitive and you wish to encrypt it in the database, you can click on the lock icon next to the value input to make it a secret variable. The value of a secret environment variable will still be available to your application like any non-encrypted variable.

You can also edit environment variables by changing the value in the input field. Finally, environment variables can be deleted by clicking Remove.

Environment variables are unique to each of your application's environments. This means you can have different environment variables for each of your development and production environments. To add an environment variable to a specific environment, use the Environment dropdown to select the environment, and click Add Variable to enter the variable's key and value. To add a new environment variable to multiple environments, you must manually add the variable key and value to each environment.

Exposing environment variables to frontend code 

To use your environment variable in frontend code, add the prefix GADGET_PUBLIC to it. This will enable its availability on the client side. However, it is important to never divulge any secret keys in frontend code.

For example: GADGET_PUBLIC_MY_VAR is available for use in the web folder as process.env["GADGET_PUBLIC_MY_VAR"].

Accessing environment variables in code 

Gadget allows you to set environment variables for use within actions and all JavaScript files. These values are accessible using two different methods:

First, your app's environment variables are available within the config property of an action's context. Here's an example use case within a global action:

1/**
2 * Global action code example
3 */
4export const run: ActionRun = async ({ logger, config }) => {
5  logger.info({ value: config.FOO }, "logging an environment value");
6};

1/**
2 * Global action code example
3 */
4export const run: ActionRun = async ({ logger, config }) => {
5  logger.info({ value: config.FOO }, "logging an environment value");
6};

Second, to allow access outside of action contexts, such as in shared library code, all environment variables are also available within the process environment, which you can access with process.env:

/**
 * Shared Example client
 */
export default new ExampleClient(process.env["EXAMPLE_AUTH_TOKEN"]);

/**
 * Shared Example client
 */
export default new ExampleClient(process.env["EXAMPLE_AUTH_TOKEN"]);

NODE_ENV environment variable 

Gadget sets up each application with the NODE_ENV environment variable set to development for all development environments and production for the production environment. This is a common convention for Node.js applications that instructs node modules to run a potentially slower but more explanatory version of code in development and a higher performance but maybe less debuggable version in production.

If you'd like to opt out of this behavior and run with a different value of NODE_ENV across your environments, you can adjust the value of the NODE_ENV environment variable on your Environment Variables page.

Platform provided environment variables 

Gadget sets a few environment variables that are available to all of your application's environments. These are:

• GADGET_APP: the name of your Gadget application. For an app running at my-app.gadget.app, this will be my-app.
• GADGET_ENV: the name of the Gadget environment your app is running in. Examples: development, production, my-development-env

These environment variables are available in your backend code and your frontend code via process.env.GADGET_APP and process.env.GADGET_ENV.