Remix - New Era of Shopify App Development
Vložit
- čas přidán 6. 09. 2024
- Shopify released their new app template based entirely on Remix. In this video we explore the template a bit and do a surface level overview of some Remix concepts.
Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I can. Feedback and constructive criticism is also highly appreciated!
And don't forget to follow me on Twitter! / devwithalex
🔗 LINKS
-------------------------
Shopify App Docs (Remix):
shopify.dev/do...
Shopify Devs Discord (I'm in there!):
/ discord
✉️ INQUIRIES
-------------------------
Email: contact@devwithalex.com
Twitter: / devwithalex
🛠️ WORK WITH ME
-------------------------
Want to work with me to build or improve your app?
Go to devwithalex.com for more info on my packages + pricing!
🙋🏽♂️ About Me
-------------------------
Hi there! My name is Alex and I have been programming (mostly self-taught) for over 5 years now. Programming has changed my life for the better, and I am on a mission to share my knowledge with you so that you can reap the rewards of a satisfying and fulfilling career in software development. My favorite thing about software development is that you are constantly learning, and I want to share the things I learn with you! I am always looking for ways to improve and new things to learn, so feel free to reach out or leave a comment letting me know where I can improve or if I should cover a specific topic!
You explained the basics with such clarity! You are a wonderful teacher : )
Very good introduction video for the Shopify remix app template. Looking forward to seeing more videos for building the apps using the REMIX template.
Thanks Alex.
Great video Alex! Really keen to see the next video of how you walk through a full app developemnt. This new remix template looks quite neat!
Looking forward to the full tutorial. This is awesome.
Man, thank you so much for this video. I didn't understend what's the loader functions and how is it working. I read all docs and I just didn't find anything. But you saved a week of my life. Just please, keep realese your videos!
Fantastic job, Alex! Looking forward to your next video. If you can throw in a webhook feature as part of the full app, this would be most appreciated.
Test Testerson 😂 This video was literally lifesaving. Really appreciate you explaining the structuring of the files, thank you!!
Your videos are so helpful... i successfully made a shopify app watching your tutorials. Wating and excited for a tutorial on new remix template!!
Can't wait for more. Remix seems very complex (I've struggled!) but very powerful so would love to learn it better.
Great, thanks. can't wait for the next tutorial
Very interesting i'm starting to build a shopify app on my job. I just have to display few buttons to execute a payment process.
Thanks!
Can't wait for more. Very good introduction video!
Great video👏 The best I've seen on Shopify apps💯
This is top-notch content. Can't wait for the next video.
Fantastic job. I really appreciate this.
Very helpful. Waiting for your next video
Very nice video, Many Thanks
I would like to know how to trigger GA4 events from web pixel extension within the App specially on checkout page.
Thanks for the video Alex!
That was really helpful, thanks for explanation!
very intuitive, thanks for doing this
Great job and impressive! Subscribed.
hey alex, currently building an app, excited for your next video of you building shopify apps.
Would you recommend any other videos/ creators on youtube for tutorials on building shopify apps?
Loved the video, helped a ton!
Kinngh is a great person to follow in this space! www.youtube.com/@KinnghHeura
super helpful video!
Awesome. waiting for next video.
Wow. You explained it nicly. How save form data from theme app extension?
great video, great explonations CONGRATS BRO ! Im waith for the a basic app project shopify with prisma-remix, thanks !!!!!!!
Thanks for the video i learned a lot! I wanted to know how do i use the old templates? For example i want to use react and express
thank you very much! very cool insights
Awesome 👍🏼
My changes are not reflected in the browser using the Preview URL and I can't figure out why...
It's really helpful. Can you please make a video tutorial creating a simple Shopify app using Remix? for example: display top selling products or bundle discounts
Hi Alex, could you make a video talking about handling freight and regions? Due to a difficulty I have with shipping profiles, I wanted to create personalized templates.
Nice content, I want to know how can I can show piece of information(e.g. div with message) on store home page.
Great video Alex! it's really helpful for me. I would be happy if you share your knowledge about Shopify development .
Hey Alex, can you please make video on how to store data in database in next video and other concepts in it to start to develop basic app?
A very informative video... can you please explain how we will use app proxy using remix template
After I run npm run dev and navigate to the app url...I am getting 401 unauthorised error from graphql api.
Any ways to fix that ?
Same
waiting on that new video!
can you do a full course on this, including shopify functions and app extensions? thanks
I'm going to start releasing longer app build videos, some of those will definitely include functions and extensions!
when is the next video I would like to deploy an app soon
Where do you setup puttng your API Keys? How does npm run dev know about your store if this is a new app?
Hi Alex, I loved your video. Nice job! I am having trouble trying to upload the Remix App Template to Digital Ocean using the Managed Apps, I followed your old video, but had no success. It would be awesome if you do the same video again uploading the new Remix app template
Please make video on how to call APIs and update product data also.
How do you manage the extension app based on customer subscription? right now once the app is installed also the theme extension is installed and not waiting for the subscription to get approved by the customer.
Make video on theme extension and how we can use relational db...
I'm using Hydrogen in Shopify, but, i have theme , How a Deploying un my domain with Oxygen Shopify?
Waiting for the next video
Hi!. I am using Remix.js through the Shopify App proxy (I need to run it on the proxy to make it work with something.) So Cors origin issue due to proxy. I already added the crossOrigin="anonymous" in the Scripts Components of Remix and Access-Control-Allow-Origin header in the entry.server. Due to the header, it's working for routes defined in the routes folder. But I am facing CORS on the build folder.
I get this alot too
Haven't used proxy with the new template yet but will check this out
How to save form data in database?
Someone else got a 404 when redirect from the terminal to install?
THank you kindly make more videos
Is there a way to force Typescript rather than JS when creating the app?
Great tour, where is you next paid lesson? =)
Looking forward to your next video! the shopify tutorial on the "qr code app" is very bad :|
It's actually a great tutorial, but I just released a walkthrough video going through it a little more in depth and explaining each step. You do need to have some dev knowledge beforehand though so if you don't know react or js, then you'll have a hard time
can you create a video in which tell us how to connent mongodb and how to create mongodb model/schema etc
yo have an abo more! Thank you for your great content!
When the new videos on remix are coming? I'm waiting please make more videos on remix.
Could you make a video on how to deploy the app to the ubuntu server?
When are we getting more videos on remix??
Just released one, more incoming as well
Thanks for the video. this video helped me in building an app with remix which store some configuration with prisma in sqlite. I have query can we use this configuration data in extension as in need this data in extension, how i can do that?
You can set up an app proxy and call your endpoint from your extension, easy and safe way to fetch data
How can we use scriptTag to load script on storefront in remix local environment?
do you know how to call a storefront API in remix route?
Thanks for the overview, Alex! I got a quick question on something you hadn't covered - how do you make API calls outside of the loader function with the Remix template?
I mean, you can only use `const { admin } = await authenticate.admin(request)` in loader, right? But if you need to get some extra data, then you can't use loader again without refreshing the page. Can you even do that with the default Remix template?
You can put all of your data fetching code in the loader, it's a remix function and isn't restricted for Shopify authentication. So you can make as many calls to external API's as you want there. The loader function does only run once before the page is rendered though, so if you need to fetch data after the page has loaded and everything on the client, then you can just fetch how you normally would using react in the route component.
its very knowledgeable video. But my problem is one step ahead. how do we communicate with the our store that we install the app. Like i want change my Product listing page of store based on my app's working.
Changing the store theme requires use of theme app extensions, I'll cover those at some point but you can read about it here: shopify.dev/docs/apps/online-store/theme-app-extensions
Really Appreciated.
@RAA Can you please also provide a tutorial for polaris with remix framwork
Any idea why a have 401 error when i run dev the app?
Same
How long until the next video? 👍
Just put one out, more full app builds incoming as well
Hi Alex. Need you help here. I am getting the following error right after I installed my remix based app on my shopify development store.
"This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support."
I checked my browser cookies setting and it's already enabled. Changing browser from Chrome to Firefox also couldn't help.
I also following the following steps suggested on stackoverflow:
npm run config:link
npm run config:push
npm run dev
Anything I might be missing? Thanks in advance.
Haven't seen this before on a brand new app, are you still getting this right after setting up the template? And does it happen with any other templates?
@@devwithalex Yes, this is happening right after installing with remix. I gave up and left it at that time since I had other things to do. And no, I don't think it showed for other templates.
By the way, I am vuejs/react dev but I wanted to get into shopify development also but there aren't much resources out there to learn. Any tips?
How do you do API endpoints with Remix?
If you create a route with no default export, you can use the loader function as a GET endpoint and the action function as a POST/DELETE/PUT endpoint
Please make more videos😊😊😊😊
plese make more video on it
Is it still possilbe to use Node Js
Yeah, absolutely
@@devwithalex Any idea how I can do it , when I create a project it doesnt give me the option for node it just shows two options , remix and app extensions.
The latest CLI template will only give you those options, but you can just clone an older or different node version template directly from GitHub. Here's one for example: github.com/Shopify/shopify-app-template-node
😊😊
2:10
is it posible that developer use fucking shopify what you cannot even touch before you not pay for shit cms :S very stupid era coming :/
please help
D:\digilite\shopify\branded-supply-app>npm run dev
> predev
> prisma generate && prisma migrate deploy
Prisma schema loaded from prisma\schema.prisma
Error:
EPERM: operation not permitted, unlink 'D:\digilite\shopify\branded-supply-app
ode_modules\.prisma\client\query_engine-windows.dll.node'
getting this error when i save any data then turminal closed with error and if i run again then this error comes
Try some suggestions in this github issue: github.com/prisma/prisma/issues/9184
Also a tip: when you run into issue like this just paste the error you're getting into google along with the tool you're using (prisma in this case). That github link was the first result
Thankyou@@devwithalex
I thought that we could use the remix template to build the ecommerce directly in js 🥲 is there any possibilities to develop the ecommerce with react/nextjs without using the liquuid templates?
You can use their headless offerings (hydrogen/oxygen) for custom use cases but I'd 100% recommend just learning liquid if you want to do anything related to themes