Theme app extension communication with app API

Technical Q&A

Topic summary

A developer is building a Shopify app with a theme extension that needs to communicate with the app’s API via App Proxy.

Initial Problem:

  • Theme extension fetch requests to /apps/proxy/inventory-level returned 404 errors
  • App Proxy was configured with path apps, subpath proxy, and proxy URL pointing to the app’s /api endpoint

Partial Resolution:

  • The developer resolved the 404 by correcting App URL and redirect settings in the app configuration
  • Proper setup includes ngrok URL as App URL, multiple allowed redirection URLs for auth callbacks, and App Proxy pointing to /api

Current Issue:

  • Requests now redirect to https://foo.myshopify.com/api/auth?shop=foo.myshopify.com instead of reaching the API
  • Server logs show the redirect request isn’t reaching the API endpoint
  • The developer suspects they need to handle redirection server-side, though this should be default behavior in the Shopify CLI boilerplate (npm init @Shopify/app@latest)

Status: Unresolved - another user reports experiencing the same problem, seeking solutions.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

I am creating an app with theme extension for one of my clients. I have setup app in Admin, where I load data from Shopify API. This part works well. For the theme extension, I created extension by generating it through shopify CLI. I implemented basic code where I want to call endpoint from my app, and load data. In app settings I updated the App url based on generated ngrok URL and added this URL to app proxy settings in which I set path to apps and subpath to proxy and set URL to https://***.eu.ngrok.io/api as my app endpoint is /api/inventory-level.

In my theme-extensions I am calling following request:

  const url = `/apps/proxy/inventory-level?${new URLSearchParams({variantId: variantId})}`
      return fetch(url, {
        method: 'GET',
        headers:{"Access-Control-Allow-Origin":"*"}
      }).then((data) => {
        console.log(data);
      }).catch(e => {
        console.log(e)
      })

which calls :

https://foo.myshopify.com/apps/proxy/inventory-level?variantId=XYZ

and I get 404 error. I guess I am doing something wrong with App proxy setup, but from what I went through I understand that my setup is correct.

Also, when I go to ngrok URL, that is generated with run dev command, I get error ERR_NGROK_3200. I have tried removing and adding proxy, I uninstalled all apps from the store, but allways get the same result.

I will be glad for any advice. Thank you.

1 Like
2

So I guess I managed to get rid of the initial 404, the correct settings was indeed:
App setttings:

App URL: https://{current app url ngrok ID}.eu.ngrok.io/
Allowed Redirection:
https://{current app url ngrok ID}.eu.ngrok.io/auth/callback
https://{current app url ngrok ID}.eu.ngrok.io/auth/shopify/callback
https://{current app url ngrok ID}.eu.ngrok.io/api/auth/callback

App proxy:
Path: apps
sub-path: proxy
proxy URL: https://{current app url ngrok ID}.eu.ngrok.io/api

Then in code:

const url = `/apps/proxy/inventory-levels?${new URLSearchParams({variantId: variantId})}`
      return fetch(url, {
        headers: {
          'ngrok-skip-browser-warning': 'true',
        }
      }).then((data) => {

        return data
      }).catch(e => {
        console.log(e)
      })

However I am now running into redirection error, where This requests redirects me to

https://foo.myshopify.com/api/auth?shop=foo.myshopify.com

Which returns 404, from my server logs it appears, that the redirect request is not reaching the API. Any pointers what would be the problem? I guess I have to handle the redirection on server, however I thought, this is done by default formnpm init @Shopify_77 [email removed]boilerplate code.

3

Hi, maybe do you find a solution? I have the same problem… :confused:

6 Likes