About app proxies and dynamic data

App proxies take requests to Shopify URLs, and proxy them to your app. This allows you to fetch and display data on a storefront from an external source.

A Shopify app can have only one proxy route configured. Any paths under this root URL will proxy to your app.

Anchor to How it worksHow it works

Shopify will proxy a storefront URL to your app based on your app proxy configuration:

In this example:

• https://<shop_url>/apps/my-custom-path will proxy to https://<application_url>/my-app-proxy.
• https://<shop_url>/apps/my-custom-path/child-route will proxy to https://<application_url>/my-app-proxy/child-route.

Configuring an app proxy requires the write_app_proxy access scope.

Anchor to Getting startedGetting started

Use the following steps to create an app proxy using the Shopify React Router template.

Anchor to RequirementsRequirements

• You're a user with app development permissions and have created a dev store.

• You're using the latest version of Shopify CLI.
• You're using the latest version of Chrome or Firefox.

• You've created an app that uses the React Router template.

Anchor to Step 1: Create the proxy routeStep 1: Create the proxy route

1. If it's not already running, start the shopify app dev command.

   Terminal

   Copy

   $

   $

   shopify app dev

2. Create a route in your app to handle proxy requests at app/routes/my-app-proxy.jsx:

   app/routes/my-app-proxy.jsx

   Copy

   99

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   17

   18

   19

   20

   21

   import { authenticate } from "../shopify.server";

   import { useLoaderData } from "react-router";

   
   

   export const loader = async ({ request }) => {

   // Use the authentication API from the React Router template

   await authenticate.public.appProxy(request);

   
   

   // Read URL parameters added by Shopify when proxying

   const url = new URL(request.url);

   
   

   return {

   shop: url.searchParams.get("shop"),

   loggedInCustomerId: url.searchParams.get("logged_in_customer_id"),

   };

   };

   
   

   export default function MyAppProxy() {

   const { shop, loggedInCustomerId } = useLoaderData();

   
   

   return <div>{`Hello world from ${loggedInCustomerId || "not-logged-in"} on ${shop}`}</div>;

   }

Anchor to Step 2: Update configurationStep 2: Update configuration

1. In shopify.app.toml in the root of your app, add the write_app_proxy access scope.

   shopify.app.toml

   Copy

   9

   1

   2

   [access_scopes]

   scopes = "write_app_proxy"

2. In the same app configuration file, add your app proxy configuration:

   shopify.app.toml

   Copy

   9

   1

   2

   3

   4

   [app_proxy]

   url = "/my-app-proxy"

   prefix = "apps"

   subpath = "my-custom-path"

Anchor to Step 3: Test the app proxyStep 3: Test the app proxy

1. The shopify app dev command will automatically update the app on your dev store.

2. Test the proxy by opening the proxied path on your storefront. In this example that's https://<shop_url>/apps/my-custom-path.

Anchor to App proxy propertiesApp proxy properties

All properties are required.

Anchor to User customizationUser customization

Users can change the subpath or prefix of app proxies in Shopify Admin by navigating to Settings > Apps and sales channels > {your app} > App proxy > Customize URL.

While users can change this information to get a friendlier URL that fits their store's information architecture, these changes don't affect the root destination URL for your proxy endpoint.

Because these values are configurable by users, changes to the subpath and prefix in your app will only apply to new app installations.

Anchor to Liquid responseLiquid response

App proxies support Liquid, Shopify's template language. An app proxy response that contains Liquid will be rendered with store data into HTML like it was part of the store's theme.

If the HTTP response from the proxy URL has Content-Type: application/liquid set in its headers, then Shopify renders any Liquid code in the request body in the context of the shop using the shop's theme. Otherwise, the response is returned directly to the client. Also, any 30x redirects are followed.

Anchor to Disallowed headersDisallowed headers

Due to security concerns, the following headers are stripped from app proxy responses:

• Accept-Patch
• Accept-Ranges
• Connection
• Cookie
• Date
• Delta-Base
• IM
• P3P
• Pragma
• Preference-Applied
• Proxy-Authenticate
• Public-Key-Pins
• Server
• Service-Worker-Allowed
• Set-Cookie
• Trailer
• Tk
• Warning
• X-Powered-By

Anchor to Next stepsNext steps

• If you're not using the React Router template, then you can build your own authentication for app proxies.
• Explore the app configuration reference for app proxies.