Deploy to a hosting service
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.
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.
In this guide, you'll learn how to deploy your Shopify app template for testing or production using your preferred hosting provider. You'll also learn the steps for building and running an app in production mode, without using Shopify CLI.
What you'll learn
Anchor link to section titled "What you'll learn"In this guide you'll learn how to complete the following tasks. You can also explore some provider-specific examples to help you get started.
- Create a new Partner app
- Build your app
- Set up a database container
- Set up environment variables
- Update your app URLs
- Run your app
- Test your deployed app
Requirements
Anchor link to section titled "Requirements"You've created an app using Shopify CLI, or you've migrated your app to work with Shopify CLI.
Step 1: Create a new Partner app
Anchor link to section titled "Step 1: Create a new Partner app"Create or link your app to the correct app in the Partner dashboard.
Create a new Partner app if you haven't yet, or use an existing one:
Get the necessary environment variables to deploy your app. You can also create a new Partner app if you haven't done that yet with this command:
Note down the
SHOPIFY_API_KEY
,SHOPIFY_API_SECRET
, andSCOPES
values, as you'll need them for the next steps.
Step 2: Build your app
Anchor link to section titled "Step 2: Build your app"The Shopify Remix app template comes set up with Vite, which can build the bundles you'll need to host your app. It also includes a Dockerfile
that contains the instructions to build a Docker container, since many hosting providers support Docker containers directly.
If your provider doesn't support Docker, then you'll need to build your app directly. To do that, you can run the build
script with your package manager. This will create a build
folder in your project which contains the compiled app.
After building, you can run the start
script in a similar way to run the app, but you'll need to set a few things up before you can run it:
Step 3: Set up a database container
Anchor link to section titled "Step 3: Set up a database container"Now you'll decide which database you'll use, and where to host it. There are several cloud platforms that provide specialized database containers. You can use whichever storage strategy you're most comfortable working with.
By default, the Remix app template uses an SQLite database (through the @shopify/shopify-app-session-storage-prisma
package).
Before deciding on which database to use, understand that the template default quickly sets you up for development but has the following limitations:
- It's file-based, so it must run in a container that provides filesystem access.
- Because it relies on files, it can only run a single instance, so it's harder to distribute.
- It can be slower than more powerful systems like Postgres or MySQL for very large databases.
Database considerations
Anchor link to section titled "Database considerations"Scaling your app
Anchor link to section titled "Scaling your app"The default configuration in the template stores your database in an SQLite file alongside your app's web code. If you need to add more web containers, then you'll also need to host the database in its own container.
Encrypting data at rest
Anchor link to section titled "Encrypting data at rest"While Shopify will always use HTTPS to transfer data securely to and from the app, we recommend that apps encrypt their session data at rest to add another layer of security to your data.
Specifically, apps should encrypt the access tokens in their storage to prevent unwanted access to shop data, in case their database is compromised. Most cloud providers make it possible to encrypt your data in their containers by default.
Preventing SQLite data loss
Anchor link to section titled "Preventing SQLite data loss"If you only need one web container, then consider setting up a different volume to store your database file when using SQLite to ensure your app continues to work after going to sleep.
Step 4: Environment variables
Anchor link to section titled "Step 4: 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'll need to set these values manually in your hosting provider.
You'll need to set the variables that you obtained previously, along with some other values, in your production environment. Please see your selected provider's documentation for information on how to do that.
The following environment variables need to be provided:
Variable | Description |
---|---|
PORT |
The port on which to run the app. For apps built using the Remix app template, this variable needs to be set to the same value as the EXPOSE value in the Dockerfile . The default value is 3000 . |
SHOPIFY_APP_URL |
The URL origin where the app will be accessed when it's deployed. Must include https:// . |
SHOPIFY_API_KEY |
The client ID of the app, retrieved using Shopify CLI. |
SHOPIFY_API_SECRET |
The client secret of the app, retrieved using Shopify CLI. This value should be stored securely. |
SCOPES |
The app's access scopes, retrieved using Shopify CLI. This is only necessary if you're not using Shopify-managed install. |
Step 5: Update your app URLs
Anchor link to section titled "Step 5: Update your app URLs"To deploy, you need to update URLs in the app's settings so that the app can be tested and used.
- From the Partner Dashboard, go to Apps.
- Select the app that you deployed to your hosting provider.
- On the Configuration page, in the URLs section, update the App URL and Allowed redirection URL(s) settings with the following values:
- App URL: The base URL of your app. This URL should match your
SHOPIFY_APP_URL
environment variable. - Allowed redirection URL(s): The callback URL for your app. In the Remix template, this is the same as the app URL, with
/auth/callback
appended.
- App URL: The base URL of your app. This URL should match your
Step 6: Run your app
Anchor link to section titled "Step 6: Run your app"After you've set up your database and environment variables, you can deploy and run your app.
Set your hosting provider to run the start
script in your container. Most providers will run start
by default.
Step 7: Test your deployed app
Anchor link to section titled "Step 7: Test your deployed app"After you update your app URLs in the Partner Dashboard, you can test your app in a development store to make sure that 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 choose a store to test the app.
You can follow the steps above to deploy your app using any hosting provider you prefer that can run JavaScript apps. The following are instructions for some popular platforms:
- 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.