How to pass data between "THEME-APP-EXTENSION" and the backend of the app?

[jameshagood]

I am trying to figure out how to pass data between the theme-app-extension and the backend of the application that the theme-app-extension is connected to. The theme-app-extension is all liquid, css, and javascript so I wasn't sure if there was a built in way to pass data between the two. For example is there a suggested method to pull data into the theme-app-extension from the database and is there a suggested way to send data to the database from the code running the theme-app-extension? I am fairly new to doing anything with theme-app-extensions as well as building Shopify applications. I have built Shopify applications that was admin facing or just cosmetic, this is my first time building a Shopify application that takes user input and sends it to the database and retrieves that data for the end-user to see. 

Any suggestions would be greatly appreciated.

Thank You.

[jameshagood]

For anybody else reading this in the future with the same problem.

The answer is to use shopify app proxies, https://shopify.dev/apps/online-store/app-proxies

a rough outline of the steps I took to do this.

1. Set up the proxy in the shopify dashboard
2. Make a route in the app to handle the requests sent to that endpoint
3. Save that data to the database of the application

[jameshagood]

I don't really know but the way I got it to work was just by putting the ngrok url (APP URL) in the App Proxy proxy url field in the APP SETUP panel. in the subpath prefix I put apps and in the subpath field I put the app name. That worked for me and I am able to send data from the theme-app-extensions to the backend api route and save the data into the database and retrieve that data for the shopify admin area dashboard. Let me know if this helps or not.

[diego-navarro]

Hello Jameshagood, your answers are very helpful.

The ngrok URL changes frequently, do you update the APP URL manually? If not, how do you handle this change? Do you think using the ngrok URL would work in production?

[jameshagood]

yes I update every time it changes which is like once a day. The app I am building isn't in production yet but in production you should just be able to put whatever the URL is for the app once it is on servers somewhere with a HTTPS URL

[jameshagood]

I have built a couple different shopify apps when I was trying to learn how to do it, so I have never put one in production. the one I am currently building will be my first live shopify application that I built. 

[fportillo]

This sounds very helpful! Exactly same question I had, I was wondering if you know anything about this but when I make a fetch request like shown in the video, it routes to a different ip address then ngrok even if I added that in the proxy configuration. Did you ever get that? I am perhaps starting my app wrong.

[raultoks-peppy]

Hello James, could you provide some insight into the naming of routes and the verification of incoming requests from the proxy. I have followed the same steps, I am able to send a request to the app-proxy but unable to get it through to the backend api. I receive no errors It simply doesnt connect to the backend.

[jameshagood]

This has been a little while ago since I done this. I looked at the code I had to see the routes I had set up and I had a POST route to /proxy

[raghav_kanwal]

@jameshagood Thanks for sharing your knowledge with the community, I am still facing the same issue and have posted the details here - https://github.com/Shopify/shopify-api-js/issues/802

Could you please have a look and if possible can you share snippet code which worked for you ?

Thanks

[raultoks-peppy]

I managed to get everything working by simply deploying the app to gcp, the proxy requests simply wouldn't go through for a ngrok url, initially they were blocked by ngroks default browser check but even disabling that changed nothing. So the routes were defined correctly only to begin with thus no blockers on that front.