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.

Anchor to What you'll learnWhat you'll learn

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

• Create a new app configuration
• Set up your container and database
• Build and run your app
• Deploy your Shopify app configuration
• Test your app

Anchor to RequirementsRequirements

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

• You've selected your hosting service, and your account is able to create and deploy apps on it.

Anchor to Step 1: Create an app configuration fileStep 1: Create an app configuration file

Create or link your app to an app.toml file. We recommend that developers have one configuration for development, and a separate one for production. That way, you can continue to develop your app after deploying it, without affecting your production environment.

1. Either create a new configuration, or use an existing one:

   Terminal

   Copy

   $

   $

   shopify app config link

2. Get the necessary environment variables to deploy your app:

   Terminal

   Copy

   $

   $

   shopify app env show

3. Note down the SHOPIFY_API_KEY, SHOPIFY_API_SECRET, and SCOPES values. You'll need to set them as environment variables before you can run your deployed app.

Anchor to Step 2: Build your appStep 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. If your provider doesn't support Docker, then you'll need to build the app yourself.

1. Copy your app's code to your container.

2. Install the app's dependencies:

   Terminal

   npmyarnpnpm

   Copy

   $

   $

   npm ci

   $

   $

   yarn install --frozen-lockfile

   $

   $

   pnpm install --frozen-lockfile

   npm ciyarn install --frozen-lockfilepnpm install --frozen-lockfile

3. Run the build script with your package manager. This will create a build folder in your project that contains the compiled app:

   Terminal

   npmyarnpnpm

   Copy

   $

   $

   npm run build

   $

   $

   yarn build

   $

   $

   pnpm run build

   npm run buildyarn buildpnpm run build

With this, your app will be ready to run, but you'll still need to set up a few things before you can do that.

Anchor to Step 3: Set up your databaseStep 3: Set up your database

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), which is automatically set up by Prisma when you run the setup script.

After your database is set up, update the /prisma/schema.prisma file to point to it. We recommend using an environment variable, to allow using a different database for development and production.

Before deciding on which database to use, understand that the template default quickly sets you up for development but has the following limitations:

• SQLite is file-based, so it must run in a container that provides filesystem access.
• You can only use multiple web containers if you create a separate container or volume for the database.
• It can be slower than more powerful systems like Postgres or MySQL for very large databases.

Anchor to Encrypting data at restEncrypting 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.

Anchor to Step 4: Set up environment variablesStep 4: Set up 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. For information on how to do that, refer to your provider's documentation.

The following environment variables need to be provided:

Anchor to Step 5: Deploy your configurationStep 5: Deploy your configuration

Before running the app on your hosting provider, you'll need to update your Shopify settings by deploying your TOML file using Shopify CLI.

1. In the shopify.app.*.toml file for your deployment environment, set application_url to the same as the SHOPIFY_APP_URL environment variable:

   shopify.app.toml

   9

   1

   2

   3

   4

   5

   6

   application_url = "<SHOPIFY_APP_URL>"

   
   

   [auth]

   redirect_urls = [

   "<SHOPIFY_APP_URL>/auth/callback",

   ]

2. Deploy your configuration to apply the changes to Shopify:

   Terminal

   Copy

   $

   $

   shopify app deploy

Anchor to Step 6: Run your appStep 6: Run your app

After you've set up your database and environment variables, you can run your app.

1. Run the setup script to create or update your database:

   Terminal

   npmyarnpnpm

   Copy

   $

   $

   npm run setup

   $

   $

   yarn setup

   $

   $

   pnpm run setup

   npm run setupyarn setuppnpm run setup

2. Run the application with the start command:

   Terminal

   npmyarnpnpm

   Copy

   $

   $

   npm run start

   $

   $

   yarn start

   $

   $

   pnpm run start

   npm run startyarn startpnpm run start

If the database or environment variables aren't set up properly, the start script will fail to run. Check your logs if your app fails to start after deploying it.

Anchor to Step 7: Test your deployed appStep 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.

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

Anchor to Re-deploying your appRe-deploying your app

As you continue developing your app, you can re-deploy it with the following steps:

1. Select your production app with Shopify CLI:

   Terminal

   Copy

   $

   $

   shopify app config use

2. Deploy your app configuration and extensions, if you made any changes:

   Terminal

   Copy

   $

   $

   shopify app deploy

1. Stop your production server, and re-run the build and start scripts.

Anchor to Next stepsNext steps

• 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.