How to setup and use Shopify App Proxy

The `How To Build Shopify Apps` course is now available! Get it on Gumroad 👉 kinngh.gumroad.com/l/how-to-make-shopify-apps 👈
We go over how to setup app proxy in your Shopify app using my open source boilerplate repository, and not just run a few commands and be up and running, but explaining things step by step on how and why things work, breaking things on purpose and understanding why they break and how to fix it.
Links mentioned in the video:
- Boilerplate GitHub Repo: github.com/kinngh/shopify-node-express-mongodb-app
- Shopify app proxy documentation: shopify.dev/apps/online-store/app-proxies
- ShopifyDev's video on app proxy: kzbin.info/www/bejne/kJrYmKd-ecinfM0
Twitter: kinngh
Substack: kinngh.substack.com
Web: harshdeephura.com
Heura Media: heuramedia.com
Markers:
0:00 - Introduction
0:11 - How to setup app proxy
4:40 - Changing app proxy URL from the storefront
6:26 - How to make GraphQL calls from app proxy routes
9:30 - How to server HTML from app proxy routes
11:12 - Getting creative with app proxy
17:22 - Outro

[@KinnghHeura]

"How to build Shopify apps" course is now available! Get the preorder discount using the code `PREORDER` at checkout for $100 off! kinngh.gumroad.com/l/how-to-make-shopify-apps?offer_code=PREORDER

[@manuelpineda924]

Thank you so much!!!! I was struggling getting the proxy to work, and it was because on the merchant side it had a different proxy than the app configuration. I spend like an entire day trouble shooting and it was that simple.

[@KinnghHeura]

Haha we’ve all been there!

[@purplepigfarm5391]

Thank you sir! You saved my sanity. Your content is amazing, I see a new rising star in the KZbin developer space!

[@RamsheedKC]

I was struggling with app proxy. got it working. thanks. keep up the good work

[@ShajeyRumi]

Thanks a lot. this was exactly what i needed today.

[@wakilahmed2704]

Hello! Thanks for providing us with amazing tutorials. Can you please help me with the following issue? From my default products page in the storefront when a customer clicks a product I wanna check that product's metafields and then based on the conditions I wanna render that product in a totally customized product page. How can I do that? Thanks!

[@KinnghHeura]

RTFD

[@wakilahmed2704]

@@KinnghHeura Sorry, I didn't understand man! What did you mean? Read the full doc? Rich Text Format Directory?

[@nitinjangra1892]

I am having trouble setting up proxy on the official shopify cli boilerplate node template. I did all the things you mentioned in this video but still not working

[@KinnghHeura]

You'll need to add the verify proxy middleware and pass it like I have in my repo.

[@becky5124]

Hey Hardeep, great video thank you :) this is super helpful! I want to create a Shopify app to utilise it as a proxy to make calls from the liquid code so that it can handle Shopify API requests securely for me. I've been trying to spin up a really simple app to just focus on the proxy routes, but I've come across many issues with auth. I've just started to look into your boilerplate (which is awesome btw!) and I was looking to strip it back for my use case (i.e. focus on the proxy routes so I can use Shopify API to add meta data to customers on certain actions) and I was wondering if I would still need a DB in this case? I assume the DB is to persist the session and store data? (sorry complete newbie here to Shopify app dev!)

[@KinnghHeura]

So first I'd recommend learning your stack, and then hoping on dev. Yes, we need to auth so the proxy works, so we need the database^

[@becky5124]

@@KinnghHeura great thank you. Node JS is the stack I typically work with, but I am relatively new to it still.

[@nehagawali461]

Thanks a lot for video...I search a lot .. finally I get what I want🙏🙏🙏

[@LukeMilsom]

Amazing! Great video.

[@nopockyforkitteh]

Hey thanks for the video. Does this work on a development store? I tried setting up an app proxy and everything works great in the browser. However, if I attempt to hit the app proxy URL from Postman or Javascript, the response always redirects to the password page. Maybe i'm missing something?

[@KinnghHeura]

Postman / external calls won't go through since we have middle wares to ensure the request only come from shopify. You can hard code a bypass in your verifyProxy middleware to allow for external calls on a specific store when in dev mode

[@nopockyforkitteh]

@@KinnghHeura that makes sense. We got it working. Thanks so much for the reply!

[@VipashaKatna]

Thanks for video. Is this possible to have proxy app to embed on home page? Or can I customize it to add some JS? It is created by some other developers to add a builder from external store. Now I have to change the logo to ours and add some JS to have additional functionality. I am new to Shopify. I have to link that shopify builder to Magento cart.

[@KinnghHeura]

Your theme extension can be embedded anywhere in the store and add in HTML/CSS/JS/Liquid

[@VipashaKatna]

@@KinnghHeura Any videos for embedding it in theme or customizing app?

[@KinnghHeura]

@user-vz4ns1dp2c I've moved all of that over to courseware, but you can read the docs and get it done easily!

[@amandapratescaetano4876]

Hello! Amazing video! I have a question about using app proxies with theme app extensions. I created an app and I need to list on the store online (theme) the product that I set up on the app interface. Is it possible to use app proxies in this context? The idea is to let the user pick a product on the app UI and list it on the theme. Thank you!

[@KinnghHeura]

I'm not sure I understand

[@tejasvyas8862]

It was useful but I have use case, for example, I want to modify the collection pages to change the order of the products using proxy, how this could be possible?

[@KinnghHeura]

Make a GraphQL call from your proxy to update the order or to your database, whatever the context of collection order is.

[@ayushmukhopadhyay7470]

Hey how do we render a js file using shopify app proxy any Idea ?

[@KinnghHeura]

You do not render using a Shopify proxy. You only send requests via a proxy and do UI via a theme extension

[@ayushmukhopadhyay7470]

But we can render right the liquid file .... What if I convert the js into cdn and pass the cdn as a script in liquid and render that liquid ?

[@KinnghHeura]

I won't recommend that, you're probably over engineering.

[@NolanWagner-s9c]

I can't authenticate the app with the store without running into a MongoDB error, this is after commenting out the connection line in index.js. So the DB is required? The setup says I can leave it blank.

[@KinnghHeura]

If you're running mongodb on default settings you can leave it blank in env. The setup never asks you go leave it blank on index.js

[@ewe-666]

proxy be workin lol

[@KinnghHeura]

Well it do be workin' ™ 🤣 No but for real a lot of people get stuck on Proxy, so I wrote that in just to have a chuckle for when you finally figure out (for the first time) that it's working!

[@ewe-666]

also that use case with the download links is pretty genius! props to you for that

[@清水太一-x1q]

この動画は最高です！ありがとう！日本の26歳男より

[@KinnghHeura]

温かいお言葉をありがとうございました！ (Google翻訳を使用して完了)