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 the variable in question is sensitive and you wish to hide its value from being displayed in the Gadget editor, you can simply click on the lock icon next to the value input. You can also edit environment variables by overriding the value in the input field. Finally, environment variables can be deleted, simply 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.