Why is Ngrok failing to start the tunnel in my app development?

Technical Q&A
1

I do not know why this is happening all of a sudden, but I keep getting this Ngrok error whenever I try to run ‘npm run dev’ for hosting my shopify app. It seems to have something to do with the url generation for Ngrok as the error is thrown from this line in the ‘generateURL’ function of the ‘urls.js’ file.

const result = await plugins.runTunnelPlugin(config, frontendPort, 'ngrok');
if (result.error === 'multiple-urls')
throw new error.Bug('Multiple tunnel plugins for ngrok found');
if (result.error === 'no-urls' || !result.url)
throw new error.Bug('Ngrok failed to start the tunnel');

Here is the error, it gets thrown every time right after the ‘dependencies installed’ message

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Ngrok failed to start the tunnel

Stack trace:
at generateURL …/node_modules/@shopify/app/dist/cli/services/dev/urls.js:59
at processTicksAndRejection… node:internal/process/task_queues:96
at async generateFrontendUR… …/node_modules/@shopify/app/dist/cli/services/dev/urls.js:43
at async dev …g-app/node_modules/@shopify/app/dist/cli/services/dev.js:25
at run …p/node_modules/@shopify/app/dist/cli/commands/app/dev.js:17

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Anyone have any ideas about this? I’ve tried deleting all the npm packages, re-installing them, and upgrading the CLI. The token for Ngrok is set and everything too.

1 Like
2

I have encountered the same issue today. Have you found a fix for it?

3

I found the solution today. I used cloudfare. Follow below steps:

Step 1: Run “cloudflared tunnel --url http://localhost:3000”.

Step 2: One URL will be generated in the CMD for example “https://example.trycloudflare.com”. Copy that and use it in Step 3.

Step 3: sudo npm run dev – --tunnel-url https://example.trycloudflare.com:3000.

Hope it helps. Cheers :slightly_smiling_face: