How can I use NGROK for Shopify app proxy development?

[SasySaa]

Hi, i’m sorry if this is a duplicate question but i’ve never found a Direct Response:

-I’m creating a Shopify APP Node Template + Shopify App Extension

-I need to do exacly what Liz explain in Shopify App proxy Tutorial (Using NGRok for Dev Test)

(2) Shopify App Proxies Explained | Shopify Development - YouTube

-I need to call my backend function to create a metafield in a user from javascript plain Asset Extension: i’ve already tried to call my function using react from a Page Object and it’s all OK (whitout proxy obvs) but when i call the Route from JS FrontEnd it returns an Html response with NGROK

This is my index.js Route

This is my javascript standard plain fetch

Shopify App Proxy Configuration

Browser Response (Wrong URL? Why it returns me a 200 and dont’ create the metafield in The shop like app correctly do? )

[oscprofessional]

Hello @SasySaa

Please refer this: Might be will help you -

https://ngrok.com/docs/errors/err_ngrok_6024

[jeff0723]

Why don’t use the useAuthenticatedFetch provide Shopify node template?

[SasySaa]

Hi Jeff! this is what i’ve tried to do but authenticaedfetch is in hooks folder (APP) while i need to use it in my extension/assets plain js file.

When i use es6 import, mi liquid file give me import error , is there a way to use authenticatedfetch in plain JS?

[taricatarica]

Hey man, I have the same problem, could you get it to work?

[SasySaa]

Hi! We resolved the problem in this way: We Edit the EndPoint API to accept Options type request.
Shopify extension Native JS only do Options Request, you don’t need the proxy that doesn’t work.

[taricatarica]

@SasySaa Thanks for your fast reply, I have been tryed that what you say but still not working. After a couple of hours of trying and searching, I found that is a known ngrok issue, I followed those steps(https://github.com/Shopify/shopify-app-template-node#i-cant-get-past-the-ngrok-visit-site-page), and now it’s working. I hope that maybe can be useful to another one whit this problem.

[aviita]

I decided to ask about this NKROG since they seem to be directing to contact their support from the error page.

It was a fast reply and they are suggesting to upgrade to paid plan. But they also linked to this blog post.
https://blog.ngrok.com/posts/fighting-abuse-on-the-ngrok-platform

Since Shopify is relying quite heavily on this ngrok already they could quite easily just detect that when using ngrok address they need to add header ngrok-skip-browser-warning to the proxy requests they do on backend.

[aviita]

It seems though that also setting a custom user agent value (as they instruct to do on the Ngrok blog) also gets me some progress. It maybe somehow breaking my Shopify API call to /apps/proxy/, but at least not the ngrok error anymore.