Use-localhost - Error forwarding web request: AggregateError

Shopify CLI and Libraries
1

I’m trying to use the new --use-localhost option but it doesn’t seem to work in my case.

Actually everything seems fine till I’m trying to reach to the app.

cli shows the Error forwarding web request: AggregateError

App is running fine without https on port 5173, but not reachable via https with randomly created port.

P.S. My app is a react frontend with vite.

2

Hi @batuhannarci – Thanks for reporting. Can you provide some more information that might help us diagnose?

  • Is it accessing the app home that triggers the error?
  • Could you provide a screenshot or copy/paste of the CLI logs that show the AggregateError?
  • Can you provide any additional details on your Vite setup?
  • What are the contents of your shopify.web.toml?
  • Which OS are you running?

Thank you!!

-Nick

3

Hi @NickWesselman

  1. At first, everything is fine, but the error shows up when I access the app.

  2. cli log
    cli log1224×706 83.9 KB

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    cors: false,
    headers: {
      'Content-Security-Policy': `frame-ancestors 'self' https://admin.shopify.com;`,
    },
  },
})

roles = ["frontend"]

[commands]
dev = "yarn dev"
build = "yarn build"
  1. MacOS 15.4

I appreciate your help

4

And just to confirm, this works fine behind Cloudflare Tunnels without --use-localhost? You’re using FRONTEND_PORT to assign the vite port somewhere? (see docs)

Any helpful details on the AggregateError if you add --verbose?

shopify app dev --use-localhost --verbose
5

Aww :man_facepalming: FRONTEND_PORT this is the trick. We did not define any port before. Vite was using the default port. After setting this env, everything works flawlessly.

Putting this as a caution to the usage of --use-localhost may help others.

Thank you so much @NickWesselman

Regards

6

Glad you figured it out!

I’m struggling though as to why this issue would be specific to --use-localhost. If you use Cloudflare (just shopify app dev) or ngrok tunnels (--tunnel-url), the proxy still needs to know what port Vite is running on and/or Vite needs to use the FRONTEND_PORT, right?

7

We were using our custom localtunnel server. So Shopify did not know whether this was a tunnel or not. We manually set the app/callback URL to our tunnel address.

This usage was a bit historic :slight_smile:

Thanks to Shopify, it saved us.

1 Like