We’re excited to announce the launch of Environments on all new and existing Gadget projects.
Environments allow you to build and test your application in development, and then safely deploy changes to your customers in a production environment.
Up until today, Gadget apps came with a single environment to work in - production. This meant that changes were instantly live and exposed to end users. But adding new functionality to your app often requires breaking down old implementations. It takes a while to figure out what the new functionality should look like, and how it should work. And it’s very problematic to have end users interacting with all the half-completed changes that are being made to an application as new features are being developed.
With Gadget’s environments, you can now safely iterate on new versions of your application without impacting end users. Our one-click deploy allows developers to build in a development sandbox, test functionality, and then push the changes to production. And one-click deployments mean you don’t need to worry about managing builds, migrating separate services, or changing settings in a cloud service provider’s dashboard. One click in Gadget and your production app is ready for users!
That’s right, a single button click (and a confirmation) will push your development environment to production. That means changes to models, fields, actions, and code files will be deployed, and any new features and bug fixes will be immediately available to your app’s users.
The Deploy button can be found at the bottom of your Gadget editor. Clicking it will prompt you to confirm that you want to deploy. Once you confirm the deployment by selecting Deploy to Production, Gadget will promote your current development environment to production.
The prompt will also let you know if there are any issues that need to be resolved before you deploy to production, and the status icon alerts you of any existing errors in your production app.
The introduction of environments is accompanied by a host of changes to the Gadget editor, intended to help you view the state of your app in either development or production.
On select interfaces in the editor, such as Logs, Data, and API Playground, there is an environment toggle at the top of the page that allows you to switch the environment you are working on.
For example, if you wanted to see what records were stored in your production database, versus the ones in development, you’d simply toggle the environment to Production to switch views:
Or say that you needed to troubleshoot a specific bug in development, you would likely toggle the Logs to Development in order to identify the errors that were being thrown.
You can also use the GraphQL Playground to query against your production environment just in case you need to get yourself out of a situation where some incorrect data exists in your production database.
Much like the editor, your Gadget generated GraphQL API is also environment-aware.
There are now two versions of your API: one for development, and the other for production. As you make changes inside the Gadget editor, your development API is constantly updating. This allows you to instantly access the latest changes from a frontend project or any other interface that interacts with the API. Once your changes are tested and complete, you can Deploy to production with one click, generating a new version of your production API.
With two environments, you need to be able to access and make requests against both environments independently. Development environments will have the same domain as your production environment but with –development after your app's subdomain name. This is important if you are making requests to custom routes.
For example, to make GraphQL requests against the production environment, you would send a request to a URL such as automated-product-tags.gadget.app/api/graphql
To send a GraphQL query to your development environment, you would use the same URL with –development after your app's subdomain: automated-product-tags–development.gadget.app/api/graphql
If you are using your Gadget project’s React API client, you also need to be able to switch between development and production environments. By default, the client will make requests against your development environment.
You can use the Client’s environment property to change this default behavior. For example, we can use a NODE_ENV environment variable to select our production or development Gadget environment:
If you have an existing application with data, you’ll need to migrate your app to use environments. You can do this by clicking Deploy and then confirming with the Deploy to Production button.
You will then see a modal with two options: migrate your current application, data, and settings to production, or migrate everything to a development environment.
If your app is generally available and/or released to users make sure to pick the option to migrate to production!
If you are still building your app or are pre-release, you may want to take your current Gadget app and migrate it to a development environment. Once you are finished developing your application and are ready for release, you can then deploy it to production like any newly created Gadget app.
For complete documentation on environments in Gadget, including deployments, migrations, and setting up Shopify Connections, check out our Deploying to Production docs.
Have questions about environments? Feel free to ask in our developer Discord.