Solved

Tunnel bf256c0ea7e2.ngrok.io not found

RoaldKamman
Shopify Partner
19 1 5

Hey everyone, 

 

Recently I chose to commit to learning how to create shopify apps by building one myself. 

I'm new to using ngrok and had no issues at first. But now when I run shopify serve and follow the URL I get to a blank screen with the error: 

Tunnel bf256c0ea7e2.ngrok.io not found

I have looked around and posted on their GitHub with an issue but there is no response. I have seen something about whitelisting because ngrok is supposed to generate a new URL every time it runs but I checked and the URL it keeps spinning up is the same constantly. It's also listed in my App setup url's correctly. 

 

Would really appreciate any help. I'm not ready to give up on my app idea. 

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
Accepted Solution (1)
RoaldKamman
Shopify Partner
19 1 5

This is an accepted solution.

I found a temporary workaround. 

For anyone else having this issue: https://youtu.be/Iw5Nu8zl9rc

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti

View solution in original post

Replies 27 (27)

Mothy
New Member
5 0 0

If you are using the free version of ngrok the url they give you expires after 8 hours.

You'll need to spin up a new instance to get a new URL and then update webhooks/callback accordingly.

 

RoaldKamman
Shopify Partner
19 1 5

Hey Mothy,

 

Thanks for your response. 

What you're saying makes sense but how do I get the command: shopify serve to create a new url? It keeps giving me the same one. 

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
RoaldKamman
Shopify Partner
19 1 5

Where do I update webhooks/callback? 

Does ngrok pass that information to the shopify cli somehow? Or is this the App setup redirection URL's  What goes where?

I don't know why this is not explained anywhere. I have been looking for this information for days now. nrok and Shopify documentation either don't have it or I wasn't able to find it. 

I have no problem running a ngrok server and displaying a project on my local machine on the URL but I can't seem to do the same when running the Shopify serve command since the URL there stays static even after it asked me to update it once it remained the same. 

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
RoaldKamman
Shopify Partner
19 1 5

So: 

url shopify serve always gives me: https://bf256c0ea7e2.ngrok.io/auth?shop=myfirstteststore01.myshopify.com

1* I run a new ngrok server: https://c7e7d62d0d9f.ngrok.io 

2* I change the url in app setup to the new ngrok url

3* I run shopify serve within the app

4* It asks me if I want to update the url

5* I say yes

6* the url stays the same and I get tunnel https://bf256c0ea7e2.ngrok.io/auth?shop=myfirstteststore01.myshopify.com not found

 

shopify cli print: 

 

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Try the new cross-platform PowerShell https://aka.ms/pscore6

PS C:\Users\rjkam\Desktop\GameVertion\GameVertionApp> cd gamevertion
PS C:\Users\rjkam\Desktop\GameVertion\GameVertionApp\gamevertion> shopify serve
√ ngrok tunnel running at https://bf256c0ea7e2.ngrok.io, with account r.j.kamman@gmail.com
√ .env saved to project root
? Do you want to update your application url? (You chose: yes)
√ Whitelist URLS updated in Partners Dashboard

* To install and start using your app, open this URL in your browser:
https://bf256c0ea7e2.ngrok.io/auth?shop=myfirstteststore01.myshopify.com

┏━━ Running server... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃ > shopify-node-app@1.0.0 dev C:\Users\rjkam\Desktop\GameVertion\GameVertionApp\gamevertion
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js

┃ [nodemon] 2.0.2
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching dir(s): server\index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ > Ready on http://localhost:8081

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
RoaldKamman
Shopify Partner
19 1 5

this also resulted in this message in ngrok:

GET / 502 Bad Gateway

GET / 502 Bad Gateway

GET / 502 Bad Gateway

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
RoaldKamman
Shopify Partner
19 1 5

I tried the following next: 

1* I noticed that the port used by the shopify cli was 8081 so I ran a new server on that port using ngrok. command: ngrok http 8081

2* In the app setup URL's changed the url to the provided url from ngrok: https://a24f4c51acf5.ngrok.io and the callback to: https://a24f4c51acf5.ngrok.io/auth/callback

3* I removed the expired URL from all fields. 

4* restarted vscode and ran a new terminal shopify serve command. again selected yes to update URL here follows the output: 

 

PS C:\Users\rjkam\Desktop\GameVertion\GameVertionApp> cd gamevertion
PS C:\Users\rjkam\Desktop\GameVertion\GameVertionApp\gamevertion> shopify serve
√ ngrok tunnel running at https://bf256c0ea7e2.ngrok.io, with account r.j.kamman@gmail.com
√ .env saved to project root
? Do you want to update your application url? (You chose: yes)
√ Whitelist URLS updated in Partners Dashboard

* To install and start using your app, open this URL in your browser:
https://bf256c0ea7e2.ngrok.io/auth?shop=myfirstteststore01.myshopify.com

┏━━ Running server... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃ > shopify-node-app@1.0.0 dev C:\Users\rjkam\Desktop\GameVertion\GameVertionApp\gamevertion
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js

┃ [nodemon] 2.0.2
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching dir(s): server\index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ > Ready on http://localhost:8081

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
RoaldKamman
Shopify Partner
19 1 5

ngrok output with that was: 

GET /auth/inline 400 Bad Request

GET /auth 200 OK

GET /auth/callback 403 Forbidden

GET / 302 Found

GET /auth/callback 403 Forbidden

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
policenauts1
Trailblazer
174 13 39

Are you building a node or rails app with shopify CLI?

Not sure if this will be helpful, but when I was using shopify CLI and building a rails app, everything was really straightforward - it automatically updated the ngrok url after it expired and if the ngrok url changed, it would also prompt me if I wanted to automatically update the app's URL accordingly within the partner dashboard. 

RoaldKamman
Shopify Partner
19 1 5

Hey, @policenauts1 thank you for your response. 

 

I'm using Node and React on this project since I'm more familiar with them. 

I will try building a new app with rails to see if that works.

I'm not too familiar with ruby nor rails. But I'm committed to this app and making Shopify my long-term development niche so I will have to learn them anyway.  

But first I'm heading for the gym.

 

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
RoaldKamman
Shopify Partner
19 1 5

This is an accepted solution.

I found a temporary workaround. 

For anyone else having this issue: https://youtu.be/Iw5Nu8zl9rc

“If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem. ” ― Jiddu Krishnamurti
gebeto
Visitor
1 0 16

Just delete ~/.cache/shopify/sv/ngrok.pid file, it helps me.

 


rm ~/.cache/shopify/sv/ngrok.pid

Chunky
Visitor
1 0 1

Thanks @gebeto  his is the quickest and easiest solution.

linen
Tourist
3 0 9

It works!!Thank you for your solution!!! I deleted ngrok.pid ubder C:\Users\{UserName}\AppData\Local\shopify\sv

buildpath
Shopify Partner
59 11 19

@linen  thank you for making it easier for windows users to find and delete ngrok.pid so that ngrok starts making new tunnels again when we run shopify app serve in terminal in vscode 🙂

Ecom entrepreneur since 2004 | Shopify App developer since 2021 | Shopify merchant and theme developer since 2016
den232
Shopify Partner
180 8 49

On windows 10, I deleted the directory C:\Users\{UserName}\AppData\Local\shopify\sv 

 

I believe this worked.  Previously, I had removed/reinstalled CLI, ruby, and ngrok2 in my user folder, with no effect.  I also switched from the free ngrok to the $240/year version, all with no effect.

CuttyBang
Tourist
10 0 2

The solution from @gebeto should be marked as the accepted answer. Works on MacOS & Windows.

Nathan,
Cutty Bang Multimedia
jasonmorgan
Visitor
1 0 0

This works confirmed on M1 Macbook Pro running Mac OS Big Sur by using...

rm ~/.cache/shopify/sv/ngrok.pid

in your terminal, as advised by gebeto above. Well done.

sravans
Shopify Partner
23 1 6

Thanks. This worked for me on Mac.

ykhakshoor
Visitor
1 0 1

There seems to be a much simpler solution than manually updating the Ngrok tunnel as suggested here. Instead, try running: 

rm ~/.cache/shopify/sv/ngrok.pid


This will delete your cache. When running Shopify app serve, it will ask to update your URL. Select yes. @RoaldKamman 

 

sagar_at_avyya
Shopify Partner
31 1 16

@RoaldKamman Could you please change the "Accepted Solution" to this one: https://community.shopify.com/c/shopify-apis-and-sdks/tunnel-bf256c0ea7e2-ngrok-io-not-found/m-p/992...

 

Deleting the pid file works

rm ~/.cache/shopify/sv/ngrok.pid

 


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

den232
Shopify Partner
180 8 49

linux/windows version of the answer, (I'm on win 10) ... this from one of the comments at that youtube video.   Worked for me!

 

 Deleting the file located at "{UserName}\AppData\Local\shopify\sv" on Windows and "~/.cache/shopify/sv/ngrok.pid" on Linux is more efficient solution if anyone is experiencing this issue.

Tony49
Shopify Partner
36 2 6

What worked for me was simply running "shopify app tunnel stop", mentioned in one of the comments of this youtube video.

wittybanter
Shopify Partner
1 0 0

$ shopify login --store=[STORE]

Virtualstone1
Visitor
1 0 0

Tried with the above procedures, still can't solve. Getting the same error

 

DeveloperDave
Visitor
1 0 0

Free ngrok tunnels expire, so you'll need to restart your tunnel. Shopify doesn't make it easy to take control of the tunnel yourself, so usually the accepted solution won't work. You'll need to stop the tunnel that shopify-cli thinks is running before serving.

 

I now include this in all my start scripts:

 

$> shopify app tunnel stop && shopify app serve

 

Be sure to select "yes" to update the application url.

charcole
Visitor
1 0 0

I've been having this problem as well. I learned that free ngrok urls expire, so I used `ngrok http 8081` to create a new one. and I changed .evn HOST to the new url that gave me. Didn't work. So I deleted ngrok.pid as answered above. Now I get "ngrok tunnel stopped" every time I try `shopify app serve` (the tunnel is running in another tab and didn't stop). Am I missing a step?

edit

 

edit: realized my mistake, I am not supposed to be running my own tunnel in another tab.

n8pickle
Visitor
1 0 0

I recently just had this issue and all I had to do was restart the tunnel and update the url

shopify app tunnel stop
shopify app tunnel start

while starting the app with shopify app serve I selected to update the url.

This fixed it for me