Tunnel bf256c0ea7e2.ngrok.io not found

Solved
Highlighted

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
0 Likes
Highlighted
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.

 

0 Likes
Highlighted

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
0 Likes
Highlighted

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
0 Likes
Highlighted

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
0 Likes
Highlighted

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
0 Likes
Highlighted

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
0 Likes
Highlighted

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
0 Likes
Highlighted
Trailblazer
173 13 28

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. 

0 Likes
Highlighted

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
0 Likes