Shopify app proxy never working for me

Retired Boards Appdev Store Design
1

Hi guys:

I’m sure this is a newbee question, but I just can’t figure this out based on the official documentation.

I have my first app up and running on a remote server, I have all the oauth done. I can access store data from my remote app now.

My next step is to setup app proxy so I’m able to make ajax request from store frontend to my app backend for communication.

Now, my conf in app dashboard is

Sub path prefix: app

url: ajax

proxy_url: http://app.myapp.com/ajax

On my remote server, I have http://app.myapp.com/ajax/test/ returns a simple string back. (python backend, url tested to be working)

When I’m access https://myshop.myshopify.com/apps/ajax/test. It gives me 404. I double check on my app server. No http request was received. Can anyone help me understand what’s going wrong with this setup? I couldn’t find anything to help me in the documentation.

Thank you guys in advance.

2

Find a typo above. should be below

Sub path prefix: apps

url: ajax

proxy_url: http://app.myapp.com/ajax

3

Hi Kelvin,

You are getting a 404 because https://myshop.myshopify.com/apps/ajax/test isn’t a valid proxy page. You can set it to https://myshop.myshopify.com/apps/ajax, but there can’t be an additional slash at the end of your path. The path in the shop doesn’t need to match the path in your app. Our documentation has some sample code you can reference.

Cheers,

4

Hi Busfox:

Thanks for you reply. What I got from the documentation is https://example-store.myshopify.com/apps/my-app-proxy/app_path

In my config:

example-store.myshopify.com = https://myshop.myshopify.com

my-app-proxy = ajax

app_path = test

What’s the difference between the documentation and my example? https://myshop.myshopify.com/apps/ajax/test

5

Hey Kelvin,

You’re absolutely right! I just tested it on my test app, and it should work with the third slash in the path. Can you let me know the shop and app name you are trying this with so I can take a look?

Assuming you have a route in your app at http://app.myapp.com/ajax/test, and the proxy page is set up properly in the admin of the shop you are using, you should be good.

6

Hi Busfox:

Here’s my app http://app.williamswitzer.com/ajax/test/ , which is working.

Sub path prefix: apps

Url: ajax

Proxy Url: http://app.williamswitzer.com/ajax

Thank you for looking at this. What I’m expecting is https://william-switzer.myshopify.com/apps/ajax/test will forward http request to http://app.williamswitzer.com/ajax/test/ if I understand the documentation correctly.

7

It looks like the proxy page in your shop admin is setup at /apps/app rather than /apps/ajax. If I go to https://william-switzer.myshopify.com/apps/app/test, it works. You can update the address in your admin here:

1 Like
8

This is so strange. I have screenshot attached. I’ve never use app as the url in conf..

9

Really appreciate your help. Finally, I know this is working!

10

Hi Busfox:

Do you have any idea why this is happening. Would like to know for future development. Thanks a lot.

11

URLs

App URL

https://fffe4ea4.ngrok.io/shop_ci/auth/access

Whitelisted redirection URL(s)

https://fffe4ea4.ngrok.io/shop_ci/auth/authCallback

Proxy URL

Sub path prefix - apps

Sub path - ciapp-proxy

Proxy URL - https://my-first-st.myshopify.com/apps/ciapp/shop_ci

My app is in partners dashboard

12

I have created the proxy url according to shopify guide, but my app is not working in frontendhttps://my-first-st.myshopify.com/apps/ciapp/shop_ci Please help me to resolve this

13

I have created the app, but i want to communicate backend to frontend in my app. So please help me for this

14

I have added the proxy url for my app, but it does not communicate with frontend, so please help me

I have also changed the url like your above example, but it does not work.

https://app.my-first-st.myshopify.com/ciapp/

15

Any body please give reply on this and please help me

16

Just in case it helps some people, as I was banging my head against the wall on this. I was using a local dev environment to test the Shopify App signup and App page processes, which work fine as the requests come from directly your browser.

The app-proxy, on the other hand, involves Shopify’s backend (not your browser) making an HTTP request to your Proxy URL to download the contents of your page.

In my case, the Proxy URL I was using was not publicly accessible, so once I switched to use Ngrok it worked fine.