Deploy your web app
Shopify CLI lets you use your local environment to run your app during development. However, you might want to deploy your web app to test the functionality in a different environment, or deploy your app to a production environment to get it ready for distribution. In this tutorial, you'll learn how to deploy your app for testing or production using your preferred hosting provider.
What you'll learnAnchor link to section titled "What you'll learn"
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
RequirementsAnchor link to section titled "Requirements"
Step 1: Set up hostingAnchor link to section titled "Step 1: Set up hosting"
To make your app available to Shopify and to merchants, 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.
Set up hosting with Fly.ioAnchor link to section titled "Set up hosting with Fly.io"
Set up hosting for your app in Fly.io.
flyctland sign up for Fly.io. For detailed steps, refer to the Fly.io docs.
Navigate to your app directory:
Run the following command to create a new app in Fly.io and create a
Set up hosting with HerokuAnchor link to section titled "Set up hosting with Heroku"
Set up hosting for your app in Heroku.
- Download and install the Heroku CLI and Docker.
Navigate to your app directory:
Log in to the Heroku CLI:
Log in to the Heroku Container Registry:
Create an app in Heroku:
This command configures Heroku with a container-based app and creates a Git remote branch named
herokufor deploying the app. It also returns the URL to where the app will run when it's deployed.
Step 2: Retrieve environment variablesAnchor link to section titled "Step 2: Retrieve environment variables"
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.
Navigate to your app directory:
To retrieve the values that you'll need to set as environment variables, run the following command using your preferred package manager:
Take note of the
SHOPIFY_API_KEY, and the
SHOPIFY_API_SECRETvalues. You'll need to set these values as environment variables for your hosted app.
Step 3: Set environment variablesAnchor link to section titled "Step 3: Set environment variables"
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 port on which to run the app. For apps built using the Node app template, this variable needs to be set to the same value as the
||The fully qualified domain name (FQDN) where the app will be accessed when it's deployed. Must include HTTPS.|
||The app's access scopes, retrieved using Shopify CLI.|
||The client ID of the app, retrieved using Shopify CLI.|
||The client secret of the app, retrieved using Shopify CLI. This value should be stored securely.|
The following examples describe how to set up environment variables in Fly.io and Heroku.
Configure Fly.ioAnchor link to section titled "Configure Fly.io"
Configure your Fly.io app to run your app code and communicate with Shopify.
Update the Anchor link to section titled "Update the fly.toml file"
From your project root, open
[env]section, add the following environment variables, using the format
[[services]]section, change the value of
internal_port. This value needs to match the
Your config file should look similar to the following for a basic Node app:
Set environment secretsAnchor link to section titled "Set environment secrets"
In a terminal, set the API secret for your app:
Configure HerokuAnchor link to section titled "Configure Heroku"
Configure your Heroku app to run your app code and communicate with Shopify.
Create a Heroku config fileAnchor link to section titled "Create a Heroku config file"
At the top-level directory of your app's source code, create a
heroku.ymlfile with the following content:
heroku.ymlfile to your Git repository:
Set environment variablesAnchor link to section titled "Set environment variables"
In a terminal, add the environment variables for your app using the
heroku config:set command with the following syntax:
Step 4: Deploy your appAnchor link to section titled "Step 4: Deploy your app"
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.
Deploy to Fly.ioAnchor link to section titled "Deploy to Fly.io"
Run the following command to deploy your app to Fly.io:
Deploy to HerokuAnchor link to section titled "Deploy to Heroku"
Push the app to Heroku. This will automatically build the
docker image and deploy the app:
Step 5: Update URLs in the Partner DashboardAnchor link to section titled "Step 5: Update URLs in the Partner Dashboard"
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
- Allowed redirection URL(s): The callback URL for your app. This is usually the same as the app URL, with
- From the Partner Dashboard, go to Apps.
- Select the app that you deployed to your hosting provider.
- On the App setup 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:
|Hosting provider||App URL||Allowed redirection URLs|
Step 6: Test the appAnchor link to section titled "Step 6: Test the app"
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.
- In the Partner Dashboard, go to your app's Overview page.
- In the Test your app section, click Select store and then choose a store to test the app.