Environment variables

Storing environment variables

To store environment variables in Gadget, click on Environment Variables found under Settings in the Config section of the navigation menu. To add a new environment variable, click on + Add Variable and complete the form as displayed below.

Managing environment variables in Gadget

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.

You can add environment variable values for both Development and Production environments. When you change an environment variable's Production value, you need to re-deploy so that the updated value is used by the Production instance of your Gadget app. Changes to environment variables that have not been deployed are marked as Pending Deploy to let you know that these values are not yet available in your Gadget app's production environment. After deploying, the Pending Deploy status changes to Production.

A screenshot of a deployed environment variable

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.

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 actions context. Here's an example use case within a global action:

JavaScript

1/**
2 * Global action code example
3 */
4export async function run({ 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:

JavaScript

/**
 * Shared Example client
 */
module.exports = 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 the Development environment 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