Deploying for the first time

When your app example-app was created, it was created with a single environment, the development environment. After deploying example-app for the first time, a production environment will be created for your application.

To deploy your project, click on the button on the bottom right of the window and confirm the type of deployment you wish to conduct.

The modal opened when clicking on the deploy button

Deploy and migrate existing app

This option allows you to push all of the models, fields, code files, and configurations to production, while also copying any data already stored in development to production as well. Effectively, this means that you will have a full copy of your current application, and all existing data pushed to production. Once this is done, you can treat the Gadget editor as your development environment, and can even go back and delete any test data present in production.

If your app is already live and in the hands of real customers, we recommend doing this to ensure that your production environment includes all existing installations and any stored data.

Using Shopify?

When your Gadget application is deployed, your existing Shopify Connection configuration will now be considered a production app configuration. This will not require any additional changes on your part.

After deploying, it is recommended you create a second Shopify app to be used with your development environment, and set the corresponding Connection configuration in Gadget.

Deploy without migrating data

You may wish to push your Gadget app without migrating data to production. This would likely be the case if your application does not have any data you need to preserve, such as data generated by users, and contains development data that you want to avoid pushing to production. To do this, select “Deploy without migration”.

Gadget will push all of your models, fields, actions, code files and configurations to production while keeping a copy in development. None of your data will be migrated to production, and any shop installations from the Shopify Connection will also remain in development only.

Using Shopify?

When your Gadget application is deployed, your existing Shopify Connection configuration will now be considered a development app configuration. This will require you to change your app configuration details in the Shopify partners area to point to your new development-specific app URL and callback routes.

After deploying, it is recommended you create a second Shopify app to be used with your production environment, and set the corresponding Connection configuration in Gadget.

Updating API calls to be environmentally aware

Once the first deployment of your application to production is complete, you will need to ensure that any API calls to your application are being sent to the right environment .

If you're using the API client, you can configure it to connect to either environment by passing the environment option to the client constructor.

For example, you can always connect to the environment by passing the string Development to the environment field:

JavaScript

import { Client } from "@gadget-client/example-app";
export const api = new Client({
  environment: "Development",
});
// all API calls will be made to the Development environment

You can also explicitly connect to the environment by passing the string Production to the environment field:

JavaScript

import { Client } from "@gadget-client/example-app";
export const api = new Client({
  environment: "Production",
});
// all API calls will be made to the Production environment

or you can select which environment to connect to based on an environment variable, like NODE_ENV:

JavaScript

import { Client } from "@gadget-client/example-app";
export const api = new Client({
  environment:
    process.env["NODE_ENV"] === "production" ? "Production" : "Development",
});

If you're using raw GraphQL to query or mutate data within Gadget, you will need to point your requests to the right URL depending on the environment.

To make requests to the development GraphQL API, use the following URL:

Development GraphQL Endpoint

https://example-app--development.gadget.app/api/graphql

To make requests to the production GraphQL API, use the following URL:

Production GraphQL Endpoint

https://example-app.gadget.app/api/graphql