404s on the Proxy URL

[lmartins]

Sorry for all the questions.
I'm still a bit puzzled with the site communication with the app via proxy.

I have the app proxy setup as follows:

When i visit the store URL that is linked to this proxy, I see the activity showing up in the ngrok log, however it seems to return an HTML with a redirect in it:

On the frontend the network activity shows the following:

Any idea what would cause this?

Thanks so much for any help you may provide.

[ncpope]

Is your proxy route "/" i.e: https://www.example.com/?

Your route "/" should normally handle authentication for your embedded app and should be your home route. You should then create a separate route like "/proxy" within your app that will handle proxy requests. You should also add the auth.proxy middleware on it.

It would then look something like this:

Route::any('/proxy', 'ProxyController@index')->middleware('auth.proxy');

Then within the Shopify partners panel you could set your proxy url to: https://www.example.com/proxy or https://example.ngrok.io/proxy

[lmartins]

Hi @ncpope , thanks for your input!

I do have the sample home route that came with the default install:

Route::get('/', 'DashboardController@index')->middleware('auth.shop')->name('home');

I then have created a minimal test case for the proxy route:

Route::get('/proxy', function () {
  return response('Hello, world!', 200)->withHeaders(['Content-Type' => 'application/liquid']);
})->middleware('auth.proxy');

On the app proxy settings in Shopify, I have it setup pointing to the root URL:

And was trying to hit the proxy URL by visiting the namespaced url at:

https://3c887b11.ngrok.io/apps/product-builder

as this was the app proxy URL on the test site:
https://cl.ly/2G2A312Z3F2w

I think I'm missing something, but can't quite understand what.

I was expecting that by hitting the store URL above, I would get the hello world message on my screen, instead I get those http error codes for the authentication process.

Thanks so much for any insights on this you may provide.

[ncpope]

Hi @lmartins

This is what is happening when you have a proxy and Shopify handles a request to that proxy url:

• User visits example.myshopify.com/apps/product-builder
• Shopify makes a request to your server at: https://3c887b11.ngrok.io/proxy
• If your response is Liquid then they will place your response where {{ content_for_layout }} is found in the theme
• If your response is valid and not liquid, your response will be the only thing that shows.
• If you response is not valid it will just show 'There was an error in the third party application'

This is how you would fix your issue:

Inside of your shopify partner panel you need to set the url to https://3c887b11.ngrok.io/proxy This is because your app doesn't have a route for /apps/product-builder. You have the route as /proxy

The /apps/product-builder is for the shopify store, the url you enter below that is the url that Shopify will call when a user visits that shopify url.

[lmartins]

ahhh that did the trick!!
Thanks so much @ncpope :))))