How to Build a Shopify App with Node and React

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ต.ค. 2024

ความคิดเห็น • 180

  • @ephraimmulilo7098
    @ephraimmulilo7098 4 ปีที่แล้ว +180

    For some reason, I decided to skip this tutorial at the start of my development journey and just brute force my way to making a Shopify app. A few weeks later I came back and finally watched the full thing and boy, most of the stuff I was struggling with are made so much easier in here. Don't skip the tutorial people.

    • @NajeebShaikh1010
      @NajeebShaikh1010 2 ปีที่แล้ว

      Thanks for the helpful advice.

    • @gavinchan4627
      @gavinchan4627 2 ปีที่แล้ว

      You are absolutely right 🤣

    • @noodlespwn42
      @noodlespwn42 2 ปีที่แล้ว

      thanks for sharing!!

    • @eeswarb3352
      @eeswarb3352 2 ปีที่แล้ว +1

      i am skipping for her faking a deep voice or trying to speak sexy whatever? don't know which part of US this style of speaking developed but its very irritating to listen..

  • @jonathangardn
    @jonathangardn 4 ปีที่แล้ว +30

    One of the best tutorials about building Shopify Apps. The CLI looks great, the biggest struggle of setting all up it's over with this.

  • @alanjouhar8313
    @alanjouhar8313 2 ปีที่แล้ว +3

    Shopify never fail to disappoint me

  • @SoshJam
    @SoshJam ปีที่แล้ว

    This was super helpful! I've been scratching my head trying to figure this out for ages but this is the first tutorial that's actually worked.

  • @ringreen6165
    @ringreen6165 4 ปีที่แล้ว +4

    Thank you for this tutorial. What's really interesting for me is the same workaround, but in TypeScript.

  • @frankthoeny2248
    @frankthoeny2248 3 ปีที่แล้ว

    I like Shopify App Bridge and Polaris when working with React pages. It's a year late, but thank you for this video.

  • @MKorostoff
    @MKorostoff 2 ปีที่แล้ว +1

    Thanks Jennifer, great video. I had the time of my life and I never felt like this before.

  • @J-HAYER
    @J-HAYER 3 ปีที่แล้ว +2

    Thank you for this tutorial. A TypeScript Starter Kit would be awesome!

  • @iamviduranishantha
    @iamviduranishantha 3 ปีที่แล้ว +3

    Much appreciated, this cleared most of my questions on how to start an app with react/Next with Shopify. Thanks for the great video. keep up the good work

  • @davidswingley9271
    @davidswingley9271 ปีที่แล้ว

    Perfect, thank you for your clear understanding of how and where to start in my Shopify App journey.

  • @mmoriarty
    @mmoriarty 4 ปีที่แล้ว +5

    What a fantastic explanation. Thank you, Jennifer!

  • @l4webdesign186
    @l4webdesign186 3 ปีที่แล้ว +4

    Such a superb tutor! Thanks for this useful and understandable tutorial

  • @CodeWithPaulIo
    @CodeWithPaulIo 3 ปีที่แล้ว +1

    Really great video. The CLI is very intuitive, so useful to have a component lib too. Looking forward to building Shopify Apps.

  • @realyozza
    @realyozza 4 ปีที่แล้ว +2

    Thank's for sharing this right when I needed it!

  • @jacobdavidcunningham1440
    @jacobdavidcunningham1440 ปีที่แล้ว

    2:30 rip
    great tutorial really thorough

  • @miguelsolis1839
    @miguelsolis1839 3 ปีที่แล้ว +1

    This was extremely helpful! Thank you!

  • @ProjectAutism
    @ProjectAutism 3 ปีที่แล้ว

    I really enjoyed this tutorial. Thank you so much for creating this for the user community.

  • @AmedeeBoulette
    @AmedeeBoulette ปีที่แล้ว

    Fantastic info!!! Very cool for developers….

  • @billblair3155
    @billblair3155 2 ปีที่แล้ว

    Hello Jennifer. Thank You, Very Much, for the video tutorial. Really appreciate. You were great, very informative and professional in Your presentation. One of the few video tutorials where the code actually worked. I think I'm in Love. Just kidding. I also read some of the comments below. While some of them were on point, requesting additional elaboration upon GraphQL requests, ..., as a teacher, I also understand the importance of staying with Your intended focus of instruction. Kindly, I humbly request, that You respond to the comments by continuing Your excellent approach to presenting the video tutorials and provide more videos related to the comments and requests below, including promises, array data extraction/manipulation and UI Development. Thanks, again, Very Much.
    Most respectfully submitted. P.s. You will never be able to please anyone. You're Great! Thx

  • @ananthvankipuram4012
    @ananthvankipuram4012 3 ปีที่แล้ว +1

    Actually very nicely done. I had been jumping from one tutorial to another and even went down the rabbit hole of using OSISET laravel wrapper for Shopify(BIG mistake!), and finally found this gem. They should push more videos. Perhaps, another future video on a detailed how-to on Polaris and Apollo?

  • @michelkant
    @michelkant 4 ปีที่แล้ว +5

    Great video with swift explanation on how to set up. Looking forward to more like this, for example billing. Maybe a series on building an actual app from scratch with everything included? That would really help to get a good idea 💡 on how to move forward. I'd look for intermediate coders as a target so not to spend too much time on react/node basics. Theres other channels for that. 👍 In any way, please keep going like this 👌 👌

  • @PappenbergerApps
    @PappenbergerApps 3 ปีที่แล้ว +3

    Great tut! Could you guys also make a video about implementing App Bridge in this kind of setup? It's difficult for many I think.

    • @jrwebapps2425
      @jrwebapps2425 3 ปีที่แล้ว

      Hey, have you manage to find any tutorials on implementing app bridge to make app load faster? I'm struggling to find one.

  • @karimnaufal9792
    @karimnaufal9792 3 ปีที่แล้ว +3

    Great video! A continuation to that tutorial would be awesome, i.e. How to connect to the GraphQL Admin API, does it have to be through getServerSideProps, or a React Context, or what?

  • @barrettwilson4750
    @barrettwilson4750 4 ปีที่แล้ว +1

    Amazing info! Love this.

  • @karimnaufal9792
    @karimnaufal9792 3 ปีที่แล้ว

    Awesome intro, thank you!

  • @Martin6724
    @Martin6724 3 ปีที่แล้ว +5

    Can we pleaseeee get a video for working with extensions, Argo, and/or the new Shopify Subscriptions API!!!

  • @vjnvisakh
    @vjnvisakh 3 ปีที่แล้ว

    awesome tutorial. loved it

  • @gavinchan4627
    @gavinchan4627 2 ปีที่แล้ว

    Very awesome video tutorial about Shopify app dev. Shopify-CLI tool is not so friendly with windows users. 😆

  • @LawrenceTaur
    @LawrenceTaur 4 ปีที่แล้ว +2

    That oauth flow looked effortless. We've been struggling to get our app approved with a React frontend and Dotnet Core backend, because the oauth flow works for us but doesn't work for the app approvers. Could the next video talk more about the oauth flow please?

  • @Gwibinjansagori
    @Gwibinjansagori 3 ปีที่แล้ว +6

    This is a great video and a great start for developers, though it's really frustrating how you stop before making a graphQL request. After looking long and hard, there are no resources that show you how to make a GraphQL request within the context of the node CLI boilerplate code. It seems impossible to connect the dots of Shopify without having an in-depth understanding of exactly what is happening behind the scenes with ApolloClient, ApolloBoost and wrapping the app in a provider.
    I know there is a Node/React tutorial on the Shopify website but that was created before the CLI tool and the way of making graphQL requests is different.
    Any plans to make a video that continues with this a little bit?
    Also it would be really great if the boilerplate came with a few comments...

    • @ashutoshpawar
      @ashutoshpawar 3 ปีที่แล้ว +5

      This is so true, I am facing the exact same issue as well. No way to figure out how to make GraphQL request here.

    • @boffinschist1098
      @boffinschist1098 3 ปีที่แล้ว

      Not even a reply to this but replied to comments like "great video"

  • @nortski78
    @nortski78 2 ปีที่แล้ว +1

    Can we have an updated tutorial as none of this works now, half the files are missing etc

  • @bokwoon
    @bokwoon 2 ปีที่แล้ว +3

    It's so hard to tell where React ends and Shopify client libraries begin. Please focus on a version that uses plain NodeJS as well 🙌

  • @arjunkjayan2884
    @arjunkjayan2884 2 ปีที่แล้ว +1

    very informative session, i have a query regarding the resource picker, How can we list the preselected products in the resource picker..?

  • @singhdarab
    @singhdarab 3 ปีที่แล้ว +1

    Can you please make video on authenticating customer using API?
    Thanks

  • @shibaprasaddash7324
    @shibaprasaddash7324 3 ปีที่แล้ว

    Very nicely explained everything things, It will better if you will remove subtitle so that code writing also visible.

  • @xingyahao4106
    @xingyahao4106 4 ปีที่แล้ว +4

    Very informative! Would CLI comes with ts and react hook optionals in the future?

  • @peterdaze1
    @peterdaze1 4 ปีที่แล้ว +3

    Great tutorial Jeniffer! , question, I want to give this a try so, if I'm building a site for a client, should i use their credentials to create the Partner's account, or is it more a thing of creating the account then creating different stores for different clients and then give them the credentials for the store.

  • @groovebird812
    @groovebird812 3 ปีที่แล้ว +1

    Hi, how can i handle Updates of my App? The App is live and the url's where i host the app are registered in the backend but i have to change the url if i develop locally on my computer.

  • @fevicoI
    @fevicoI 3 ปีที่แล้ว +1

    We are using a dedicated server for testing. We don't need Ngrok as it rate limits heavily and that leads to issues. How can we enable this on the 0.0.0.0 interface without breaking anything?
    Nice tutorial btw!

  • @prasheelchadotra7407
    @prasheelchadotra7407 3 ปีที่แล้ว +1

    Ngrok not found while starting development server again what to do?

  • @Romaintegrio
    @Romaintegrio 3 ปีที่แล้ว

    Thanks a lot for the good tutorial.
    Could you please post tutorial about how to "shopify node deploy"?

  • @omotoyosiadegbite6966
    @omotoyosiadegbite6966 3 ปีที่แล้ว +1

    kept getting this error {The PerformanceObserver does not support buffered flag with the entryTypes argument.
    } pls help!!!

  • @cmstudio8682
    @cmstudio8682 3 ปีที่แล้ว

    This is insane!

  • @maheshmedam1672
    @maheshmedam1672 4 ปีที่แล้ว +2

    Great Video.
    Just a small doubt. Once I select products like this, I would want to save them somewhere. Can you tell me how to save this ? What are the approaches ?

  • @Archalia
    @Archalia 3 ปีที่แล้ว

    Thank you for the video. In this case you are displaying content in the Admin dashboard of shopify, how do you add content within the storefront directly ?

  • @novapremiumgoods623
    @novapremiumgoods623 3 ปีที่แล้ว

    A little old compared to many new features introduced by shopify but still helpful.

  • @Ember_Chefs
    @Ember_Chefs 2 ปีที่แล้ว

    I got all of this part finally done but now all I see is a “no webhooks” error message when I go to the app. Any good beginner tutorials on how to fix that?

  • @MrHotChocolate
    @MrHotChocolate 4 ปีที่แล้ว

    Great video. Will you have any videos dealing with billing and app subscriptions?

  • @nicholasmaniccia1005
    @nicholasmaniccia1005 3 ปีที่แล้ว +1

    Hey the ngrok tunnel times out and doesn't update the url properly after a while. I have looked at this problem a lot and their are workarounds that don't always work and no solution. Can you guys please look at this, none of the issues opened or closed on your github solve this problem and I literally can't finish my app. I'm not experienced at all with ngrok and tunnel so I have no clue how to even solve this stuff.

  • @fevicoI
    @fevicoI 3 ปีที่แล้ว +1

    Btw seems like ngrok tunnel is causing an issue and nothing is rendered inside the demo store. Please help. How can we bind this to 0.0.0.0 or, external IP instead?

  • @MEYER251189
    @MEYER251189 3 ปีที่แล้ว +1

    Hello, i am trying to run shopify populate products and i have this error
    Command not allowed with current login. Please check your login details with shopify whoami. You may need to request additional permissions for this action.
    Somebody know how to fix this ?

  • @GmlA632L
    @GmlA632L 2 ปีที่แล้ว

    Hi, very nice tutorial Node.js, but I developer on Python, I have the question, It's the same procedure? thx.

  • @ryanh3457
    @ryanh3457 3 ปีที่แล้ว +1

    How do you make a request to GraphQL?

  • @kwskyblue
    @kwskyblue 3 ปีที่แล้ว +2

    Don't forget to install Git and add git.exe to your path or you'll get cryptic Ruby errors when trying to use Shopify Create.

  • @zathkal4004
    @zathkal4004 3 ปีที่แล้ว

    Wow..nice one thank you (:
    How can I import a csv product file into such an app and filter through it with check boxes ?
    Thanks in advance

  • @DgeoDev
    @DgeoDev 3 ปีที่แล้ว

    Great tutorial !!! but Graphql no access on theme assets :( it's not possible too create snippet in the theme obliged to additionally use shopify node api

  • @MrMarcoAlvarado
    @MrMarcoAlvarado 3 ปีที่แล้ว

    Interesting tutorial! If you want to become a shopify developer, is it necessary to be good at rails, or is it sufficient to be good at node and react?

    • @MrMarcoAlvarado
      @MrMarcoAlvarado 3 ปีที่แล้ว

      @@shopifydevs Ok, but I don't want to develop an app for myself, I want to work as a developer for whatever company. Is rails used at companies frequently, often, sometimes, sporadically!

  • @hankanguyenova1672
    @hankanguyenova1672 2 ปีที่แล้ว

    Hi, I'm missing the folder pages in my project, would you know why please? Thank you

  • @malikbrahimi7504
    @malikbrahimi7504 4 ปีที่แล้ว +1

    Hey Jennifer, thanks for the tutorial! Why exactly do we need to use Koa when we can use the Next.js API routes?

    • @malikbrahimi7504
      @malikbrahimi7504 4 ปีที่แล้ว +1

      Also is there a reason to use Next.js over CRA? I'd imagine because the app is embedded you'd want to avoid problems with the URL routing in an SPA as well as avoid issues with CORS but I'd appreciate an explanation.

  • @dave0811
    @dave0811 2 ปีที่แล้ว

    I am using CLI 3, but I can't find the .env file

  • @janelleb9691
    @janelleb9691 3 ปีที่แล้ว +2

    This is great but how do I upload my codes to a production server?
    I have tried running the test app on Windows. Apologies if I sound stupid.

    • @vaibhavkanmeriya5515
      @vaibhavkanmeriya5515 3 ปีที่แล้ว

      I also want to know this, if you got the answer plz.

  • @damianescobedo4143
    @damianescobedo4143 3 ปีที่แล้ว

    If you having trouble while creating the app and you get the error Invalid 'subject_token' and you are using firefox use chrome to log in instead

  • @LuthfanMursyidanM
    @LuthfanMursyidanM 5 หลายเดือนก่อน

    This tutorial is obsolete but i guess good to watch as still relevant

  • @tiagodroppa
    @tiagodroppa ปีที่แล้ว

    The setup and start of shopify-cli is not up to date. I'd appreciate if there is newer guide

  • @joshbedo8291
    @joshbedo8291 3 ปีที่แล้ว

    @ShopifyDevs can you cover how to deploy the Next.js Polaris app to say AWS? Not finding a lot of resources

  • @jacobteasley206
    @jacobteasley206 3 ปีที่แล้ว

    You need to get Heroku as well to host the app.

  • @shadab8798
    @shadab8798 2 ปีที่แล้ว

    Seems a lot has changed now and commands are working as expected like `shopify serve` is recognized.
    Can someone tell me any latest tutorails beginner-friendly?

  • @franciscocarlosgomes5691
    @franciscocarlosgomes5691 2 ปีที่แล้ว +1

    Estou trabalhando com shopify estou muito feliz uma venda

  • @bularistech110
    @bularistech110 2 ปีที่แล้ว

    please update this tutorial and guide us with more advacne content

  • @VennuGopal-x4s
    @VennuGopal-x4s ปีที่แล้ว

    Can we use Vue3 instead of React here?

  • @zacharywong5632
    @zacharywong5632 2 ปีที่แล้ว

    Can this work on only on Visual Studio Code, or can it also work on Intellij.

  • @dusanjovanovski8752
    @dusanjovanovski8752 3 ปีที่แล้ว

    Do you have any news when Polaris will be open for Angular?

  • @dorjsurenenhbold6400
    @dorjsurenenhbold6400 3 ปีที่แล้ว

    Hello nice video but I have a question. I am doing an app that my store user able to customize the product. So can i deploy my app at a custom domain and the user interact with it on a new page?

  • @fazalsandhi8399
    @fazalsandhi8399 2 ปีที่แล้ว

    Hello sir/mem, is there any chance you can show us how to display app in frontend product detail page like small button or something?, i am doing a lot of R&D but not getting proper results.

  • @rollingsoul3000
    @rollingsoul3000 3 ปีที่แล้ว

    Hello, I have a question, how to change or add a new "HOST" in the ".env" file? What are the power shell or cmd commands for a new ngrok hosting address? Mine expired since i'm currently on a free plan by ngrok. Thank you for all answers.

  • @dave0811
    @dave0811 2 ปีที่แล้ว

    Can I use Class components instead of React Hooks or functions?

  • @RaselAhmed-yo5mv
    @RaselAhmed-yo5mv 3 ปีที่แล้ว

    @ShopifyDevs Is there any full tutorial of the Shopify-Node-React app?

  • @is-sam
    @is-sam 3 ปีที่แล้ว

    Can we do the same thing with Angular or is it mandatory to use React ?

  • @Spectraevil
    @Spectraevil 4 ปีที่แล้ว

    Can't I use the shopify cli to create normal nodejs boilerplate code? As I don't want to use react, I want to use Angular or Vuejs.

  • @sachinsarola2734
    @sachinsarola2734 3 ปีที่แล้ว

    How can I store the access token in the database and if I have in database I don't want to auth so how can I skip auth process if I have access token of merchants

  • @himbary
    @himbary 3 ปีที่แล้ว

    I keep getting internal errors with the shopify CLI, I am trying to create a custom project

  • @vincentleeuwen
    @vincentleeuwen 4 ปีที่แล้ว

    For me this already goes wrong in 31:53. I'd like to create a private app but it wont open in my partner dashboard...

  • @josephandres4324
    @josephandres4324 3 ปีที่แล้ว

    Not reloading, it could be because i'm in a Vagrant box?

  • @superwebdevs6427
    @superwebdevs6427 4 ปีที่แล้ว

    Would it be possible to install CLI with choco package manager in future ?

  • @yarrutfranken9679
    @yarrutfranken9679 2 ปีที่แล้ว

    Every tutorial is about setting up a shopify APP with personal/fake .env credentials. Please make a tutorial on how to get an app live to a custom store or public with real store variables.

  • @iLoveTurtlesHaha
    @iLoveTurtlesHaha 3 ปีที่แล้ว +2

    5 mins in. Who the hell uses these packet managers? They look like stuff people used from 100 years ago. How do I do this with Npm?

  • @amym894
    @amym894 2 ปีที่แล้ว

    Please post latest video on create app in shopify

  • @jonice4229
    @jonice4229 3 ปีที่แล้ว

    instead of react, how about vue?

  • @samirkhanalofficial
    @samirkhanalofficial 4 ปีที่แล้ว

    will shopify come up with flutter sdk ?

  • @anitbishwas4671
    @anitbishwas4671 2 ปีที่แล้ว

    how to send graphql query here??

  • @nykroshatake5755
    @nykroshatake5755 3 ปีที่แล้ว

    hello i have a problem at 25:30 when she restart the serve when i do it it didn't work I have this error that appears : Tunnel my tunnel not found, can anyone please help me ?

  • @mgara514
    @mgara514 4 ปีที่แล้ว +1

    Good luck if you have an SPA or a Vue app ... brace yourselves ! and also ... btw the app bridge .. relies on the postMessage() so you need to deal with the origins and cross origin policy within the iFrame ... which is not trivial .. so if one day you find my comment ... just do a SSR for your embedded app ...

    • @mgara514
      @mgara514 4 ปีที่แล้ว

      Ive found a way to do it with a SPA. Let me know if you need help

    • @bennychan6263
      @bennychan6263 3 ปีที่แล้ว

      @@mgara514 you can simply use Vue with CDN. It's not that difficult to use in the App frontend. My approach is to use the template render (django jinja) as usual, include Vue on the individual pages.

  • @lts8683
    @lts8683 3 ปีที่แล้ว

    ngrok is very slow, is there any alternative? thank you

  • @techswitch1489
    @techswitch1489 2 ปีที่แล้ว

    Hi, how and where do you deploy this?

  • @sayilu
    @sayilu 2 ปีที่แล้ว

    some of the commands are outdated, you should use documentations for references.

  • @ayoalabi6921
    @ayoalabi6921 4 ปีที่แล้ว

    Thanks for this video, its been very helpful...m I am wondering if anyone could direct me to materials that can help me REST API calls from within the , instead of using GraphQL, I will like to also use some REST API resources that are not yet in graphql. Thank you

  • @pramodshehan2551
    @pramodshehan2551 4 ปีที่แล้ว

    I created simple app as you mentioned. But web hooks not working. I added submit button. When clicking on it, I am getting error called "method not allowed"

    • @jwk05003
      @jwk05003 3 ปีที่แล้ว

      Probably a CORS error

  • @wackodreamer
    @wackodreamer 3 ปีที่แล้ว

    Would anyone know how to get data from one store and transfer it to another?

  • @mostafadamirchi5833
    @mostafadamirchi5833 3 ปีที่แล้ว

    Hi, my name is Erfan, How I can be sponsor of your videos?

  • @tanjirmahabub5105
    @tanjirmahabub5105 4 ปีที่แล้ว

    Shopify-Cli it's not working in Windows 10