Environments 

What are environments? 

Environments are distinct instances of your Gadget application. Gadget gives developers unlimited environments per project, allowing you to create one for each developer on your team, and one for each stage of your deployment flow (Staging, Production).

Each environment has its own database, server configurations, and different versions of the code of your application.

How environments work 

There are two main types of environments provided by Gadget:

Development environments: This is the default environment where all changes you make in Gadget occur. It's designed for you to add models, update code files, change configurations, and experiment with your application. Changes made here do not impact your live application, which allows for safe testing and development. You can create unlimited development environments.

Production environments: Once you are satisfied with the changes made in the development environment, you can push these changes to the production environment. The production environment is where your application is live and accessible to end-users. Deploying to production makes the changes from development available to your users. Gadget only provides one production environment by default. The Gadget editor includes an environment selector that lets you view and interact with your different environments.

To help you quickly identify which environment you're working in, production view are highlighted with a purple border and development views in light blue.

Development vs production environment 

Frontend

In the development environment, Gadget uses Vite to serve your application in your development domain. Vite provides developer-friendly features like hot module reloading, un-minified code for easy debugging, and error overlays. It also utilizes advanced pre-bundling to maintain fast development speed when adding dependencies and expanding your codebase.

In the production environment, Gadget builds minified assets optimized for production and serves them through a high-performance CDN. This ensures the best user experience and reliability.

Managing environments 

Add an environment 

1. Click on the environment selector in the left-hand corner

2. From the dropdown menu click on Create a new development environment

3. Name your environment.

4. Populate this new environment with code from an existing environment (you can only clone the code from production after your first deploy).

Delete an environment 

1. Head over and open up the environment selector in the left-hand corner.

2. Navigate to the environment you wish to delete.

3. Click on the icon to the right of the environment and select Delete.

4. Enter the name of the environment you are deleting to confirm and then click on Delete environment.

Framework version 

As Gadget releases new features, and updates its underlying infrastructure, new “framework versions” become available. However, upgrades or downgrades are restricted to transitions from or to framework version v1.0 and beyond. For example, if I create a Gadget application and the default environment is set to v1.1 and then I want to create a new environment running on a downgraded framework version, I can only downgrade as low as v1.0, I would not be able to downgrade to v0.3 or any older version.

Working with plugins, environment variables, API keys 

Each environment has its own set of configs, different from other environments.

This means that any of your environment’s plugins such as the OpenAI API key, Sentry DSN, Shopify Client ID/Secret and Google OAuth Client ID/Secret will all be unique per environment. If you happen to remove any authentication method or connection and edit the plugin by removing connection, changing scopes, etc, these changes will only take place in the environment you’re editing. This will not affect the plugins within your other environments.

The above is also applicable to Gadget environments API keys and ENV variables. They are unique per environment and any changes to them will only affect the environment being edited.

Multiplayer 

Multiplayer functionality in Gadget allows you to detect the presence of any team members working within the same environment on your application.

You can view which team member is within a certain environment either in the top right-hand corner or within the drop-down of the environment selector.

Branching within environments 

Developers can use git to source control their Gadget applications. You can use git as you normally would to check different branches of your codebase, and the ggt CLI will ensure that this version of your app is running on your current development environment.

For more information on using source-control with environments in Gadget read our guide here.