Cloudflare Tunnel Shows Healthy, but Shopify App Won't Load

Partner Discussions
1

I’m developing a Shopify app and trying to make my app load inside the Shopify admin. However, after days of troubleshooting, I keep getting the error:

“app.pixla.dev refused to connect.”

Here’s what I’ve done so far:

  • I have set up a Cloudflare tunnel to my local development environment. The tunnel status in Cloudflare says “Healthy.”
  • The URLs in my Shopify app settings match the URLs in my app’s config files.
  • My app runs fine locally, but it won’t load inside Shopify admin.

I suspect that something is wrong with the communication between my Mac (local dev environment) and Shopify through the tunnel.

I’m looking for someone experienced in Shopify app development & Cloudflare tunnels who can help me debug this issue. If you’re a consultant and work with this, I’m happy to discuss compensation.

Would really appreciate a second pair of eyes on this! Thanks in advance. :pray:

2

I use Cloudflare tunnel to run Shopify app on my local.

# terminal 1
cloudflared tunnel --config .cloudflared/config.yml --url localhost:<my-port> run <my-dns>

# terminal 2
shopify app dev --tunnel-url <my-tunnenl>:<my-port>

What do you see if you run Cloudflare tunnel with --loglevel debug flag?
Also, did you confirm if your port is open?

3

My Terminal confirms that:

  • The Cloudflare tunnel is running on my machine.
  • It’s actively routing traffic to/from my local server.
  • My local application (The Shopify app running on localhost:8080) should be accessible via the tunnel’s DNS endpoint.

Upon start of the application:
shopify app dev --tunnel-url https://dev.pixla.dev:8080

The URL is confirmed and matching (same with API KEY etc)
web-backend │ Loaded SHOPIFY_APP_URL: https://dev.pixla.dev

The URL in my .env file is matching with the URL in my Shopify Admin links.

The Tunnel inside Cloudflare shows: HEALTHY

Can see the project on my GitHub here

To me, everything looks connected and fine, but still I get the screen you can see in the image

Skärmavbild 2025-03-03 kl. 11.26.58
Skärmavbild 2025-03-03 kl. 11.26.583212×1390 160 KB

4

Why do you have server.js separately? web/index.js already runs server.

Also, I saw you are using Shopify Node template but I see some difference. I recommend comparing your code and app template.

image
image1866×640 103 KB

5

Thanks,

I removed the server.js file, added /routes/settings.js and updated the web/index.js.

Now I get the error: “SyntaxError: Cannot use import statement outside a module”

Even though I am using the ES modules correctly accross the files…

17:36:35 │ web-backend │ SyntaxError: Cannot use import statement outside a module
17:36:35 │ web-backend │ at wrapSafe (node:internal/modules/cjs/loader:1378:20)
17:36:35 │ web-backend │ at Module._compile (node:internal/modules/cjs/loader:1428:41)
17:36:35 │ web-backend │ at Module._extensions…js (node:internal/modules/cjs/loader:1548:10)
17:36:35 │ web-backend │ at Module.load (node:internal/modules/cjs/loader:1288:32)
17:36:35 │ web-backend │ at Module._load (node:internal/modules/cjs/loader:1104:12)
17:36:35 │ web-backend │ at cjsLoader (node:internal/modules/esm/translators:346:17)
17:36:35 │ web-backend │ at ModuleWrap. (node:internal/modules/esm/translators:286:7)
17:36:35 │ web-backend │ at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
17:36:35 │ web-backend │ at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
17:36:35 │ web-backend │ at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:122:5)
17:36:35 │ web-backend │
17:36:35 │ web-backend │ Node.js v20.18.2
17:36:35 │ web-backend │ [nodemon] app crashed - waiting for file changes before starting…

This Shopify App setup is really exhausting I have to say! :clown_face:

6

I was able to replicate the issue. I saw the error comes from /config/db.js file.
You will need to place those files in web directory.
Also, I saw your app uses Node + Express + MongoDB. I highly recommend checking @kinngh’s app template - Shopify Node.js x Express.js x React.js Boilerplate.

1 Like
7

Current Status: Invalid Path Error in Shopify App Preview

I wanted to share the current status of my Shopify app project and see if anyone has encountered a similar issue or has suggestions.

Project Setup:

  • I’m developing a Shopify app and running it with the following command:
    npm run dev -- --tunnel-url https://dev.pixla.dev:8080

  • The app URL is configured as https://dev.pixla.dev and the tunnel is set up through Cloudflare. The tunnel status is healthy and I’m able to run the app locally.

  • App Configuration:

    • App URL: https://dev.pixla.dev/
    • Redirect URLs: All required redirect URLs are set in the Shopify admin:
      https://dev.pixla.dev/auth/callback,
      https://dev.pixla.dev/auth/shopify/callback,
      https://dev.pixla.dev/api/auth/callback

  • Environment Variables: The .env file includes the correct SHOPIFY_API_KEY, SHOPIFY_API_SECRET, and other necessary credentials.

  • App Routing (React):
    I’m using React for routing with react-router-dom:

<Router>
  <Routes>
    <Route path="/" element={<Navigate to="/dashboard" />} />
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/settings" element={<Settings />} />
    <Route path="*" element={<Navigate to="/dashboard" />} />
  </Routes>
</Router>

Issue:

When previewing the app in the Shopify admin, I’m getting the following invalid path error with the following URL:

Skärmavbild 2025-03-04 kl. 09.19.02
Skärmavbild 2025-03-04 kl. 09.19.022410×610 99 KB

Invalid path /?embedded=1&hmac=ec2c4cb0b2fd998a61a0143a2b7a0840c9b58ac9cc270a2cb7ddcf70adbeb693&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3R1ZGlvLXN3YXJ0eg&id_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczpcL1wvc3R1ZGlvLXN3YXJ0ei5teXNob3BpZnkuY29tXC9hZG1pbiIsImRlc3QiOiJodHRwczpcL1wvc3R1ZGlvLXN3YXJ0ei5teXNob3BpZnkuY29tIiwiYXVkIjoiNTNiNjZjNGM5MzZhNTYyMTA5ZTA1NWMzMDU3MDlkZTEiLCJzdWIiOiIxMTEzOTA4MTg2MzIiLCJleHAiOjE3NDEwNzUwOTAsIm5iZiI6MTc0MTA3NTAzMCwiaWF0IjoxNzQxMDc1MDMwLCJqdGkiOiI2OWNkZDhkNS03YmEzLTRhNjctODU5My05Zjk2ZWY1OGFmOTgiLCJzaWQiOiI1YTk1ZmQyMy00ZDFkLTRiM2UtOTdiZC05OWU3NDMzMTk3ZmQiLCJzaWciOiI5OWE2YjEyZTYxY2IzMWM4NTc0NTZiNGExOTIzNWQ3YjViOGVlMjBmMmMwNGI1ZGFhYmM5MGQ4YmU5ZGViNTFhIn0.wwRq1xxfH8qxetdjC8kgkMnR9RsW8PlkYm4cabuCo-Q&locale=en-SE&session=f17bff19d52a3f23f28c6ab65b8f86a2b8e9901b3b817eb582674ea0b2324561&shop=studio-swartz.myshopify.com&timestamp=1741075030

What I’ve Verified:

  • The redirect URLs are correctly configured in Shopify admin.
  • The SHOPIFY_API_KEY and SHOPIFY_API_SECRET are set up in the .env file.
  • The app is running successfully in development mode with npm run dev.
  • The tunnel is working, and I’ve confirmed the local server responds with 200 OK when checked with curl.

Next Steps:

  • I’m still troubleshooting the invalid path error. The app seems to be configured correctly, and the environment setup appears fine, but the issue persists.
  • If anyone has experienced something similar or has any suggestions, I would appreciate your help!

Thanks in advance for any tips or insights!