Shopify App Development | Setup App Proxy with Remix app

Поділитися
Вставка
  • Опубліковано 12 лют 2024
  • In this tutorial series, you'll learn how to establish a connection between custom theme extension to your remix application through the Shopify app proxy.
    If you like to contribute please check the Github link down below:
    🚩 Subscribe ➜
    / @ucp1fedtyrgzpleegquenkkq
    ❓ Questions - Please go ahead and ask. Let's all help each other.
    ☕ Buy Me A Coffee ➜ www.buymeacoffee.com/app/dash...
    👇 Follow Me On Social Media:
    Github: github.com/stefanoHTB
    Twitter: / stefm1000
    Shopify CLI Tutorial for Beginners
    #shopify
    #remix
    #webdevelopment
    #shopifyappproxy
    #programming
    #nodejs
    #javascript
    #liquid
    #api
    📚 Tutorial References:
    🔗 Shopify Official Site: shopify.dev/docs/apps
  • Наука та технологія

КОМЕНТАРІ • 61

  • @vertonnes
    @vertonnes 4 місяці тому +1

    Great tutorial Stephano. Congratulations on your didactic approach!

  • @richardsabando5670
    @richardsabando5670 4 місяці тому +1

    This is literally what I have been looking for. I have been looking for a modern solution with the remix template thank you!

  • @gabriellimombrinifeletti9933
    @gabriellimombrinifeletti9933 4 місяці тому

    Great tutorial! Finally i can connect my backend to my store, you're amazing bro!

  • @mdkhaledhossain996
    @mdkhaledhossain996 Місяць тому

    Thanks man, you are leading in shopify app developemnt. Saved my day!!!

  • @SaysCraig
    @SaysCraig 14 днів тому +2

    For anyone who finds this later and had the same issues as me here is some info.
    If you are using this to make a call to your server in order to then make a secure call to a third party or your admin, this setup in the video won’t return anything from your post request.
    Meaning you can’t get the response status or any returned info.
    This is because the .jsx file that the proxy is connecting you to, is returning the function component he builds.
    Just erase the function component from the .jsx file and only keep the Action function there. It will then return the data from the action instead of trying to return the component.

  • @loigideliguer2341
    @loigideliguer2341 Місяць тому

    Wow, this is the best explanation for newbies like me. Good job bro!

  • @gisellaviteribellettini5187
    @gisellaviteribellettini5187 4 місяці тому

    Wowwwww thanks stephano finally the best informations

  • @vivekagarwal1760
    @vivekagarwal1760 4 місяці тому

    Thanks a lot!!! This was very helpful

  • @ihor3729
    @ihor3729 4 місяці тому

    Thanks. What are the use cases of using app proxies?

  • @zakariabouzangad9702
    @zakariabouzangad9702 4 місяці тому

    Thanks, Very helpful

  • @marwanadel6208
    @marwanadel6208 21 день тому

    thank you my sir about this shopify remix app videos please keep going o
    n ❤❤❤❤❤❤❤❤❤❤❤❤❤

  • @eugenefedorov3498
    @eugenefedorov3498 3 місяці тому

    In which folder you have created proxy enpoint? The video is cut and we cant see it,.

  • @Leonirish2023
    @Leonirish2023 3 місяці тому +1

    How can i return json data in app.proxy.jsx and show this json data in liquid file.? Could you please help?

  • @ajhax4707
    @ajhax4707 4 місяці тому

    Hi, our app billing currency is USD and we charge merchants on usage-based. but the issue with merchants whose store currency is other than USD - if the merchant story currency is CAD and there if the app uses Canadian $100 their billing generates only US $100. Can someone please let me know how can we fix it?

  • @VanNguyen-cr6ns
    @VanNguyen-cr6ns 6 днів тому

    Can we setup aws cloudfront for app, my client complant about performance. I would like to setup a cache layer front of app.

  • @Maikolgames
    @Maikolgames 13 днів тому

    Does anyone know if there is another way without creating a checkout extension?

  • @user-zo2ky4mz7d
    @user-zo2ky4mz7d 4 місяці тому

    Thanks for the tutorial Stephano. Can you please make a tutorial on how to use app proxy that returns liquid syntax with checkout extensions? Thanks.

    • @wake-digital
      @wake-digital 2 місяці тому

      Checkout extensions can't work with Liquid, if that's what you mean.

  • @bestmotivationspeekar4384
    @bestmotivationspeekar4384 3 місяці тому

    bro how van uase custum api ???

  • @user-wf3tx6sf3d
    @user-wf3tx6sf3d 4 місяці тому

    how can i add apps in my store

  • @btsfreak
    @btsfreak 2 місяці тому

    Quick question... the app proxy Url is not secured at all so everyone can filter out the url from your front-end Javascript and then happily call your app proxy and thus do changes on your shopify data. Isn't this very dangerous? I get it that your app endpoint is shielded but the app proxy one is not.

    • @SaysCraig
      @SaysCraig 14 днів тому

      You are able to confirm authentication on the receiving end via a few methods.
      Also I’ve noticed if I try to access the app proxy from outside my app it redirects to a shop auth/login page.

  • @921kiyo
    @921kiyo 4 місяці тому +3

    Thank you for sharing this video! I have one question! I see the response status is 0 because of the redirect: manual. In this case, how do you get the returned value from Remix action server? I see you are doing "return json({data: productData.data})" from Remix action function, but are you able to fetch that from the frontend? I have a similar case, but the frontend cannot get the response.body coming from Remix backend (which I assume the status is not 200?)
    If I removed "redirect: manual", then the response status is 404. I am wondering why that is the case and how to workaround it.

    • @seunoyebode
      @seunoyebode 4 місяці тому

      did you ever find a solution to this @921kiyo ? I'm currently wth the same issue, I'm unable access the returned value on the frontend

    • @seunoyebode
      @seunoyebode 4 місяці тому

      Hello did you ever get a fix for this ?

    • @921kiyo
      @921kiyo 4 місяці тому

      @@seunoyebode No I haven't, it is still not working for me yet.

    • @angevin-capital
      @angevin-capital 3 місяці тому

      Same issue, has anyone figured this out yet?

    • @michaele2826
      @michaele2826 3 місяці тому

      I have the same issue

  • @seunoyebode
    @seunoyebode 4 місяці тому

    You beautiful man!!!!!!!!!

  • @arifurrahman5993
    @arifurrahman5993 4 місяці тому

    Hi, thank you for your great tutorial.
    Is it possible to fetch collection product using app proxy.
    If we want to show collection product and show next page product using app proxy and json to render my html.
    Thank you

    • @stephanodev
      @stephanodev  4 місяці тому

      Yes of course u can! After u get the session object u can perform all kind of queries

    • @arifurrahman5993
      @arifurrahman5993 4 місяці тому

      @@stephanodev will it decrease my app performance, of clients click use pagination and all hit my app.
      Thank you

  • @toptrendingvideos7786
    @toptrendingvideos7786 3 місяці тому +1

    its working but i cannot see json response in frontend. Can you please help

    • @AnthonyFinix
      @AnthonyFinix Місяць тому

      am getting null as response in the response.body from app. any idea ?

  • @AnthonyFinix
    @AnthonyFinix Місяць тому

    does anybody got a fix for why the main URL given to app by shopify be directly used in proxy ?

    • @sterling2526
      @sterling2526 13 днів тому

      did you figure this out?

    • @AnthonyFinix
      @AnthonyFinix 13 днів тому

      @@sterling2526 I never took the extension route. I used the main url assigned to the app. I think after 2-3 minutes the app starts receiving requests with the assigned url. Sometimes when it takes too long i delete the proxy, create a new release, restart the app for a new url to get assigned. Create a proxy with this new url and that creates another release. In a hope of whatever bug preventing the communication gets flushed out of the system with new releases. And it works. Don't have much confidence with my assumptions but I can assure that I've been developing with the main url and did not need any checkout extension url

    • @Maikolgames
      @Maikolgames 13 днів тому

      @@sterling2526 X2

  • @Florian_2066
    @Florian_2066 3 місяці тому

    why not connecting the extension directly to the backend ?

    • @samyeksonawane
      @samyeksonawane Місяць тому +1

      cors

    • @ihor3729
      @ihor3729 23 дні тому

      ​@@samyeksonawane you can configure cors. It is not the problem.