Deploy your web app

In this tutorial, you'll learn how to do the following tasks:

• Set up hosting
• Retrieve and set environment variables
• Build and deploy your app
• Update your app URLs
• Test your deployed app

You've created an app using Shopify CLI, or you've migrated your app to work with Shopify CLI.

To make your app available to Shopify and to app users, you need to host it. For example, when you embed your app in the Shopify admin or Shopify Point of Sale using App Bridge, you need to host your app's pages so Shopify can display them in an iframe or mobile webview.

All Shopify app templates include a Dockerfile that contains instructions to deploy a web app in a Docker container. To simplify the deployment process, we recommend that you choose a hosting provider that supports deployment using Docker.

You can host your app using any service or platform you prefer. In this tutorial, we'll use Fly.io and Heroku as examples.

Set up hosting for your app in Fly.io.

1. Install flyctl and sign up for Fly.io. For detailed steps, refer to the Fly.io docs.

2. Navigate to your app directory:

3. Run the following command to create a new app in Fly.io and create a fly.toml file:

Set up hosting for your app in Heroku.

1. Download and install the Heroku CLI and Docker.

2. Navigate to your app directory:

3. Log in to the Heroku CLI:

4. Log in to the Heroku Container Registry:

5. Create an app in Heroku:

   This command configures Heroku with a container-based app and creates a Git remote branch named heroku for deploying the app. It also returns the URL to where the app will run when it's deployed.

Apps created using Shopify CLI use environment variables for configuration. During local development, Shopify CLI provides the environment variables directly to the environment. However, to deploy your app, you need to retrieve these variables for your app so you can set them in a later step.

1. Navigate to your app directory:

2. To retrieve the values that you'll need to set as environment variables, run the following command using your preferred package manager:

3. Take note of the SCOPES, SHOPIFY_API_KEY, and the SHOPIFY_API_SECRET values. You'll need to set these values as environment variables for your hosted app.

After you create your hosted app, you need to configure it by setting environment variables. You need to set the environment variables that you retrieved, and additional variables specific to your app and hosting environment.

The following environment variables need to be provided for all apps:

The following examples describe how to set up environment variables in Fly.io and Heroku.

Configure your Fly.io app to run your app code and communicate with Shopify.

1. From your project root, open fly.toml.

2. In the [env] section, add the following environment variables, using the format <VARIABLE>= "<VALUE>":

3. In the [http_service] section, change the value of internal_port. This value needs to match the PORT value.

Your config file should look similar to the following:

In a terminal, set the API secret for your app:

Configure your Heroku app to run your app code and communicate with Shopify.

1. At the top-level directory of your app's source code, create a heroku.yml file with the following content:

2. Commit the heroku.yml file to your Git repository:

In a terminal, add the environment variables for your app using the heroku config:set command with the following syntax:

After you add environment variables to your app, you can follow your hosting solution's deployment process to deploy the app. You can also use this process to push updates to your app.

The following sections show examples of the deployment process for Fly.io and Heroku.

Run the following command to deploy your app to Fly.io:

Push the app to Heroku. This will automatically build the docker image and deploy the app:

After you deploy your app, you need to update URLs in the app's settings so that the app can be tested and used. The following settings need to be updated to point to your hosted app:

• App URL: The base URL of your app. This URL should match your HOST / SHOPIFY_APP_URL environment variable.
• Allowed redirection URL(s): The callback URL for your app. This is usually the same as the app URL, with /auth/callback (for Remix apps) or /api/auth/callback (for Non-Remix apps) appended.

1. From the Partner Dashboard, go to Apps.
2. Select the app that you deployed to your hosting provider.
3. On the Configuration page, in the URLs section, update the App URL and Allowed redirection URL(s) settings.

The following are examples of URLs that you might set for Fly.io and Heroku:

After you update your app URLs in the Partner Dashboard, you can test the app in a development store to make sure it's configured correctly.

1. In the Partner Dashboard, go to your app's Overview page.
2. In the Test your app section, click Select store and then choose a store to test the app.

• Keep developing your app. When you make changes that you want to deploy to production, you can deploy your app again.
• Select a distribution method for your app and distribute it to users.