Environments 

Environments in Gadget are separate instances of your application. You can have an environment for each team member, set up environments for manual QA testing, or use environments to run automated tests as part of a CI/CD pipeline.

Each environment has its own:

1. App URL
2. Database
3. Server configurations (e.g. API keys, environment variables, client credentials, etc.)
4. Runs its own version of your application's code

Development vs production environments 

There are two main types of environments in Gadget: development and production.

Development environments 

Development environments are where you build and make changes to your app. This includes adding data models, writing code, and gives you a sandbox to test your application without impacting production. You can create unlimited development environments.

Development environment frontends 

Development environment frontends are served by Vite and include features such as:

• hot module reloading
• un-minified code for debugging
• error overlays

It also utilizes dependency pre-bundling to reduce the time taken to load ESM modules.

Production environments 

This is your live app. Each Gadget app gets one production environment. Once you are satisfied with the changes made in a development environment, you can deploy to production.

Production environment frontends 

In the production frontend, Gadget builds minified assets optimized for production and serves them via a high-performance CDN for the best user experience.

Managing environments 

Adding development environments 

1. Click on the environment selector in the Gadget editor
2. Click + Create a new development environment
3. Give your environment a name and select an existing environment to clone

Delete an environment 

1. Go to Settings → General
2. Locate and select Delete environment for development environments, or Reset environment for production environments
3. Confirm by entering the name of the environment you are deleting

Environment domains and APIs 

Your application has separate domains for each environment.

• Development domain: https://<your-app>--<your-environment>.gadget.app/
• Production domain: https://<your-app>.gadget.app/

To access the frontend or make API requests, use the appropriate domain. For example:

• Development GraphQL API: https://<your-app>--<your-environment>.gadget.app/api/graphql
• Production GraphQL API: https://<your-app>.gadget.app/api/graphql

Specifying environments using the API client 

A Gadget API client can connect to different environments by setting the environment option:

import { Client } from "@gadget-client/your-app";

export const api = new Client({
  environment: "development",
});

import { Client } from "@gadget-client/your-app";

export const api = new Client({
  environment: "development",
});

To dynamically switch based on the NODE_ENV:

import { Client } from "@gadget-client/your-app";

// Defaults to development if NODE_ENV is not "production"
export const api = new Client();

import { Client } from "@gadget-client/your-app";

// Defaults to development if NODE_ENV is not "production"
export const api = new Client();

Specifying environments when using a script tag 

A script tag can be used to install your app's API client. You must also specify the environment as part of your app's domain when using this script tag.

For example:

use a script tag to install the API client for an environment
html
Copy
1<script src="https://your-app--development.gadget.app/api/client/web.min.js"></script>
2<script>
3  // create a new instance of the Gadget client at the api global
4  // connected to the development environment
5  window.api = new Gadget();
6</script>

Specifying environments using GraphQL 

For raw GraphQL requests, adjust the endpoint based on NODE_ENV:

1let endpoint;
2if (process.env["NODE_ENV"] === "production") {
3  endpoint = "https://your-app.gadget.app/api/graphql";
4} else {
5  endpoint = "https://your-app--development.gadget.app/api/graphql";
6}
7
8const result = await fetch(endpoint, {
9  method: "POST",
10  headers: {
11    "Content-Type": "application/json",
12  },
13  body: JSON.stringify({
14    query: "query { gadgetMeta { applicationName } }",
15  }),
16});

1let endpoint;
2if (process.env["NODE_ENV"] === "production") {
3  endpoint = "https://your-app.gadget.app/api/graphql";
4} else {
5  endpoint = "https://your-app--development.gadget.app/api/graphql";
6}
7
8const result = await fetch(endpoint, {
9  method: "POST",
10  headers: {
11    "Content-Type": "application/json",
12  },
13  body: JSON.stringify({
14    query: "query { gadgetMeta { applicationName } }",
15  }),
16});

Working in teams 

Each developer working on the same app should have their own development environment to be used as a personal development sandbox. This prevents any conflicts with other developers working on the same app, and functions the same as building on a local machine.

Gadget's CLI, ggt, can be used to pull down a development environment's code and configuration to a local machine. This enables developers to use source control and branching to manage their applications.

Source control, CI/CD, and suggested deployment workflows can be found in the deployment docs.

Building Shopify or BigCommerce apps as a team 

Shopify and BigCommerce app connections are not copied over when creating new environments.

Each developer should create a new Shopify or BigCommerce app and connect it to their development environment.

This will help to reduce noise from webhooks and gives each developer a clean and unique development sandbox.

Multiplayer 

Gadget development environments do support multiplayer. This means that two or more developers can build in the same environment at the same time. This is potentially useful for debugging, pair programming, or working on different parts of an application in parallel.

You can see the team members currently working on a single environment in the Gadget editor's environment selector.