Why can't I bypass the ngrok warning message in my app development?

Shopify Apps
1

Hi all.

I am new to the Shopify ecosystem.

When I try to follow the documentation for creating an app, I get stuck after installing the app to my dev store. (https://shopify.dev/apps/getting-started/create)

I can create the app fine, and connect to ngrok, and install to the store. But when I get to using the app in the store, I cannot get past this message.

You are about to visit:

xxxxxxx.eu.ngrok.io

When clicking the “Visit site” button, it just shows the same message again. I have tried recreating the app several times, but to no avail.

Since the 3.x CLI change, there is limited documentation and I cannot find anyone else having this issue.

Attatched is a screenshot with the IP removed. The blue button is the one that keeps redirecting me to the same page.

Any help is appreciated. Thanks

Screenshot 2022-06-28 143404.png
Screenshot 2022-06-28 143404.png1280×848 27.3 KB

1 Like
2

I run the app using “npm run dev” if that helps.

3

When accessing through the local URL, i get the following errors. I have not modified the install at all:

adamwintherAKQA_0-1656424831097.png
adamwintherAKQA_0-1656424831097.png570×936 56.3 KB

4

I solved it.

My problem was that neither Chrome or Firefox could load the app correctly, but Edge can manage it.

If you haven’t tried Edge, give that a shot.

1 Like
5

Another note, this was possibly due to strict cookie policy.

6

Another note, this was possibly due to strict cookie policy.

7

I got this from the readme file:

You can run dev using an alternate tunnel URL.

Download Cloudflare here: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/

I don’t know if this will work the same way for other operating systems but I did this on windows:

  1. Rename the downloaded cloudflared-windows-amd64.exe file to cloudflared.exe

  2. Open a terminal in the same directory as the cloudflared.exe file.

  3. Run this in the terminal: ./cloudflared tunnel --url http://localhost:3000

  4. Out of the logs produced by cloudflare you will notice a https URL where the domain ends with trycloudflare.com. This is your tunnel URL. You need to copy this URL as you will need it in step 6.

  5. Open a new terminal on your app root.

  6. Run one of these depending on your package manager:

    yarn dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000

    npm run dev – --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000

    pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
    *replace the url with the url you got from step 4 and don’t forget to add the port at the end.
    *notice the extra “–” when you use npm. This is not documented in the readme file.

I don’t know when this information got added to the readme file but I’m new to this and ran into some problems when solving this issue. This makes it more clear I hope (at least for windows).

Source for creating a tunnel with Cloudflare:

Start a tunnel following these steps: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/

8

Thanks for the response :slightly_smiling_face:

The issue was with my browser settings, being too “aggressive” and blocks trackers, ads and fingerprinting. This resulted in it not being able to load correctly.

After switching to a standard Edge setup, it worked.