How to make a Shopify app
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- The `How To Build Shopify Apps` course is now available! Get it on Gumroad 👉 kinngh.gumroad.com/l/how-to-m... 👈
We go over my open source boilerplate repository on how to make a Shopify embedded application, 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...
- Shopify API Scopes: shopify.dev/api/usage/access-...
- Shopify Webhook Subscription Topics: shopify.dev/api/admin-graphql...
Twitter: / kinngh
Substack: kinngh.substack.com
Web: harshdeephura.com
Heura Media: heuramedia.com
Markers:
0:00 - Introduction
0:55 - Setting up the project
1:44 - Understanding folder structure
5:54 - Available developer utilities
6:22 - Env variables
8:22 - Packages and NPM scripts
9:24 - Updating Shopify partner dashboard programatically
10:56 - Database schema and models for Shopify app
12:34 - Custom session storage
14:30 - Content security policy for embedded Shopify app
15:33 - isShopActive middleware
15:57 - Verifying request with verifyRequest middleware
18:36 - How to setup OAuth in embedded Shopify app
25:15 - Express server
36:46 - Starting the app
41:25 - Testing verifyRequest middleware
44:24 - Frontend / React.js
48:15 - How to make requests to your express server from Shopify app
51:09 - How to use billing api in embedded Shopify app
52:13 - Debugging the return URL
54:15 - How to setup app proxy on Shopify
57:04 - Outro
"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
Is the discount “PREORDER ” expired? Why does it say it's invalid? Do you have another discount code
Hey! The preorder period ended on 8th^
Nope. Nextjs and MERN
Hi Harshdeep. Could you briefly mention what will be covered in this gumroad course, and how different will it be compared to the YT videos? Considering to purchase, but since I am getting started with Shopify Apps, would like to double confirm, if it would be useful for a beginner!
You are what i am looking for!!! Thank you for this
Awesome work man! Great done, please keep them coming, noone else is making content for shopify apps right now on YT (with latest content cli etc) !
Appreciate it! There's more to come, of course!
Wow. You absolute legend. I'm only 12 minutes in and I can see this should be the official Shopify node app repo.
Wonderful video. I've been struggling so much to understand how Shopify apps actually work, and this video is a lifesaver. It should be the first step in Shopify App documentation.
You're amazing, buddy! I struggled for three days using the official documentation, but I set up the environment myself in just three hours after watching this video. I was feeling hopeless, but you're incredible
Thank you so much for the kind words!
Thanks mate!
Thank you! :)
So cool thx
Watching the video the third time right now. I think it is amazing and it's explaining everything I've been trying and failing to do when creating Shopify app for the first time. Even now, as my team's first app is on the app store, I am benefiting from your walkthrough.
On my side, I'd love if you would publish detailed explanation of the entire authentication process, as well as a detailed explanation of how the GDPR webhooks work. I understand that these work out of the box if you use this app template, but when you're struggling to adapt some other template or have an app based on CLI 2, getting a deeper understanding of these would be a lifesaver.
Thanks for the video!
I'll be going in bulk creation mode once my start of year work is done! I have this planned out for this month to start recording over every possible thing I can think of^
Never seen such detailed video of shopify app. Thank you so much for making this type of content. I have so much issue on understanding auth process can you make a seperate video for it
Thank you for the kind words!
- Docs on OAuth: github.com/Shopify/shopify-api-js/blob/main/docs/guides/oauth.md
- My BETA course, “How To Make Shopify Apps” on Gumroad: kinngh.gumroad.com/l/how-to-make-shopify-apps
Nice video
Great work harsh deep, I am following your repo and trying to build a app when trying to deploy on Heroku getting an error vite is not found. Can you tell which buildpack you are using for the deployment?
I'm not adding any build packs and letting it handle things by default. Maybe double check your config?
This template is amazing. Much easier to follow. I've been playing around with it. Even installed an extension. Any advice on how to deploy it?
For render they recommend hosting client and server separately. Is that how you do it too?
I bundle them together, Frontend and backend. Heroku and Fly are great IMO
@@KinnghHeura Thank you. Ill play around with this. Also saw ur X posts. Hope youre feeling better!
Hey while testing out your endpoint directly in the browser how do you not get the Ngrock browser check, I only came across the option to bypass is by providing a header in the request
That's the only way to do it^
@@KinnghHeura ohkey thanksss.
I face another weird issue with ngrok and app proxy for theme extension, I am able to send a request from the storefront to the proxy URL but not to my app, tried doing the same but just deployed the app on gcp instead and the request went through couldnt figure out why.
Your code and vid have been super helpful in understanding how shopify does things much appreciated :)
Hey! Can you provide an example of how to redirect to a custom billing page in the auth process if the user has no active subscriptions? I’m struggling to intercept the callback flow and call the graphql client I’m getting a accessToken undefined error when attempting to check subscriptions,
Thanks!
You can't use managed install then, have to use the OAuth method and when you come to home, just run a redirect if user isn't subscribed
Awesome work. I am struggling with one thing. I want to create a product & add it to the cart dynamically through proxy URL callback. Is it possible? If it is how do I do that? I wrote graphql for product create but it is saying "Access denied for productCreate field. Required access: `write_products` access scope. Also: The user must have a permission to create products"
It's literally asking you to add `write_products` in the API access scope and then make a call 🤦♀️
Hey ! Thank you for the video very helpful :D I am struggling with the creation of a theme app extension. The "extensions" fiel is created with the demo rating in the root directory. But I can not preview it, I have to deploy the app directly for the extension to appear in the partner dashboard, but the blocs are not visible in the theme editor, does anyone encountered the same issue ? Thanks for your help :D
I've answered it in your other comment, but you're missing presets in the schema.
Docs: shopify.dev/docs/themes/architecture/sections/section-schema#presets
Hello @Harshdeep, your customized repo going to very helpful more be, because you removed all unnecessary files and filders from shopify cli app. Just one request you create this video about 1 year ago and now your repo has lots of changes in it. So pleases can you create a quick video on new changes you had. I will more beneficial more and mant more.
Thanks you.
Hey! Yep that is in the works - I've set time aside in February to refresh both Express and Next.js boilerplate videos to go over both of them again!
Thanks for sharing