Remix - New Era of Shopify App Development

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: [e-mail]
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!

[@martiarnauortega813]

You explained the basics with such clarity! You are a wonderful teacher : )

[@markm3407]

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!

[@seanlauer5594]

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.

[@jinsy_]

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!

[@yatharthmakar8824]

Your videos are so helpful... i successfully made a shopify app watching your tutorials. Wating and excited for a tutorial on new remix template!!

[@Lenny_Malcolm0]

Great video👏 The best I've seen on Shopify apps💯

[@meesh9229]

Test Testerson 😂 This video was literally lifesaving. Really appreciate you explaining the structuring of the files, thank you!!

[@hacun3jr]

Looking forward to the full tutorial. This is awesome.

[@spearoxtv]

Can't wait for more. Very good introduction video!

[@AntonioBrandao]

My changes are not reflected in the browser using the Preview URL and I can't figure out why...

[@SADDEKRABAH]

Great, thanks. can't wait for the next tutorial

[@maxivy]

Fantastic job. I really appreciate this.

[@thomasadelaney5479]

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.

[@deonnahodges]

This is top-notch content. Can't wait for the next video.

[@xiaopeiyi]

Great job and impressive! Subscribed.

[@fatgrubman645]

Can't wait for more. Remix seems very complex (I've struggled!) but very powerful so would love to learn it better.

[@alacris110]

That was really helpful, thanks for explanation!

[@majia9158]

Very helpful. Waiting for your next video

[@adriansomor]

Thanks for the video Alex!

[@grantemerson5932]

Awesome video! Thank you

[@sgsniper1]

very intuitive, thanks for doing this

[@fg0611]

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!

[@MitThaker]

Awesome. waiting for next video.

[@124horst]

thank you very much! very cool insights

[@laserz23]

super helpful video!

[@drkoop7168]

great video, great explonations CONGRATS BRO ! Im waith for the a basic app project shopify with prisma-remix, thanks !!!!!!!

[@elizabethcurneal5556]

Awesome 👍🏼

[@alien372]

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!

[@devwithalex]

Kinngh is a great person to follow in this space! www.youtube.com/@KinnghHeura

[@sudiptasundar]

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 ?

[@abdulwahab182]

Same

[@ceez3317]

waiting on that new video!

[@arifhussainsoomro2603]

Wonderful explanation. How can I call it in liquid section? Have I need to use Iframe?

[@tanvirahmed3154]

Great video Alex! it's really helpful for me. I would be happy if you share your knowledge about Shopify development .

[@MusaRehman-m9o]

THank you kindly make more videos

[@venkimithu]

Wow. You explained it nicly. How save form data from theme app extension?

[@richard-schneider]

yo have an abo more! Thank you for your great content!

[@enviidakid]

Where do you setup puttng your API Keys? How does npm run dev know about your store if this is a new app?

[@guynahon6013]

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

[@user-jg5zh9de2q]

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.

[@Rohit-ez1oz]

Waiting for the next video

[@ankitkhand8428]

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

[@justdoitk]

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.

[@isheeze]

A very informative video... can you please explain how we will use app proxy using remix template

[@satishpurohit2035]

Nice content, I want to know how can I can show piece of information(e.g. div with message) on store home page.

[@infiniteS3t]

Is there a way to force Typescript rather than JS when creating the app?

[@stevesmith0624]

can you do a full course on this, including shopify functions and app extensions? thanks

[@devwithalex]

I'm going to start releasing longer app build videos, some of those will definitely include functions and extensions!

[@vertonnes]

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.

[@SvarYogiFanclub2211]

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?

[@CaiqueMolina]

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

[@krishnaharsh483]

Please make video on how to call APIs and update product data also.

[@gurindersason]

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?

[@devwithalex]

You can set up an app proxy and call your endpoint from your extension, easy and safe way to fetch data

[@eugenefedorov3498]

Great tour, where is you next paid lesson? =)

[@MuhammadUmarKhan-mumarse]

can you create a video in which tell us how to connent mongodb and how to create mongodb model/schema etc

[@marcosierra4910]

when is the next video I would like to deploy an app soon

[@rakibahmed1011]

Make video on theme extension and how we can use relational db...

[@umairyasin5951]

When the new videos on remix are coming? I'm waiting please make more videos on remix.

[@hoangmachvan1693]

Could you make a video on how to deploy the app to the ubuntu server?

[@Archipelagia]

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?

[@devwithalex]

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.

[@gulshansharma1337]

Really Appreciated.

[@gulshansharma1337]

@RAA Can you please also provide a tutorial for polaris with remix framwork

[@spacetime3636]

I'm using Hydrogen in Shopify, but, i have theme , How a Deploying un my domain with Oxygen Shopify?

[@kashyapmakwana907]

How can we use scriptTag to load script on storefront in remix local environment?

[@logarithm0]

Looking forward to your next video! the shopify tutorial on the "qr code app" is very bad :|

[@devwithalex]

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

[@VikashKumar-ry4wl]

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.

[@devwithalex]

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

[@TranQuangHuy-x4r]

do you know how to call a storefront API in remix route?

[@techforsolution2505]

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.

[@devwithalex]

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?

[@techforsolution2505]

@@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?

[@DEV_Wasiq]

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.

[@awsomedeveloper8846]

I get this alot too

[@devwithalex]

Haven't used proxy with the new template yet but will check this out

[@prateekaggarwal3888]

Please make more videos😊😊😊😊

[@chrisrivers577]

How long until the next video? 👍

[@devwithalex]

Just put one out, more full app builds incoming as well

[@yatharthmakar8824]

When are we getting more videos on remix??

[@devwithalex]

Just released one, more incoming as well

[@Endeavour95]

Any idea why a have 401 error when i run dev the app?

[@abdulwahab182]

Same

[@prateekaggarwal3888]

😊😊

[@jhoanmartinezsilva2609]

Someone else got a 404 when redirect from the terminal to install?

[@Jyotiyadav-e7q2o]

How to save form data in database?

[@Nimbleform]

plese make more video on it

[@aeroartz4080]

Is it still possilbe to use Node Js

[@devwithalex]

Yeah, absolutely

[@aeroartz4080]

@@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.

[@devwithalex]

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

[@zurcxer]

How do you do API endpoints with Remix?

[@devwithalex]

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

[@ViratKolhi-y7k]

2:10

[@tandaramandaraba]

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 :/

[@dragotti]

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?

[@devwithalex]

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