Medusa and SvelteKit E-Commerce Stack

hello everyone welcome back to another siren stream excited to be back again with Lacey PV I'm so excited to have her back on um we are back for the second month in a row it's crazy I know we had like a six month break there but we've got two in a row here where we've uh we talked about carbon last month did some design system work and now we're going to be talking about Medusa JS today and do some e-commerce stuff so I'm really excited about this too I know this is kind of a topic that's I don't know I guess maybe because I'm more front-end it's a little more complex and complicated and something that everyone seems to be interested in but it's almost a harder thing to get into and so I'm gonna let you maybe just introduce what we're going to be talking about today Lacy and just kind of give an overview of where we're going to get started at sure uh so Medusa JS it is e-commerce it's a backend that's built in node js and I sort of came to it because I have a little coffee roasting business right and for a long time I used Magento or Magento people pronounce it different ways I've always been a fan of Open Source right so sort of either magenta or Wu or those sort of PHP based options um where it's all in one right like you have the front end and the back end together and you know like I you would be the front end person that you are right that it's like a straight jacket around you you can't really do any of the stuff that you really want to do um and so there are some newer companies who are working on you know separating that right you know headless Commerce and even miganto and Wu have options right to be headless but it's not what they are by Design so they don't really do it all that well just because that's not what they were ever really architected to the um but there are very few of these newer style like headless e-commerce solutions that are open source there's a handful there's um Sailors one if if you're like a python based person uh vendors up and coming and then there's Medusa and Medusa which is sort of the right thing at the right time for me so that's what I really focused on um and you know being a felt kid person it's great because you can build your app your front end app exactly the way you want it and all the heavy lifting is coordinated by Medusa in the background yeah so and I know that you've talked about wanting to set up a Medusa store right I think for your mom in the past right and getting a little bit discouraged and we see that a lot in the Discord from Medusa it can be very intimidating for people who are new to it I mean that's probably always going to be the case for a project that's as powerful right can do as much there's always going to be a little bit of that intimidation Factor because it's like nginx right it can do so much that it can be overwhelming like when you first you know jump into it although there's a lot of work that's being done to make it less intimidating and provide some guided on-ramps right to help people with that so for the purpose of this intro I think you know what we decided to do was have a server that's set up that you're already logged into that is already has the related and supporting Medusa Services because what Medusa does is um and it's just like Wu or Magento or anything else where they have a separate database that they rely on right in the case of Medusa it's postgres and Medusa also has an event management system you know built in it uses redis for that you know for for really good performance and you can also set up search for your products and categories that goes through Medusa and so you have different options you can select for that like Melee search or or uh uh algolia so what we decided to do is give you an instance right that already has all those related Services because otherwise this wouldn't really be a spell kid talk right it would be yeah purely a assist admin talk and um and then just start from creating the the Medusa project uh which we'll jump into a bit but just one more thing to say about that is the Medusa team is um working on making it more Edge friendly right so you know some people wanted to like I'm old school I would just assume to have my server set up that I install all these related services and I can architect it the way I want and that's fine but you know more and more people want to go serverless and not manage any of that and they want their postgres to be through Super Bass and their redis is hosted somewhere else and you know they use the hosted option for for melee search or algolia and they want Medusa to orchestrate all of that but just be a serverless module and and Medusa the team is actually building that right now they've done the product module they're working on the cart module and so that's coming soon but as of right now it really is um it's basically an Express service that and and container service right that takes all of these microservices and makes them available to you via rest in points so we're going to set up the Medusa back-end first um and then we're going to show how to you know use a little spell kit starter which is just a bare bones to get started customizing and interacting with that perfect so we just kind of have a little head start going and you were mentioning I had tried to start a little store for my mom and she ended up setting up a Facebook shop because that was like a little simpler and it's it's these things like when we're when you're more front and Centric like setting up a server is something that I'm not really good at it's like not in my wheelhouse so it's like it's a little complicated so I I kind of get why the team is like leaning more into that serverless edge technology because it's that is a little more in my wheelhouse like I feel like I could maybe lean into that because those hosted platforms allow that a little easier but yeah if I took the time me I get really nervous and I know for regulatory reasons other people in other areas are probably nervous like having any customer data in different places right yeah for me I love knowing where everything is and that it's contained right and I like it not the I like the related services not being accessible to the world and only accessible to that app oh yeah that's just me and I know that that's the counter current for where things are going you know more and more things are going I I love serverless don't get me wrong I think there's definitely like anything is documentation heavy things like that like I love serverless I'm not fully convinced that it's the right tool for for everything but it's great to give people options right yeah and for e-commerce I get like that's something that I think historically especially has been a server full platform so yeah I I get that all right are we ready to get started with our screen share I think I'm ready are you ready we're gonna do this in a very realistic way that we're gonna we're gonna muddle through it mistakes and all so you know and yeah get ready for the mistakes we'll try to go through you know every single step and not stop anything you know get ready for the live stream live coding uh stuff so I just had the medusa.js.com site pulled up here but I'll pull that off screen and just have my vs code terminal opened here um so I'm gonna let you lead the way and just you tell me what I need to do and I'll follow along sure so for the in the interest of not skipping anything we're gonna go ahead and type out a command but not run it because it's already installed so the first thing that you would want to do is install the Medusa CLI tool okay and so you do pseudo npmi Dash g yep and then at Medusa Js slash uh Medusa Dash CLI right we're not actually going to run that but that's the command that you would want to run first and it's going to install what you would need to run for the next command we're going to do so the next command we're going to do you put that over there for everyone if you want to copy that for your terminal okay is uh to actually use that we don't need sudo from here on out we need to do just do npx Medusa that's the CLI we just installed and then do a new for a new back-end project and then whatever we want to name it let's just call it demo if you want whatever you want to name your folder and then go ahead and press enter that's going to get initialized and start running yeah it's going to go ahead and install all the packages and the next it's going to ask us for our database user and password which I'll give you this is the throwaway instance that we're going to destroy right after this so it's just postgres as the user and the password is bad password we uh we went through like setting up all this before and we were trying to figure out how we were going to do this it's just like we're just gonna do a throwaway because it's just easier that way we don't have to worry about hiding stuff or I'm so bad at all this devops so too I'm like just just make it easy for me yeah of course npm is going to take like a minute to install everything so yeah it's gonna download and install it all yeah and for anyone curious this is a a T3 large instance you could probably get away with a medium um if this is on AWS um with how you architect Medusa because it can scale from very small shops to very very large but until you do get really really large it's really economical just to put everything on a single ec2 instance you can make an A in my backup of the whole thing and be up and running with copies like super easy you can easily back it up to different regions um if you do it that way so it's just a nice simple way um what's what's the difference between like a medium and a large size wise I I don't remember offhand I think a medium is like two cores and a large you go up to four I might I probably have that wrong there's a memory difference as well they usually double memory each um leg up I don't know I just sort of picked it at random um are these credentials do I just continue here uh so you want to change credentials okay it's it's picking up your user credentials I think is what it's doing by default there which is kind of Handy but okay so change credentials and then the DB user is postgres p-o-s-t -g-r-e-s and then and the password is bad password just lowercase all together and then the poorest default you can just press enter okay it's not open to the public and um do you have any information on like what pricing might be for those instances maybe around if you have a reserved incident I think it's around 20 a month for a large and around forty dollars a month for uh uh extra large okay based on memory yeah I'm like wondering because I know like Shopify is like a big name in this industry too and like you can pay Shopify to do a lot of this stuff for you too and they host all this right but it's I think starts at 50 a month I honestly have no idea I didn't really look I think Shopify is a great option for certain people it's just if you're the kind of person who wants to build your storefront it's felt kit it's probably not the best solution yeah because I want to say I looked into it for a client and I want to say if it's use Shopify in a headless way you have to get a different plan that's like way more than I I don't even remember what it is but it's it's not for small businesses yeah it's more of an Enterprise thing because it's just not really intended to be used in a headless Way by Mom and Pop shops it doesn't really account for the tech Geeks out here who's like yeah it might not make sense to build my own storefront but I want to build my own store probably like that's the whole point yeah completely oh yeah just a note okay because in in the Medusa Discord like you see all the questions and so you know what some of the things are that trip people up make sure that whatever DB user you use here is a user that has permissions to create it's because it's going to need to run the migrations right to set up your your database Dell if you want to limit it which is great from a security standpoint because a lot of people want to set up a user that's specific to the application it has very limited permissions that's great but you'll want to change those settings after you get everything set up don't don't set up that limited user first and try to use it here you'll run into trouble that's a great Point like the roles and permissions in databases is something I always run into so now we have our backend project folder set up you could go ahead and CD into that folder and maybe open it up just so people can start to see what that project folder looks like I think that should work oh do I have to enter the password for the SSH thing again is that what it's asking me for uh I think so yeah but you can also go back to the other window and but this is fine too and open it up on the side I did the code dot dashboard and I have habits and sometimes the habits are bad because when I'm doing new things okay so now we have our folder open that we just set up yeah so it's useful just talking a little bit about what this is so in that Source folder that's not the the whole source for Medusa right that's separate and your node uh modules but what you can do here is basically override any piece of the Medusa functionality almost every piece is exposed to you to be able to customize and so any custom code that you want to write if you want to have custom loaders custom API routes custom database migrations custom data models Services which I I use quite a bit right if you want to add some extra piece of functionality like I integrated Cognito as the credentials provider instead of storing it directly in the database you could do that now it's a separate plug-in but before I made it a separate plug-in I just created a separate service there any service that you want it's like this is why I love Medusa is you may or may not want to customize as you're back in in this way but you know that you always have that flexibility to customize it almost endlessly right subscribers are really handy too because you can set those to run on certain events so if you want to send uh a custom drip campaigns things like that if you want to send a certain email if someone makes an order a certain email for it like you can set up I I mean really like your imagination is the only limit to what you want to do with this kind of platform this is really nice that each one has a readme too so it like explains what each directory does it's a really nice touch and some examples and the the website too is is really really good they have one person in particular on their team who focuses exclusively on the documentation and like if you follow their GitHub and you get those notifications she's just con it's just constant right she's constantly updating that's partly because the pace have changed with the project is so fast right you have to keep it up to date but also just as people ask questions over and over they they see that and they add more and more to the how to's um in the official like a lot of people will skip over the official documentation because they'll assume that it's just it's Bare Bones but it's really not there's a lot of stuff in there that's great so the next thing that we are going to do here is um we're gonna go to our Medusa config and um just make a few changes from the default we're going to uncomment some stuff um so red is by default is what it wants to use for the event manager and if it doesn't have that it'll do some sort of fake redis but uh it runs out of memory really really quickly with the fake redis this is a server that already we already installed redis um if if for anyone who wants help with that sort of stuff if you go to pv.com um p-e-v-e-y.com the very first link is sort of it's just a very boring step-by-step instructions on how to set up a lot of these related Services postgres redis melee search Etc um but so we already have it set up here so we're gonna scroll down to some of the places where it's commented out uh like right here where it says const modules and it has both of those places commented out event bus and cash service we're gonna uncomment that for some reason vs code doesn't want to uncomment it automatically interesting earlier uh and then also just slightly down from that where it says project config and then I think because it uses the like bulk comment rather than the distance you would think it would know how to deal with those right yeah it's very odd uh so it says uncommon the following lines to enable redis in that project config block yeah go ahead and uncomment that one too okay great so this makes sure that it uses redis but let's also do one more thing while we're in here and that is um Medusa comes with a default admin dashboard that you can use uh you if you don't want the admin dashboard you can use it just as completely headless and you might want to do that in some production scenarios I don't know it's an option um but here we're gonna go or you might want to build your own custom admin which some people have done like um but we're going to use the default so if we scroll up there's a place under plugins where yes so it says to enable admin plug-in uncomment this okay so we need to uncomment that we'll see if that one works because it was the double lines it's so weird yeah so let's go ahead and save that and then open up a terminal again okay and just make sure from here that everything is running so the command you would use is yarn Dev oh we're switching from npmvr it's gonna throw me off yeah did it do a yarn install when we did the npm I have no idea but the thing is and this is another little tip I'll give to I if this is probably just something in my setup I have trouble installing the Medusa CLI and using it with yarn I don't know why and then in the project itself I sometimes run into trouble using npm I don't know why that's beyond me I've never spent time really trying to troubleshoot it with npx because it like runs whatever that command is without actually installing it it probably detects that it's using yarn in the package manager and then it installs the node modules as a part of all that so it just it auto detects it and it installs them as a part of like the command not much of what you just said makes sense to me but I'm going to take your word for it sounds good sounds good over time I just figured out what works for me pretty consistently and so that's what I think I tell a lot of like programming in general works is like does this work yes let's keep doing that yep keep doing that yeah there is actually on that point just a note and I don't use it myself but if for people who go to the documentation and read they'll probably see this there is another way to to start a new Medusa project and it's a relatively recent addition that the teammate and that's uh create Medusa app I think is the name of it so you can like npx create or npm create Medusa app I don't know exactly like read if you go to the how to get started it'll walk you through that um I myself don't tend to do that because what it also installs the store the default storefront starter which is the next JS app which which is just not for me so yeah that's the reason I don't go that route but it's an option for anyone who's watching okay cool yeah so yeah that is very strange actually because it is package lock so it would be using npm so I I don't know how it detected yarn there because it would have a yarn lock file if it was yarn so don't mind anything I just said I have I have no idea so probably it was just npm who installed all the packages it created the package lock and now if we did yarn install it would create our yarn lock it would get a yarn like file yeah uh and so here just a few when we when we created it when we started it via the terminal it's giving us a few warnings because Medusa is building blocks right and and it gives you a lot of choice it doesn't force you to use any particular thing so it's saying you don't have a notification provider installed so that would be like syn grid is probably the most popular one you can use postmark recent I use SES AWS it's easiest for me because it used to be it was essentially free because you had something like 60 000 free emails a month but that's going away soon but it's still by far the cheapest option um resend is a really nice one because you can use react email templates but um it's similar with tax providers in the search engine we have the search engine itself installed on this machine but to actually use it in our project we would need to install the Medusa you know melee search plugin and just set up the configuration options so that it can connect with the the search provider on this machine for our purposes I don't think we want to go through that we know that everything is up and running so what I would do here is just Ctrl C out of that it's good we don't need this 9000 Port server we can just um well we could do one more thing while we're here actually and um let's go ahead and set up our port forwarding so that you're able to access it just fine okay um so if you go up to the terminal where it says terminal problems output dot dot dot if you click on the dot dot dot the next option should be like ports yeah so click on ports oh and forward a port and we're gonna forward nine thousand this is crazy I've never seen this V does it for you automatically so you don't really need it that much because it'll just say like it's already forwarded for you and just click on its 5173 you're good this does the same thing if you have a project that doesn't do it automatically oh okay so if you credit if you do enter it should default to localhost yeah so now if you click on localhost it'll tell you something like can't get but that's fine like I would go ahead and click control click you control click on it yeah I did it just opened it in a window oh got you but you're not sharing so it probably says something like cannot get right because that first top level directory it's it's not a route the way that Medusa works is it has two sets of API routes and one of them is under the store directory and one of them's under the admin directory right so if you just go to the top one it'll do that but if you went to say like slash store slash products in your browser oh like after the 9000 if you did Slash store slash products I think this is right from memory yeah yeah so it's that we haven't we haven't seeded the database with anything so it's telling us exactly what we expect we got nothing in there and now if you go to instead of Slash store products if you went to slash app which I think is the default for where it serves the admin app this is where we would log into the admin which we can't do right now because our database is empty it's just a structure we have no users set up in the admin so that's what we're going to do next now we can control C okay yes go ahead and leave your Port just how it is and so it'll keep forwarding okay and sometimes I have to press Ctrl C uh twice it's a gracefully stopping the server so it did stop the server yeah but now does it give you gibberish when you type try typing something no no that's just my gibberish good stuff um so the next thing we want to do is is we're going to seed it with some default if like on the far right in your data structure your folder structure if you go to the data directory the very far right in your folders yeah you see the C Json so what we're basically that's a it gives you that as the project if you're not going to use it you can just delete it but here we're going to use it to go ahead and set up our our database um using the Medusa CLI so if we do npx Medusa and then seed Dash f um it's a space so it's a command flag so seeds face oh okay yeah and then space and then the name of the file which is data does it need a path and slash uh C dot Json that should work yeah let's give that a shot so this is just kind of initializing the database with some data up front that they've provided in like a Json blob basically exactly just to give us some chartered products exactly and if you're not going to use the seed um which I typically don't ever use the seed um and you're using a brand new database you'll still want to run the migrations um and to do that you would just do npx Medusa migrations run all of that is is in the getting started guide as well but just as a note to people if you don't want to use the seed file you still need to do some some configuration of your database uh to make sure that everything is set up properly and a lot of times it'll just tell you there's no migrations to run and that's fine but anytime you start a new project or update to a new version of Medusa you generally want to do that to make sure that there's sometimes when you install a plug-in it has migrations that you need to run so it's it's a good idea to do that uh so we are seated and oh there's one more thing that we want to do in the config so if you open up that Medusa config file that we were in earlier um there's a place where it says admin cores and store cores there we go it's like the middle of that screen so we're gonna do a couple of things this first one I'm not sure is necessary but an admin course after that uh localhost 7001 at the end right before the closing uh quotes do a comma and then http colon forward slash uh localhost colon 9000. okay I don't think this is necessary really since the the app itself is being served on 9000 it's not really cross origin but I always put it just in case the second one we definitely need under store cores we want to do a comma and we're going to add HTTP uh localhost five one seven three for our spell Kit app right because by default it's set up for 8 000 a storefront app at eight thousand oh okay yeah you can either change the the port your spell Kit app is using by default which I or you can just add it here which is the route I prefer yep so now you can like save that one again and I'm looking at my checklist to make sure I haven't forgot anything I said in the Medusa Discord the other day it's like I'm gonna get a t-shirt that says check your admin course because we get that question so often uh just have like a printout like taped to your wall next to your computer check your admin course um there was that like uh West boss made like that Flex box and CSS grid like poster a while back and like people were buying those things up left and right because it was like such a nice way to look at it and learn CSS grid and flex I didn't see that but I need that for sure every time I'm doing that I have to go to the Tailwind documentation and look at the images oh tell me that it's so different too oh do they I don't want to know anything like that's the only way I know how to do it I don't want to confuse myself you're afraided person like you understand this stuff for me I just understand what works that I have a copy of Facebook works yeah so I think now I we've made all the customizations that we're going to make for our purposes to the back end we have it seated we have everything configured so we can get it running and then open up a new terminal and focus on our our storefront app we just want this running in a different terminal in the background okay um so the the server does need to be running yeah so you'll just want to do yarn Dev one more time make sure everything's working with the new settings okay and then we'll just leave that running on Port 9000. cool the first time you enable admin by the way it will take quite a while I think we already did that once but it will take quite a while because it will build it info processing okay yeah great so it's up and running this is just the normal um output that it does to the console every time it does something and it's processing things from the migrations that we just ran okay I was just seeing if the server was actually like served yet but it doesn't say that it's up yet it it does though it should if you scroll up before it starts doing all the infos yep server's ready on Port 9000 it says so we are good it says that somewhere I'm just blind then okay yeah we're good right before yeah it does it says it right there right there it's not right there I didn't see it okay so um you we can if you want to I think the easiest way is to uh where that terminal was wait where'd that turnout go yeah just do the plugs I have it shortcut I just put it away when I don't need it I got you well we're still gonna need it we just want a cute so I would do the plus to open up a new one yeah and we're just gonna leave that and run into the background um and I would do like CD dot dot and get um back to the your home directory and now we create the uh storefront app so do you happen to have um handy that GitHub link to the repo for the starter app um let me post I think I do um I think it's I'll post it in a private chat first to make sure that's the right one yep yep so okay with everyone yeah like we just use that and is that um do I fork that do I need to clone it no by by cloning it it's your own copy it's not gonna okay yeah you're not gonna hurt anything okay okay um so get close [Music] siren store what can see the sirens storefront and I don't want to do the code thing again so you can just go a couple up and file open folder I never do it the top left the very top left and siren storefront okay so that just opens a new window and it wants yeah we'll have to just double check that the other terminals are still running uh it opened a whole new window did it and they are not okay so I I have an idea though so I'm gonna CD up and I'm gonna code Dash R in that directory and then I'll be in the root directory there you go and then I'll be able to go back and forth between the two and I'll be able to see both um CD into demo sirens in this terminal and yarn that there oh well we can't do that yet it's going to give you errors because we have it uh we need to rename the EMV file from EMV example to Ian never mind never mind much yeah just kidding sorry I'm just trying to rerun the server that we were just running and then I'm going to create a new terminal and go back into um actually I'm already there so now CD into the sirens storefront and this one will be just for the other directory so now we're in our spell kit storefront in this terminal if that makes sense sorry to confuse everyone this is kind of like working out of a mono repo which I'm like a little familiar with so it's a little complicated but we'll get there um so we're in the storefront so in the storefront folder in your browser on the right you'll want to find the env.example file and just rename it to dot Envy okay in the storefront oh right there um just rename it to dot EMV uh yeah so that it picks it up as your actual EMV I think all the defaults will work for us fine okay uh back end is fine this is fun yeah I think all this is fine cool um to get started and yeah I guess Moment of Truth now it's yarn Dev and see if it actually works it runs yarn on the silk Kit app too yeah I use I I tend to default to yarn okay with Medusa plug-in development if anyone gets like really into it and goes that part I probably needs a yarn install in here because there's no no oh right right we forgot the most important part there's no lock file either maybe that's not a problem but no idea I love pmpf I've tried to use it and I just always seem to run into troubles with it maybe eventually with with with Medusa you have to do a lot of linking because it doesn't you it there's a lot of circular dependency because Medusa JS when you do a plug-in it pulls in that but then your plug-in itself has as a dependency certain like utils and things from medusa.js that you need to pull in and if you can get into a lot of trouble with that with pulling in duplicate versions of packages um so you end up doing a lot of yarn link if you're if you're do if you're uh developing plugins locally if you're just installing plugins from npm it's not a problem so for that reason I default a lot to CR and there we are this is the seed data these are the products it's the Medusa swag that's the seed data that we just installed if you didn't have seed data you'd probably be seeing all sorts of Errors right now because in the starter app I haven't done a lot of graceful error handling at this point um so if you don't have any c data you probably just you wouldn't really be able to do much of anything but once you have seed data um you'll be able to click on those and it has like auth setup um a basic checkout if you're using stripe um set up um and so I you know obviously for fun in person like yourself you're like this needs a lot of work right but from a plumbing standpoint a lot of it is done for you right yeah so it's awesome so that null is because I guess for this they don't have a description in the in the seed data okay so maybe just walk around that if there's a description then show it if not yeah things like that so like this is really set up for a project that I did um yeah that's actually a cut like copy pasted that I forgot to take out that I should take out at some point um um but yeah it just as a like a starter to get people going because I think that's like always the hardest part is like just how do I how do I interact with Medusa how do I get categories products how do I do the checkout flow is probably the most complex part it is one of the hardest parts like getting all those connections and data points like set up correctly and making sure that that flow and like I said not being like a back-end person setting that up takes that out of me and then trying to get the spell kit connections like together is a whole separate issue so this is a nice like entryway into all of that um Medusa does have a few different options to be able to connect if you're building a storefront app to be able to connect if you're using react you probably you'd want to use Medusa react which is maintained by the official team it's it's the obvious way to go they also have something and it's actually what Medusa react is built on top of this is called Medusa Js Medusa Dash JS right that's to be confused but the project as well but it's it's the the front end SDK um but the way that this was built is um it has as a dependency basically the entire Medusa project and all of its dependencies so it is it's it's far from light weight this is something that they're changing the reason that they do this is for typing right they include the Medusa the main Medusa package to get the types from it and then that package has all of its dependency like the first time I tried to add it to a svelte Kit app I was like what is all the stuff that it's installing like no way when it's just making API calls so that's why I built a client library that was specific this felt kit to because it's just rest calls so instead of having to make the rest calls directly it's just a wrapper around all of that and in a nice little middleware that you can add to your hooks file your hooks.server.ts so that it automatically handles Medusa authentication for you um but the Medusa team has gone a different direction that they're working I mentioned they were going the server modules route as part of that they're moving all the types to a separate package so they've done the products module already so the product stuff so if you're using this felt kit Medusa client you'll notice that any product related functions are typed and you get the nice tool tips and everything else um cart users some other things are still not quite typed because to do that you'd have to you'd have an unbelievable number of dependencies um but we're it's getting there and as they release those additional modules and they put those types into the separate Medusa types package then um they'll be more and more nice ergonomic typing to work with as well oh I was reading what Kevin said I had no clue about spell kit Medusa client will use for this felt merch store awesome Yep and please contribute it still needs work so if you see an issue please do contribute but I mean for now it's just a rapper that's um based very much on so I got the idea from Lucia and how they handle the authentication and in the hooks right and then they they stash it in locals um so it it basically treats your Medusa was very much made in the sort of Gatsby Heyday of pure Jam stack type of of yeah static sites right so it was very much designed for your Medusa server to be open to the world because the interaction with the Medusa server is happening from the client browser right directly to the Medusa server so you could have a storefront that was basically a static site because once your client browser opens it they're interacting directly with the Medusa back end right oh okay and that that's running on a separate server somewhere yeah you didn't have so you could literally host your storefront on cloudflare pages right yeah I've I don't love that I mean it's very popular at the time so I I totally understand why they did it that way um I think it's falling out of favor for a lot of good reasons and um I don't love it because it means that your your Medusa server has to be accessible to the world and I would prefer just to have it be accessible to the storefront app um and so that's the way the Medusa client works is that it's intended to be put in lib Dash server and it's intended only to run on the server uh can you open up the console in your browser and see what's happening there like why it's not we might have forgot the step that's where I was wondering what uh off we were using and I was going to look for that invalid input for parameter site key do we need got boom um hang on let me see if we can and I hate that it keeps maybe just go to the E and v file and put something uh oh I know what it is this is trying to use an actual um style site key is it this one yeah yeah the entity file the actual environment variable that's doing that yeah I guess in order to do auth and checkout because it's configured to use um turnstile we would either need to go and disable Turn Style which we can do I can show you how to do or um you need to actually get a turnstile site key and put yeah you need your actual sight key and not the because this is the example yeah right so they made your actual it's free by the way for anyone interested and the reason I do that is good I use svelt kids super form for the for the auth component which I love and I highly recommend it's great um and and spell kit itself like they're so fast in pain like you could brute force it so easily I mean you could just like it's ridiculous how easy you could Brute Force any password if you don't have some sort of rate limiting and um authentication on that so I highly recommend two different ways you could go either disable the Turn Style or recaptcha if you want to use that instead um or just go to cloudflare and sign up you can really easily get the site key um because I I mean I I really think you you need it like it's it's too fast in the old days when it was like you log in and it's a spinning Circle for a while it's harder to Brute Force but when it's basically instant um yeah you really need some kind of protection there so it's just spell kit Turn Style is like the package I'm just trying to see like what's going on under the hood here yeah and this is based on so ghostev which I know you know um I I don't know her actual name but really Willow yeah so she created a Turn Style the first that I know of that was specifically first hit and dealt with the on Mount issues and whatever um and so uh but she did I don't think she made an npm package out of it and also at the time that I started using it um like you weren't able to have two different Turn Style components on the same page like loaded at the same time um so this is just the package that I put up there to make it easy to install from npm but it's very much based on her work just to be clear is it turnstile Js or is it I don't think it's Turn Style music I'm getting like hardcore Rock I would do like Turn Style Cloud flare what are you looking for I'm just looking for the website so I can oh yeah there you go and I was getting like rock music yeah not what I'm looking for thank you Google yep here we go if you sign up for cloudflare um it's one of the options on the left hand side of your dashboard so you just the link you would go to is uh so right it's it's the second section so on the on your dashboard you'll have websites blah blah blah domains and then right under that Turn Style and then you can just add a site it's totally free Oh you mean after you get in and so it's not like this docs page it's the actual like once you sign up for cloudflare in your dashboard gotcha yeah um too my customers on the site where I'm currently using it uh SKU on the the older side not you know and not very technology loving and friendly and when I used recaptcha when I had them again to cite it was integrated well with recaptcha and I had more issues with it like I had to set it to where it was basically useless and it would let anyone through because otherwise occasionally it would catch real users and they didn't know how to deal with it and I found that especially anyone who wasn't actually if you didn't have a Google login if you weren't if you didn't have any Google cookies if Google didn't know who you were it just assumed that you were a bot and these are people who have like AOL and Yahoo these are not people that would necessarily have Google oh my gosh and so I find cloudflare is a much better alternative because they're not relying so much on that that's a pretty funny metric though it's like if Google doesn't know who you are you do not exist I I mean this is I I could be wrong this was my personal experience with it is that the people who always had issue with it or the people who had non-google email addresses well that's hilarious oh but yeah that is a pain and I could see how that would be problematic and I don't know how I feel about recaptcha I've never really used cloudflare for much um but I'll have to try out Turn Style that's nice um I just tried out OCTA kit authentication from GitHub um I haven't heard it and it wouldn't work for like something like this but I was looking for like documentation site for like the design system I'm working on so I was trying to look for something that worked well with GitHub I'm obviously not gonna put GitHub authentication on an e-commerce store but um opticut was kind of cool an alternative because I know sometimes as developers we don't always have the final say and so you know a business person might say absolutely you're not you're not going to put that turnstile or recap it's not going to happen so an alternative and I hate to be like a cloudflare fan girl but um the alternative is to use their their Waf right and put rate limit rate limiting on the forms from submissions um so there's no turn style or recaptcha it's not perfect but at least um it's some protection I mean the problem is if I mean any any scammer or hacker who knows kind of what they're doing which is not all of them but you know they could they're going to rotate through different APS and it's going to be really easy to for vs code extension on this server and I said no because it's your server and I didn't want to do that but now we have no syntax Highway oh no in the cell phone so I apologize it's like the old caveman but uh yeah I was just gonna take a look and see like this is the server file so this is where um turnstile is getting set up on the server and being loaded in um you've got your form actions and then this is where the page is actually being so the very first if statement it basically says if you get down to the actual template it'll say if there's no token which the token gets filled by um the turnstile callback so if there's no token generated yet it just Waits For That token it won't do anything else awesome right so that's why it wasn't do anything is because yeah because it didn't have a site key but it also couldn't do anything else because it had no token loaded and that's there because you don't want them if they're super fast you don't want them to be able to hit submit before there's a token because the next thing you're going to do and the form action is validate that it's a good token um so for your speed demons that just helps to make sure that you know they're not getting errors because the token just hasn't been loaded yet yeah and then you've got this is a reset form with Progressive enhancement with the reset enhance action [Music] it's looking to see if there was another form in here is there like a password form somewhere yeah so it's it's all all the auth related stuff is in that one component um there's the register form so that would go to the register action there's register just kind of trying to show everyone how all this kind of goes together like the back server side to the front inside super forms is is so nice because it gives you nice validation client-side and server side without a lot of boilerplate repetitive stuff um if you if you in your folder browser open up that lib uh directory um on the right hand side uh the what did I name it are we in the right so storefront are you you've got your components list and then you've got your server with Medusa and stripe yeah but I think you're actually I think you might have opened um a different folder than yeah I could see you're in the LA roasting code folder oh oh oh you're yeah you're in the tests in your other folder sorry I always just scroll down to the bottom come on you're right is what's your top level folder that you're in now I'm in a siren storefront okay yeah now you're in the right one so in that lib folder there should be I think I called it validators.ts under the not server yeah validators the very last one yeah right there so that's where I put all the stuff that um super forms uses okay right now I've only used super forms for the auth component kind of intentionally because the other forms show how to do it this felt kit way and then the auth component shows how to do it the super forms way and you can kind of choose which oh I see I was looking uh I was just looking at your other code I'm sorry I uh because we've got that big list of directories um I was in the wrong directory yeah that's fine it's totally I mean there's nothing super secret there it's no worries okay so uh there's the register action I actually left those folders in there stashed away in case we ran into some issue and needed some examples to go by yeah it's so weird seeing it without the syntax highlighting I I think another useful thing to show we have like what two minutes left is the hoax file okay because there's a couple things that I think are worth seeing there one is um you know I I wanted to have like some default security related stuff to go by and so this shows a couple of things one is this is where that first line where it says away Medusa handle request that's using that middleware that's in that Medusa client library and what that's doing is on every request it's going to check to see is this person logged in do they have a session cookie and then they're going to check Medusa and say is it valid if not they're going to unset it and handle all that all that's handled for you there by attaching this to your hooks file um so that's an important piece of it and then the other thing I wanted to mention is kind of the default headers that are shown down there the response header those are all security related headers depending on how you have it deployed you might have to comment some of these out or change these um if you have something another question I had is how are you the pulling this are you on that same instance on AWS so a server node server yeah there are two ways that you could go about it I I'm currently using a cloudflare tunnel but I also if you go to that pd.com tutorial type walkthrough it shows two different ways putting it behind uh nginx or putting it behind cloudflare um it's a node app right the storefront and the back end so you need some sort of reverse proxy and there just are tons of choices there are people who use uh pm2 to run the back end I'm not really familiar with pm2 so I can't answer any questions about that um some people deploy using coolify uh it's one that I keep meaning to look into more there are a lot of people who in the Medusa community that just really swear by coolify and love it um me I tend to use good is that like render I don't know what render is I don't know here's like a server um I think they're similar to Heroku yeah I think they are like a self-hosted alternative yeah that's exactly what they are yeah sorry um I I just tend to go the simple old school route maybe one day I'll set up some sort of something more fancy but um I I like having my AWS instance completely firewalled and the only opening is is the cloud Fair tunnel um and then that way for your admin and everything else your stripe hooks you can configure with cloudflare access who gets access to that based on whatever rules you want um to me I find that the easiest and I think a lot of people in the Medusa Community are sort of moving toward that approach like away from having the Medusa back end open to the world which is fine it works but security is all about layers right so if you can add some more layers to that I you know you're better off I agree and I like that your privacy and security Focus so that's that's nice that you've got all that stuff in one place and secured down I'm gonna share the link to your site one more time it's just pv.com is there the blog like right on the home page yeah and it's it's not fancy so don't uh you know maybe maybe yeah but it's basically a list of documentations tidbits yeah okay and then if so um if you're following along with the tutorial and you you said you have two ways that you can set it up so if you're going either the cloudflare or the nginx way you're gonna use this adapter node for spell kit and you're going to build your app as a node app and then these headers that you have in the hooks.server file are going to be okay for that yes that that's the way that I do it personally um I haven't done it this way what I'm quite sure would work is um hosting the back end this is the same way as in the tutorial but hosting your front end through versel using the versel adapter should work fine cloudflare is not going to work there's just too much that's not compatible um with that um but I you know a lot of any a lot of the other adapters I think would work fine um right you'd have to have a server list because they're not a server platform yeah but your front end is so it's two different applications really yeah so if you want to post it statically I guess on versel or netlify then you could and run your server somewhere else yeah but even with um so it's not fully static right yeah you could run for example you probably couldn't run these headers in your spell kit application if you did it that way like you would be able to do it to for sell I think I have it tested it but I think it would probably all work fine you'd have to set up your environment variables a different way and some things like that but I think that it would probably work fine I I don't think it would work well with cloudflare because there are just some things that wouldn't work like um like even something as simple as dear name right it's not going to work with clouds yeah um and it might be it might need to be adapted slightly even with Purcell but the vast majority of it I think is going to work fine with Purcell I've tested the Medusa serverless modules on the back end and they work fine with Marcel as well um but for now I it's cheapest for me just to put everything on one ec2 instance like there's no reason and also to pay versel if I already have this instance sitting there and if I did it that way I would have to be able to configure my app to talk to my back end that's sitting on AWS and then that's just another exposure point that I don't really want or need where it can just instead talk via localhost but I can see for teams that are that have more of a need for the development experience of versel and the built-in like all the pipeline features right it's totally possible to separate your app and and have your storefront app hosted on for sale and you're back in hosted somewhere else with all the related Services the database Etc also totally possible to use super bass for the postgres a lot of people do that and then you have like a third point of entry um and don't quote me on this but with the cloudflare adapter for self kit I do think that's what the adapters do is they take like that their name there and they configure it to the platform so whatever that platform uses it would transform that um but don't completely quote me on that I don't know exactly and I've never used cloudflare so I don't know how it works for a Cloud Player but that's what those adapters do is they kind of transform the code to the platform so it might work might not yeah might or might either we basically see the pv.com is actually hosted on cloudflare pages it uses um mdsvex I don't know how that protects but yeah it's just um something approximately that yeah and it's great I you know some of those services are just like I can't believe that some of this stuff is available for free knock on wood but yeah oh I love md6 that's a Penguin Pete's app yes yeah working on that for a while um I'm actually looking at using that for my documentation site too so I really like md6 here I will uh stop sharing uh I don't know if anyone has questions or anything maybe I don't know if you have to run but I can stay on for a couple minutes and um answer any questions if I know the answer to them but uh yeah this was great this is a great introduction and I feel like it was I don't want to say easy and simple because I feel like that belittles it a little bit but this like made the process like much simpler than it is if you're just getting everything set up on your own well good good the documentation can be intimidating because it does handle so many edge cases that it can be hard to it's just intimidating but do you feel like now you can set up your mom's store yes I do if I can just get it the server like actually hosted somewhere but I think if I use something like render or qualify or something like that I would be fine see I'm not the old school I'm the new school yeah fair fair enough I have a few minutes if anyone does have any questions I'm happy to try to answer it cool yeah um let us know we have hello from Philippines hello thank you Alpha thank you yeah I feel like this was so well done I mean I don't even feel like we needed to get anything integrated but it's all kind of there for you set up in that starter kit and that's I guess that's kind of the point of the starter kits it's just to get you up and running as fast as possible have all those connections just set up yep well cool cool hopefully as time goes on um myself and I'm hoping other people will contribute more to that felt good project so that they'll be more components to sort of pick and choose from without having to start from scratch uh building spell kit storefronts with Medusa we didn't even talk about it but you're using melt UI in there so that's what the components are built with so the front end is in mil UI um do you want to speak at all to melt which is made by Thomas who used to do Radix right and Hunter yeah and a large group of other people as well I don't I don't really have anything authoritative to say about uh melts I I'm a big fan of the project and their approach I think the approach we talked before about kind of hunting around and trying to find the right UI solution for a spell kid project and there are a lot of good options out there now I mean skeleton flow byte Etc but there wasn't really anything kind of like Radix right where the unstyled if if yeah there's no Styles up front and so the idea with the starter is that people are going to have all sorts of styles you don't want the storefronts to look the same so that was my thinking and choosing melt is to have something that handles the accessibility part of it for you because I think that's so important um so that that's handled by default but it doesn't you know hamstring anyone into a certain Style yeah I actually like that I I think I agree with storefronts it's difficult and that's one thing we were talking about Shopify earlier that's one thing with Polaris is their design system and they kind of you don't have to use their design system for Shopify products that they kind of encourage you to do that and then you kind of get pigeonholed into that brand and that design and you don't want that really like each shop has its own brand and design and you want to be able to flourish that and have your own style so having a headless UI makes sense for something like a starter kit so I really like that as I mean obviously I've I've shown my age and like that I'm an old school Linux person like CIS admin type person so for a long time a headless UI that made no sense to me I was like that's just a nonsense term as let's see why like what like what does that mean I mean yeah like seriously um but now I sort of I I get it right and it takes care of all those Ally errors that you get which there is still a few in the starter project that you know I'll address as time goes on but it makes a lot more sense to me now you know using these approaches to handle those sorts of issues adding all the right um roles and such for you yeah and that's like the big thing for me too with using something um I'm one engineer on my team building a library of components for 50 engineers and making sure that you have accessibility that needs to be an entire team of people working on that and accessibility is difficult whether you like are actually involved in like trying to make the accessibility better like you just you have to be in it and it's it's difficult to get right so I I appreciate that they're doing a good job with that and continue to work on it so well I do not see any questions um we do not have another siren stream scheduled right now if anyone's interested in coming on want to showcase anything that has to do with spell or sell kit um welcome to come on I'm happy to have you back on again if anybody's interested in seeing more of the back end stuff too I don't know we could do it on I have a separate YouTube channel if anybody wants to see that we can put it on that channel too I asked Lacey if Medusa had a a YouTube channel because I think she should go be their devrel over there they might have a channel like I remember when I was setting up stripe for the first time a long time ago they had a video hosted somewhere uh that I was telling Brittany they're very shy for some reason they're super smart they're very shy they you know that's how it usually goes like they're really intelligent like people that can develop these things are just not wanting to be in the public eye which I mean is probably a good thing sometimes like the people that we see in the public eye that are also super smart are not the ones that we want to be in the public but I don't know what I'm talking about I I I'm sure I'm not as uh connected in that world as you are so I'm not really sure but I do encourage them and I think maybe they will start soon they're also just super busy right now with with kind of this massive architectural change that they're working on so I think it's a natural and I fall into this trap too sometimes to think it's like yeah yeah I'll do it after I finish this thing after I finish this thing I felt that way with putting the starter up because there's so much still that's left to do but finally you know when I keep getting people like they're just they want help getting started I said well this will at least help people get started even if it's far from being in a finished state right I think that's a trap that we fall into that they're probably in right now is it's like well they're in the middle of this large rewrite let's wait till after this and then after that and then after that and it just never happens yeah yeah well thank you so much for coming on and showing us this and I'm definitely going to be going back and re-watching and trying to figure all this out um maybe I can finally get my mom's store set up for her and she can have her own um actual store not just a Facebook shop because we're going to Meadow we don't need that but um I appreciate it and like I said anybody who wants to come on let me know um DM me thanks everybody for joining us and we will see you next time thanks so much

Channel: Svelte Society

Views: 4,784

Keywords:

Id: rVVHxows9dY

Length: 73min 9sec (4389 seconds)

Published: Fri Aug 04 2023