Remix JS Crash Course

hello everybody and welcome back to the channel in this video what we're going to do is cover remix js and this is a great new javascript framework that allows us to build a full stack web applications now in the front end this acts as a higher level framework that builds on top of react so it's kind of like next js so it utilizes the react library and builds on top of it to have additional features that you won't get right off the bat when utilizing a react app and also this has a server-side capability so you can also have your server in here thus having a full-on application full stack application so we're going to go ahead and we're going to learn how we can utilize remix and to do this we're going to be building this jokes app so this is going to be a jokes app and let me just quickly zoom in here and simply all this app does is when you click on read jokes you can over here see a list of different jokes and you can go ahead and click on all of these different jokes and you can see the jokes themselves so if i click on for instance frisbee i was wondering why the first b was getting bigger then it hits me that was the joke we have an elevator joke my first time using an elevator was an uplifting experience the second time let me down that was pretty funny actually i didn't read that before and so this is the application that we are going to be building and of course we can add our own jokes so i can add i don't know um i don't know uh i'm not gonna i'm not gonna actually write a joke because i can't think of one off the top of my head let's just call this joke shoe and let's just say whatever content so we can go ahead and add this joke and oh the joke was too short so we have some validation in here so let's just go here add some more jokes whatever whatever whatever we can go ahead and you can see that now this joke has been added so we have the joke of shu and then over here we have the content itself and what's nice about this if i refresh it's actually saved because we're going to have a full on database system for this we're going to have a full stack application so this is going to be making requests to our backend and our backend is going to save that data inside of our database and when we want to retrieve it it's going to retrieve it from our database and of course we're going to be using the remix server to do this now this right here is nothing special i didn't come up with this application actually if you go to remix.run.com which is your official website you can just go over here to read the docs and they actually have a very comprehensive tutorial with building this exact same application so i'm just really just copying what's going on here so if you prefer reading uh the documentation you can just go ahead and do that yourself or you prefer the video format then well i'm going to be covering this documentation so i'm going to be covering this and actually at the very bottom they cover some things that i won't be covering in the video like authentication and seo things that you might want to read out so i'm not going to be covering those on the video so maybe after i finish the the project itself then you guys can kind of do that on your own so let's actually go ahead and just start out and build our first remix application so let's just get right into it in order to start working with remix we need to first create a remix app and this actually isn't very difficult however there are some prerequisites so if you go to the documentation you can see that some of the prerequisites listed over here so you need to have node.js installed if you don't have node.js installed go ahead and go to the node landing page and install it it's a relatively simple download regardless of the operating system that you're at now note if you do have node installed you have to have node version 14 or greater so what you can do is that you can open up a terminal so you can open up your terminal or your command prompt inside of uh if you're on a windows machine let me just open up a new terminal window let's see here new window i'm gonna go ahead and open this up and just to see that you have node installed what you can do and let me just quickly zoom in here zoom zoom zoom zoom zoom zoom just so you guys can see you guys can just simply do a node v and you should get a version so i have node version 16 installed and that's good that is awesome now you also need to have npm installed and if you installed node you should also have npm because it comes with it but of course it has to be version 7 or greater you can do the exact same thing in your terminal you can just do npm version and i have version 8. all right and the last thing that you need is a code editor i'm going to be using vs code and they also recommend vs code so once you have these prerequisites this is really all you need you can actually create an app now in terms of knowledge knowledge prerequisites you should know javascript of course and you should know a little bit of react because the front end portion is going to be built on top of react now in terms of the back end aspect of it you should have a basic understanding of what the back end is doing and just the basic understanding of http apis so we're going to be sending requests they're going to be either get post put and delete requests and if that didn't make any sense to you then maybe you should pause the video and learn a little bit about the back end i have an express crash course on my channel that you can watch as well and that teaches you really very simple things that you need to know about building a backend application okay so that's just the knowledge prerequisites now that we got that covered what we can do is we can execute this command npx create dash remix at latest and this is going to create a remix application for us so what i'm going to do is i'm going to copy this command you can write it out if you want to and what we're going to do is we're going to move into whatever directory we want to create this application in i'm going to create it in my desktop directory and you know what let's just type this out we're going to do mpx create remix and of course we want the latest version so we're going to say at latest so we're going to go ahead and we're going to execute this and this should create this application inside of my desktop directory now this is going to ask us a few questions it's going to ask us where our application is going to live so over here this is just the path to our desktop directory and then this over here is the name of the application so what we can do is we can just say the path to our desktop directory we can call this whatever it is that we want we call it jokes app now over here this is going to ask us what type of server we want so we can have an express server we can have a fly dot io server never really heard of that nullify server etc we're just going to have the pre-built remix app server that is built on top of express so we can just go ahead and choose that and that's the default option now over here typescript or javascript i love typescript and remix really works well with typescript now if you don't know typescript that's completely fine there's not going to be a lot of typescripty things in this tutorial but we will be using typescript for this app and lastly do you want us to install all of all of this oh i can't even talk right now all of the dependencies well yes let's go ahead and do that as well so let's go ahead and install and this might take some time so what i'm going to do is i'm going to wait for this to completely finish installing and once it installs i'm going to open it inside of vs code so my text editor of choice so i'll see you guys in the next section once that finished downloading i went ahead and i opened it up inside of vs code which of course is my favorite text editor now you can see here inside of this remix application that we created we have a bunch of different files and folders now specifically what we're going to do is we're going to be working on the stuff inside of the app directory this is actually where our application code is going to live and where we're going to be working on for 99 of the time now in here you can see we also have a bunch of files and folders and i actually don't want them here at the moment and the reason for this is i don't want to overwhelm you with a lot of remix concepts so what we're going to do is we're going to kind of delete a lot of these things and we're going to re-add them later on in the crash course so inside of the apps directory we have the routes directory as well as the styles director directory so let's go ahead and let's right click on them so we're gonna right click on them and we're just going to completely delete them we're going to go ahead and delete them now i want to go to the root.tsx file this right here is going to house a component a react component that is going to serve as the root of our whole application so if you are familiar with react which again i expect you to be this is kind of similar to the index dot tsx or jsx file or the app.jsx file is going to be a simple component that's going to house all the other components and pages within our application right here you can see that there's a lot going on just completely forget about it let's just completely get rid of this and what we're going to do is very simply just create our own function based component called app so let's go here and let me just see if i need to zoom in some more let's just zoom in one more actually so we're going to go over here we're going to say const and we're going to say const app so we're going to say const app and actually let's go ahead and export default to this we're going to say export default and we're going to say function app it's going to be a function based component and then in here we're going to return some jsx and this is going to be the root of our application so what we actually need to do is return a full on html template so we have to actually have a real html application so we're gonna have html as our first tag and then we're gonna have head over here we're gonna have meta and we're gonna give this a char set of utc or utf utf-8 and then we can also give it a title so we can say remix jokes app and then our application code is gonna live inside of the body tag so this is just basic html and in here we're just gonna simply add an h1 we're gonna say hello world and this is all we need in order to run our application so to run our application let's actually go to the package.json file and let's look at the scripts that we have so if we go to the scripts we have a build script a dev script a post install script and a start script now we want to run this in development mode so what we're going to do is we're going to execute npm run dev which behind the scenes is going to execute remix dev which is going to run our remix application in development mode so let's open up our terminal and then in here let's run npm run depth so as you can see here we have our application running on localhost 3000 so let's go here and let's open this up and you can see that we have our well our root component awesome and now if i were to make any changes to my application and i were to you know add maybe a few exclamation marks and then save and then refresh my app you can see here that uh we have well our changes now one thing that i want to note is that if i make another change and then i save it i want to be nice if they can just hot reload so it can just detect the changes and then just change automatically without me having to refresh well there's actually a way to do this so remix has this really cool component called reload so we're gonna go over here and we're going to import a specific built in remix component so from remix we are going to import a component called live reload and this is going to well detect any changes inside of our remix application and just reload our application if that happens without us having to press the uh refresh button so we have to just utilize this component inside of our body so what we can simply say here is live reload and now if you were to refresh and let's just quickly just refresh our page just one more time so it can detect the live reload and now if i did this and it refreshed you can see here that now i don't have to refresh my chat my page because of this component now one thing that i want to note is that we probably don't want this component inside of our production application we only want this in development so what we can do is we can use the node and environment variable to detect whether we're in production or development so what i mean by that is we can do process dot end and then dot node n and this is going to be equal to development if we are in development and it's going to be equal to production of our production so we're going to say that if this is equal to development then what we want to do is render the live reload component if not and this is just a ternary operator we just don't want to render anything so let's just go ahead and quickly save that and if i were to refresh and let's make a change here we should see that change and we were not going to get this component in production all right cool so the next thing that i actually want to work on is uh pages so i want to work on actually adding different pages inside of our application so if you guys remember the jokes app and once we get to this over here we're at the path of slash jokes when we click on a specific joke so when we click on a specific joke we're gonna have the path of slash jokes and then whenever that joke id is and if we want to create a joke we're going to be at slash jokes slash new and of course we also have the home directory which is just slash which was just the landing page so i want to work on creating these different pages and of course we're going to do that with routes so let's actually get to that in the next section in this section of the video we're going to learn about route handling so remember route handling is a way that we can have multiple pages within our application and once we go to that page we can render different components now inside of remix to create routes what we need to do is we need to go to the app directory and then inside of the app directory we need to create a route directory and this has to be called routes because remix is going to detect this directory and for every single file inside of this routes folder is going to create a specific page for it so if we were to go ahead and create this directory and then in here we are going to create another component called index dot ts so the index dot ts is going to be is going to be the root path so index. is going to be this right over here now if we were to change this so if you were to rename this to something like jokes.ts well this is going to be the component that is going to be displayed once we go to the slash jokes page now if we just want to go to the landing page and display a specific a specific component then we can just simply rename this to index dot tsx so we're gonna go here and we're gonna rename this to index.tsx and very simply in here what we're going to do is going to create a function based component so we're going to go here we're going to export default function we're going to call this index route so we're going to call this index route and then in here we're just very simply and let's just return we're just going to return a div that says hello index route very very easy so let's go ahead and let's save this and if we were to go to our app you can see that we're actually not seeing anything so in order to actually utilize these routes inside of the root.tsx what we need to utilize is another remix component called outlet so what this component is going to do is look at the path that we're in and then determine what component it should utilize for example if we're on the root path then it's going to utilize the index dot tsx file if we're on the slash jokes path then if we had a jokes.tsx file is going to utilize that instead so now what we can do is we can actually have this outlet right over here and if we were to save this you can see that we have hello index root and now what we can do is we can actually just get rid of this not just if this doesn't make that much sense to you let's actually create our uh let's actually create our jokes.tsx file and hopefully that clears it up a little bit so inside of here we want a path for slash jokes so in order to do that we're going to call this component jokes.tsx [Music] the name of this is important this is going to be the path of our page so slash jokes now in here let's create another component so we're going to create another function based component and we're going to say export default function and let me just close this off and we're going to do jokes route and then in here we're going to very simply return a div element in here we're gonna say jokes so we're gonna say jokes and actually they have uh they have an an emoji as the o so maybe i can just quickly grab that from there or maybe i can just grab it from here see if i can do that let's grab that and if you guys don't have this that's completely fine you can go to the website itself and grab it or you guys can just use jokes itself and then we're just gonna go ahead and save that so this is the jokes uh this is the jokes directory or this is a joke's uh page so now if we go to slash jokes you can see that now we're utilizing this so again what the outlet is doing is figuring out what a path we're at and then once it figures out what path we're at it figures out what component it needs to render so if we're at the slash path it's going to render the index.tsx if we're on the slash jokes path is gonna render this one right over here in this section of the course we're gonna talk about how we can create nested routes now you might be asking what are nested routes well let's go back over here to this example and you can see here we have a slash page and this is of course going to our home page and over here we have a slash jokes page however as you can see we also have a slash jokes slash new page and then over here a slash joke slash whatever the joke id page is so you can see here that we have a bunch of other pages that start with slash jokes and these are nested routes now in order to create nested routes what we can do is very simply just create a directory so not a file a folder that is called the exact same thing as the route that we're trying to nest so in this case we're going to say jokes now in here what we can do is we can create a slash new dot tsx and what that is going to do is it's going to hit this particular component when we go to slash jokes slash new now if we want to go to slash jokes and then slash we can either just have this or inside of our jokes directory we can have another index dot tsx and so inside of this index.tsx we can create another function based component so over here we can say export default and then we can say function and we can say jokes index route we can go ahead and invoke this and then in here what we can do is very simply just have a div we can also have some random jokes over here we can say here's a random joke random joke or joke not jokes and then right over here we can have another p tag that has a joke itself so this is this is a joke from the website itself so i was wondering why the frisbee was getting bigger and then it hit me then it hit me haha very funny so that is the joke so now if i were to go to well slash jokes and then slash which is that page itself i don't see that at the moment now in order to actually get this what we need to do is utilize that outlet component inside of the jokes.tsx so what this outlet is going to do is it's going to look inside of the jokes directory and then figure out what component it needs to utilize depending on the path of course so in here what we can do now is we can just import from remix so from remix the outlet so the outlet component and in here now what we can do is very simply just add this outlet component and if we were to save this you can see now we have this so now we have it so again what is going on here it seems like this outlet component is very magical so what this outlet component is going to do is going to figure out what file we're in so we're in these the jokes file so the path is going to be slash jokes and then it's going to figure out okay inside of our actual application what path are we at so at this point we are at the slash jokes and then just slash which is basically just slash jokes and so what it does is okay because we're in the jokes component it's to go to the jokes uh jokes directory inside of our file and the slash remember is always going to be the index.tsx file so this outlet is going to be this index.tsx file now if we were to of course change this up and add another maybe new dot tsx so inside of here we're going to have a new.tsx and then in here we can create another function based component so we can say export default function and we can say new joke route and let me just close this up here and in here we're gonna want to have a little bit more complicated html or jsx we're going to have a div we're going to have a p tag that says add add your own joke and then in here we're going to have a form and we're gonna give this form a method and we'll talk about this a little bit later but we're gonna give this form a method of post so don't worry about this for now we'll talk about it later but in here we're gonna have just a typical form stuff so let's have a div and then in here we're gonna have a label let's get rid of that html4 and then in here we can have name and we can have an input in here and we can simply say that the name of this is equal to name and so this is going to be the name of our joke let's actually copy and paste this and now add the content so we're going to say over here content and let's actually make this a text area rather than an input because the content might be a little bit big and we can get rid of the type and we can call this name content and the last thing that we need is the submit button so let's put that in a div itself let's have a button and let's go here we're going to say type submit and we're gonna give it a class name of button we'll style this a little bit later actually you know what we'll just leave it as is for now and we're gonna give it an ad actually let's just give it the class name just in case i forget of button okay so this is our uh component and now this is all we have to do so if we were to go ahead and save this we don't have to hook this up to our jokes at any point in time this outlet is going to figure it out so if we were to go to slash new which is going to be this component it's going to figure out that okay inside of this outlet it needs to uh render this component so if i were to go here and say new you can see that we got our very very gross um page but it's working it's completely working and these these are nested routes so one thing i want to fix just right away is uh the label should be content and not name here so let's just quickly fix that and we can completely just maybe comment this out for now so i hope i hope this makes sense so this is really how we are going to be creating navigations inside of our application now you might be thinking the last real important thing that we need to worry about when it comes to routes are uh these routes so these dynamic routes so over here we have okay the slash page and then over here we have the slash new but what about here when we're utilizing the jokes id which could be whatever uh and so this that's what we'll talk about in the next section in this section what we're gonna do is talk about how we can create dynamic routes so remember when i go to slash jokes slash anything i want to render a specific page for that so let's go ahead and do it right now so in order to create a dynamic routes what we're going to need to do is go to the jokes directory and then inside of this jokes directory what we're going to create is another component now this component is going to be special because of course it's going to be dynamic so the naming of this is going to be a little bit different to specify that this is going to be a dynamic route what we're going to do is say dollar sign and then we're going to say joke id dot tsx and this dollar sign means that whatever path i go to so if i go to say slash jokes slash whatever or you know whatever it is it could be whatever well that is going to be the joke's id this right here is going to be the joke's id and we're going to want to render a specific component based on this dynamic route so that is really all we have to do we just have to specify dollar sign and then whatever we append here is actually going to be stored inside of a joke's id variable that we're going to talk about and get a little bit later in the course so right now let's just create a very simple component for this so we're going to say export default and we're going to say joke route so export default joke route and then in here we're going to return and we're going to return of course i need to make this a function so let's do that function joker out and then in here what we're going to do is we're going to return here's your hilarious joke so this is going to be an actual uh joke so we're going to say here's your i'm going to say here's your joke and then in here we're gonna have another joke and let's say why don't you find [Music] hippos hiding in trees so why don't you find hippos hiding in trees they're really good at it i don't really understand that joke but whatever they're really good at let me just quickly try to understand why don't you find hippopotamuses hiding in trees they're really good at it i don't understand that joke but whatever it's a joke and so now what ended up what ends up happening if we go to slash jokes slash whatever you can see here that we get this path now if we go to slash jokes uh without a path that's going to hit the index so that's that's going to have priority if we go to slash new that this is gonna have priority however if you go to slash whatever then we're always gonna hit this now of course what we wanna do is we wanna get this id and then fetch a specific joke based on that id so that's eventually what we want to do but before we do that our application is really really ugly so i think we need to style it a little bit just to make it a little bit prettier now that is what we're going to be doing in the next section so the last thing i want to quickly talk about is let's go to our jokes.tsx and what i want to do is just wrap this inside of a main tag the outlet inside of the main tag so we have our our header over here and then our main and then our outlet in this section of the video what we're gonna do is learn how we can style a remix application and the way that we style remix applications are going to be a little bit different than when styling other applications so other applications we either add something in the link tag or we just import these styles into a specific component and there we go we have the styles remix with these styles actually does something very very similar to the outlet component so again i know i've probably explained this a million times but what this outlet component does is it tracks whatever path we're at and then depending on what path we're at it renders it renders one of these components so if we're at the slash jokes path it's going to render this component if we're at the slash joke new then it's going to render this component right over here and the way that we're going to style our components is going to be very very similar to the way that we actually render components so you know what let's just get right into it so to style components what we're going to need to do is create a styles directory so let's go here and we're going to create a styles directory and then in here let's create an index dot css so we're going to say index.css and this is going to style so this is going to style this uh this uh where is it this route right over here the index.tsx route or component which is just the slash page so in here we're just going to get the body and very simply we are going to give it a color and we're going to give it a color of tsl because we're going to give it a little bit of a gradient so we're going to say zero zero percent 100 and then we're also going to give it a background image so let's give it a background image and this is going to be a uh radial gradient and then inside of this radial gray gradient we're going to say that it's going to be a circle and then we're going to say rgba and let's just do 1 2 1 5 2 and you can get this from the documentation if you don't want to copy it out yourself i'm just going to copy it out for you guys and then we're going to do a zero percent over here you don't really have to understand what's going on here it's just creating a gradient in the background so let's go here let's add some more numbers all right let's make this 35 and then the last thing that i want to add is rgba and then we're going to say 58 and then over here 13 and then over here 85 1 and then one hundred percent so these are the styles that i want applied to this component right over here the index dot tsx so where is that component this one so in order to actually apply these styles to this component what i have to do is export a link function because remember when we want to style things we're going to have some sort of link function and then in here we have rel stylesheet and then in here we have the href and so in order to actually achieve this exact thing in remix all we have to do is import something called link function so we're going to import something called links function and we're going to get this from remix let's get rid of that so we're going to say from remix and then what we are going to do is say export cons and here we're going to create the links this is going to be of type link links function and then what we are going to do is well this is going to be a function and it's going to return an array that's going to have those links so we're going to say array and then in here we're going to say it's going to be an array of objects and over here we're going to say that the rel is stylesheet so the url is stylesheet and then of course the href what we want to do is we want to import the href so what we're going to say is import styles url from now we're going to move to the stylus directory and then we're gonna go to the index.css so we're gonna go get that and then we're gonna apply that right over here so we're gonna say the href is equal to this and we're gonna go ahead and export this so this might seem a little bit magical but by doing this once we hit this component remix is going to know to render this link tag over here with these styles now in order to actually see it and right now it's not going to work in order to actually see we need to go to our root dot tsx and we need to add something right over here that is similar to outlet so remember outlet is going to render a component based on uh whatever route we're in right now we want something another component that's going to render a specific link element based on whatever route we're in and well you can imagine this is going to be called link and so what we can do here is we can add that link components or it's going to be called links sorry about that we're going to add this links component right over here so what this is going to do is once we hit a specific path it's going to see if we're exporting anything inside of that component if we are it's going to use this link tag to style our page so enough talking let's just see if this works so let's go here and let me just close this because i don't have anything let's go here let's be searching and you can see that we have our component nice and styled and just to prove to you just so we can really understand this if we go to our head so let's go to our head let me just zoom in here for you guys you can see that link tag so you can see that link tag for that specific page however notice this link tag when i change the path so let's say i go to slash jokes now it's completely gone you can see that we don't have a link tag anywhere let me open it you can see here now we don't have a link tag anymore so we only render that link once we are at that specific page for that link and now all we really have to do is create the styles import them to whatever component we want to and then just export to this function inside of that component and then we're going to render those styles so that's really about all we need to know with styling components it's relatively easy and really simple with remix so let's actually just go ahead and style our application as a whole now and to do this i am really just going to be doing a lot of copying and pasting so i highly recommend that you go to the documentation and just copy the styles there but i'll do the copying and pasting together if you guys want to see now it's time to style the rest of our application so in order to do this i'm not going to go ahead and write out all the styles that would take forever and take the focus away from remix itself so what we're going to do is we're going to go to the remix dot run page and i'll have this in the description below and what you want to do is you want to go to the styling section and as i said i am literally making this video based on this documentation so there's nothing really special as you can see here we just wrote this code out and i was just copying and pasting it basically so what we're going to do and let me just zoom in here so we already did this part and now what we want to do is we want to style the rest of our application so go right over here and let's say that the first thing we want to do is just style everything globally so we're going to go here we're going to create inside of our css file or css directory we're going to create a global so global.css so we're going to create that and then we're going to just copy everything except for the font face because we don't we don't you're gonna have to download that and i don't want to do that so let's just copy everything here look all these styles that we would have to do otherwise look at all that you guys really expect me to write all this stuff out no way like this taking way too long i didn't know there was this many styles so let's go ahead and copy all that and let's just paste it in there let's just go ahead and just close this meaning we're done with it my goodness 200 lines of code holy moly all right so let's just close this out and so over here there's a global dash large so this is maybe for like media queries as well let's actually just click on this copy button and then let's go here and let's what was it called again global large dot css so i'm going to say global large dot css let's paste that in and then let's close that off let's open medium so let's just create this file first in here so we're going to create this file dot css and then in here we're going to have these styles so let's paste those styles in and then we're going to style the index.css as well as the jokes.css so in here let's copy this so we're going to go ahead and copy this and so this is in the slash index.css so i guess we're going to be overriding this right over here so let's just paste that in and then the last thing that we want to do is style where is it style the jokes.css so let's just copy that and then let's go over here and let's create a jokes.css and let's just paste that in there so now the next thing that we have to do of course is uh have that link function so you can see here that's exactly what it's telling us to do and you can see why this is an array because we can have actually multiple links depending on the the screen size so let's just copy this very quickly so inside of the root what we're going to do is we're going to import the link function so let's go to our root.tsx and we'll just close this off for now so let's import the link function and well i guess we have remix so we could just say import the link function type or the links function type and then we're going to import all of our styles so let's just go ahead and do that and i know right now there's a lot of copying and pasting but well in the beginning of course there was no copy and pasting and don't worry once we're done this section there's going to be pretty much no copying and pasting these are just styles and we already learned about these concepts so now let's go over here and let's add the links and these are going to be global styles so they're going to be applied to everything so any styles that we actually put inside of the root are gonna be global styles you're gonna be applied to every single component so let's get rid of that for now so that's pretty much it for the root component so let's close that off now let's go to the route stop jokes and we need to do the exact same thing that we did thus far so let's just close everything off again close close close close close wow this is really busy so we are going to go to the jokes.tsx in here we're going to import links function i don't know why they do like multiple imports that's kind of strange but then over here we're going to say um let's see am i in the right yeah i know this is the exact one so yeah so we're going to get this then we're going to import these styles so we're going to import these styles as well we're going to paste that in there so we're going to paste those styles in there and then what we're going to do is go ahead and just export this links function and you can see here that this is very very bare bone so let's actually just copy all of their um let's just copy all of this right over here so we're going to copy all of this html just so we can have more html with some styles as well so let's go here and let's copy that in now one thing that i do want to note is that right here you can see we're utilizing this link component now if i were to go over here let me go ahead and import this this is very very similar so this is oh it's not even just very similar it's exactly the same as so let me wait let me actually import it correctly i'm getting some errors let me just import all of the jsx and not the uh not the function itself let's import that let's paste that in there and let's import this link component so this component is very similar to how you would utilize it in react router so you would get this link component and then you would click on this link and it would move from path to path so this is you know something that is not very difficult i do expect you to understand this so you have this link component and when you click on this link component you go to this slash you go to the slash page if you click on say listening component you go to the new page so you go you get redirected to the the slash joke slash new page so let's go ahead and let's save that and that should be it when it comes to styling let's lastly go over here do we need anything to change we just need to change a little bit of the a little bit of the html so let's just copy this html and again this is just html or jsx or whatever nothing not not a huge deal so let's just go here instead of having hello index let's just change it to this and let's import link from remix so let's see if there's anything else that we need to do okay that's it then we're going to move on to the database and don't worry we won't be doing any copying and pasting when going to the database so if we go to our app you can see that now it's nice and styled awesome everybody sorry i went to localhost 300 not 3000. you can see here that we got these styles if i click here that this is what this link is doing so when i click on this it's moving me to slash jokes if i click on this it moves me to slash joke slash new uh just to prove this to you you can see here add your own and it moves me to slash joke slash new and over here it takes me to um slash jokes some joke id we haven't really done this yet at the moment okay so i hope hopefully you guys uh buried with me with this copying and pasting we just had to copy and paste this html i'll also have the um the repo up on github if you want to copy and paste from there but we just have to copy and paste some jsx as well as some styles now we can actually start moving with making our application functional and well it is functional now but we can make it a full stack application with our server so let's get on to that in the next section now that we worked a lot in the front end aspect of remix let's actually look at the server-side capabilities now remember the server is the thing that is going to be interacting with the database and the front-end so it's kind of just right in the middle so the front-end is going to make a request to the server the server is then going to interact with the database get the data and give it back to the client so let's go ahead and create our server and that's what we're going to do in this section and specifically we're going to work on setting up the database inside of our server so we're going to be using a sql database specifically we're going to be using sql lite because we can very very easily configure that inside of our local machine and we're going to be using an orm an extremely popular node orm called prisma so an orm is just an easier way to interact with our sql database or it could be any kind of database but an orm allows us to interact with our database in an object oriented fashion rather than writing real sql queries so let's go ahead over here and inside of our terminal what we're gonna do is install prisma onto this jokes project now if you're interested to learn more about prisma i do have a prismacrash horse it is i think by far the best orm for node.js applications in my opinion there is nothing better i've worked with a lot of rms and i just i love prisma so let's just go ahead and install prisma so we're going to do an npm install dash dash save dev and we're going to install prisma so let's go ahead and install that and along with prisma we also have to install act prisma client so let's just install that as well so i'm going to say add prisma client so now that we installed that now oops something is wrong here so at prisma what am i doing wrong here yes of course misspelled it prisma dash client so now what we want to do is initialize our prisma project so let's go ahead and do that and what i'm going to do is i'm going to open this and you should notice a prisma directory be created after we run this command so let me just clear this we're going to do npx prisma and we're going to initialize a prisma project and we're going to say that hey we want this to utilize a sequel light database so we're going to say data source so data source dash provider so data source dash provider is going to be sql light so let's go ahead and execute this and it's going to say well do you want to proceed of course i want to proceed why would i execute this command so let's just and there we go so now we should have a prisma directory somewhere inside of our application and it doesn't seem as though we have that yet um i'm a little confused as to why let me just zoom out a little bit here just so we can see am i in the right directory it seems as though i am i definitely would have thought i would have a prisma directory am i in no what's going on here okay so let's try to execute this command again let's do mpx prisma init oops sorry about that guys dash dash oh not date source oh my goodness they uh it's gonna be called data source we're gonna do sqlite so that should fix the uh the issue that we have okay so now we got an environment variable and we also got uh we should have a prisma file and we do or prisma folder and then in here you can see we have this schema.prisma and this is where we're going to connect to our database in this case our database is just a simple file inside of our application you can see here it's moving into dash dev and we're also going to add the schema of our application so we're going to add you know the jokes as well so if we want to add a jokes table and this is just basic sql knowledge essentially what this is doing is adding a table inside of our application what we would say is okay we want a jokes table with an id we're gonna say that this is of type string and we're going to say that this is a primary key so we're going to say act id and then at default again if you if this is a little bit confusing to you um check out my prisma crash course it's relatively quick and you'll learn all about how to interact with your sql database with prisma let's also have a created at status and we're going to say this is of type date time so we're going to have a type date time we're going to give it a default value so we don't have to always provide it so we're going to say default of now so we're going to say default of now let's also say update it at we'll say that this is also a date time and we're going to give this a value of updated ad so whenever we update it what this is going to do is going to get the time stamp your current time step and assign it to the updated at column let's also give it a name which is just going to be a very simple string and the last thing that i want to provide is the content which will also be a very simple string so let's just go ahead and let's save this and now in order to push this inside of our prisma database what we need to execute is npx prisma db push so what this is going to do apologies is is going to get our sqlite database and add this new table into that sqlite database so once we execute this we can just click generate and there we go and there we go so this seems all fine and dandy we actually synced our database with this table with this information right over here okay so that's pretty much all we have to do in order to uh set up our database that's pretty much it now let's actually start interacting with our database and our server with the front end but before we do that what i want to do is i want to seed some data so seeding data if you don't know what that is it's just having some initial data inside of our database once we hit development mode so just for development purposes we might want to have initial data rather than having an just a blank slate so what we want to do is we want to create a seed for this so inside of our prisma dot ts file or prisma directory what we can create is a seed.ts file and in here what we can do is we can push some data so we can push some data onto our prisma database so again this isn't really a crash course about how we can see data prisma and stuff like that so in this case i think this is a good candidate to very simply just go to the documentation and let's go all the way here and let's just copy this so we're going to copy this this is the seed and we're just going to paste it in there and it has a bunch of jokes in here as well so what it's doing is it's just getting the prisma client it's instantiating a new prisma database and then over here what it's doing is it's just mapping through this function that returns this array of jokes and it's just doing a db.joke.create and it's adding those jokes in there that's very simply what it is doing nothing insanely difficult and that way we're going to actually seed our database and have some initial data and thus some initial jokes inside of it now what we need to do is to run this file so to run this file we're going to utilize a package called es build dash registry or register so let's go over here to our terminal and we're gonna do an npm install and we're gonna install es build dash register so let's go ahead and install that into our uh application and then we're going to execute node dash dash require es build dash register and then we want to execute prisma dot prisma dash seed dot ts so let's execute this and once we're done that we should have the seeds inside of our database now we don't want to run this script every single time we start our server so what we can do is actually go to our package.json and then in here we can execute a prisma script so over here we can say prisma and then here we can have an object and we can call this seed and then in here we can have that exact same command so let me just add a comma over here so it stops yelling at me so i'm going to say node dash dash require es build dash register and then over here we're going to say prisma seed dot ts so that we're going to execute every single time we have our application up and running so the next thing that we have to do is actually connect to our database from our server so over here we just created our server now what we need to do is connect to the database so to connect to the database what we need to do is of course go to our server now our server is still going to live inside of the app directory so right in here to specify that this is server code all we have to do just like we're doing it right over here is specify the name of the file then dot server then dot the extension and then remix would understand that okay this is our server so over here what we can very simply do is create a utilities folder because over here we're going to use this utilities folder to connect to our database and then here we're just going to very simply say db.server.ts and remix is going to be very smart and understand that this is going to hit our server side rather than the client side so in here again what we want to do is we want to connect to our server there's going to be a lot of prisma specific stuff to do this so well you guys probably know what i'm going to be doing we're going to go in here and we're just going to copy this file right over here and we're going to paste it in there and essentially what this is going to do is going to connect our prisma client from our server to the databases sqlite database that we created and it's going to be doing some typescripty things but at the end of the day you can see here that we have just a prisma.connect and it connects to our database really if you want to utilize prisma and you want to utilize it with a remix application this configuration is always going to be the same so you know you probably just have to write it out once or just copy and paste it every single time that you after you wrote out the first time so you know not really a big deal and i don't want to take a lot of premise away from remix so now that we have our database and we have our server let's actually go back to the front end and start interacting with our server to get those jokes that we seated inside of our database so let's go ahead and do that in the next section in this section of the video what we're going to do is learn exactly how we can fetch data from the back end to the front end now let's actually look at specifically what we want to do so right now i'm in the slash jokes route and what i want to do is i want to fetch all of those jokes so that i can render their names right over here in a list and so we want to go to the slash jokes page and then fetch the data from the back end in remix each route is responsible for fetching its own data so again what we want to do is we want to fetch it from the jokes so what we're going to do is we're going to go to the jokes.tsx which is the route responsible for that particular page and then in here we're going to fetch that data now you might be wondering okay well how do i fetch data you fetch data with a loader function so a loader function in remix is just a simple function that we export so really it just looks something like this export const loader and then we're going to do over here async and then we're going to do just a normal function now what this is going to do is it's going to return loader data and what loader data is is simply an object with a key that is data and then the value that is whatever it is that we want so for example over here we can add a new interface or type this is just some typescript stuff so we can say that the loader data is equal to an object and we're going to say that this is the joke list items and then we're going to say that this is of type well we're going to get back an array we're going to have an id for each element as well as a name that's the only things that we need so we're gonna say that this is gonna be of type uh id that is a string so this is just some typescript stuff defining what we're gonna get back and then we're also going to get back a name that is also a string and we're going to get an an array of those objects and so right over here what we can very simply do is say that const data and const data is going to be of type data loader data and this is going to be equal to jokes item list and then in here we're going to make our fetch so right here is where we're going to make our fetch so in order to actually make our fetch what we need to do is we need to access the database from our utilities that we created so we're going to do import and then from our utility so we can do tilde and then slash utilities to go to the root directory so we can do tilde slash utilities slash db dot server and this should give us access to db and then in here what we're going to do is we're going to do db dot and then we're going to do the name of the table that we want to access which is in this case joke and then we're gonna do find mini and then we're gonna go ahead and just fetch this so we're gonna go ahead and fetch that so find all of these jokes this is how we utilize prisma and get every single joke in our table the last thing we have to do is define the type of the function itself and this is a loader function so what we can do here is we can get the loader function type and we can define that this is a loader function all right and then the the other last thing we have to do is actually return that data so let me just quickly explain what we're doing here so this is the loader function that is going to fetch the data from the back end and as you can see here we're not really doing any http requests we're just kind of interacting with the database just there and then and so this loader function is going to return an object so it's going to return an object that has the joke list item as the key and then the jokes and so all we did here in the loader type is just define that type so that's all really we did and then what we're doing here is defining that this is a loader function and that we are just returning that data okay so that's how we uh kind of set up fetching data but how do we actually fetch data and render it inside of the jsx well in order to do that what we very simply need to do is import a hook and this hook is called used loader data so over here what we can do is we can say const data and this is going to be equal to use loader data and we're going to go ahead and invoke that and so what this is going to do is figure out okay this is the loader function and so it's going to call this function somehow magically even though we're not linking them together it's going to call this function and it's going to populate this data over here and what we can also do is define the type of this so we can do these triangle brackets and then in here we can just very simply say loader data so we can say that this is going to return an array of objects where each object has an id and a name and they're both strings so once that's done really all we have to do is go to the ul as you can see here and instead of rendering this uh uh and just just kind of this static uh list what we can do is we can iterate over the data so we can say data dot joke list items dot map and then over here we can say joke and then here we can render the li so we can have some li tags we can give it a key so let's give it a key of joke dot id so joke dot id and then right over here let's give it let's use the actual link element so we're going to say link and we're going to give it a 2 of joke.id so joke.id and then over here we're going to give it a name of joke dot name so now if i were to write this properly and save it and if you were to go back over here you can see that we get all of the stuff from our database this is actually from our database how terrific is that that is incredible so right now what we're doing is um i think right now what we're doing is we're a little bit over fetching i think i would like to just show five instead of uh instead of every single thing so what we can very simply do at this point is inside of our loader function we could just do some prisma magic so prisma is going to give us some options so we can very simply say take which means we only want to have five so we want to limit it to five and we can also uh get back specifically what we want so in prisma we we specified that we have these columns as well the updated at the the created at the content and we're actually getting those data back as well so if i were to console.log the data and i were to go over here and i were to give it a quick inspect and as you can see here now we're only taking five but just to show you what's the other option so if we were to go well i guess it's not showing because it's some rendering but you guys just take my word for it we're getting back everything and so what we can actually do here is uh to specify exactly what we want inside of the loader we can just say select and we want to select only the id we're going to give that a value of true and we're also going to say that we want the um the the name which is gonna be true all right and the last thing is let's actually order them by when they were created so we're gonna say order by created at we're going to say descending order so it means the latest ones are going to be first all right awesome and now you can see if i refresh you can see we have all of our jokes and they they take us to these pages all right so now the next step is to uh well when we click on these specific queries or these specific jokes we want to see the actual content of that joke so the way that we're going to handle that is actually very very similar we're gonna be fetching data and so we need a loader function but of course this time it's gonna be on a different route in this section we're gonna work on the slash jokes slash whatever that joke id is so that we can render the joke inside of the outlet so this is going to be very very similar to what we did over here so what we need to do is we need to go to that dollar sign joke id page and then in here this is where we are going to render our joke and hopefully we get how we can do this now so the first thing that we need to do is create a well a loader so we're going to do here const loader and then we're going to say loader and let's just say that this is a loader function right from the get go notice how it auto imported and actually should auto import from remix not this so we're going to say loader function and this is going to be an async function and we're going to go ahead and create it now what we need to do is we need to get the id so let me just quickly copy this so the route kind of looks like this right here so what we need to do is we need to get this part from our route so let me just zoom in one more time i actually know this is the best i actually right no no let me zoom out so we need to get this part of the route now this part of the route is going to be called joke id and it's inside of the params so what we can do here inside of this function we can actually destructure out something called params and then we can just very simply get the joke's id from those params and then in here what we can do is say const joke is equal to and we can just say await and let's get the db let's see if i can auto import it yes i can so we can say db dot joke dot find unique so this time you want to find unique because we want to find just one joke and then we have to specify okay well what joke do we want to find so we can say where so where the id so where the id is equal to the params dot joke id so joke id and remember the joke id part is coming from the name that we called it dollar sign joke id all right so that's how we do that and so if the joke doesn't exist let's just go ahead and throw an error so we're going to say if the joke doesn't exist because we could have some gibberish id over here we could say throw new error we're gonna say over here joke not found however if the joke does exist then what we can very simply do is say let's just do const data so const data is equal to this joke and then we can return this joke or we can return the data itself and let's actually give this data a type so we can say here type loader data and this is going to be of type that is joke and let's actually get the type from prismaclient so we can actually get the whole joke type from prismaclient so we can say here is from at prismaclient so this is prisma that's handling all of our database we can actually get the type that we're gonna get back which is joke we can say here joke okay awesome so that's really all we have to do and then the the very last thing that we have to do is in here just do cons data is equal to and then we're gonna say here use loader data i'm gonna get that from remix yes awesome let's also define the type so we're going to say loader data and then we are going to just invoke it and so in here what we're going to say is here's here's your joke and then we're gonna have the joke name so let's put a p tag in here and then right in there we're gonna say data dot joke dot and let's actually just have the joke content first and then down here we can add a link so we can add a link that goes to the uh that goes to the initial page so the landing page so we can just specify that with dot and then over here let's import that link and okay let's go ahead and save that and then in here we can very simply say data.joke.name and we can specify that this is going to be a permalink so now let's just quickly go over here let's give it a quick refresh let's just go to the slash jokes page initially so now we go to the slash jokes now if i were to click on road worker you can see that i actually get the joke i actually fetch it from the database here's a joke i never wanted to believe that my dad was stealing from his job as a road worker but when i got home all the signs were there wow my father is a thief why don't you i don't really understand that joke frisbee i was wondering yeah we ready this one let's read this other one what did one plate say to the other dinners that was funny i like that one and then skeletons why don't skeletons ride roller coasters they don't have the stomach for it if you click here then i guess it just it just links us to this page right over here which is the current page all right awesome so that's pretty much it there's there's nothing more that we have to do uh the last thing that we have to do is work on this right over here so we gotta work on actually adding our own content so right now we don't have that ability of course so let's go ahead and do that the next thing that we need to discuss are mutations now what are mutations well mutations are when we mutate our data in some way whether that's adding data updating data or deleting data what we were doing before is fetching data and we utilized loaders to do that with mutations we're not going to be utilizing loaders instead we're going to be utilizing something called actions now let's quickly talk about what exactly we want to mutate well we want to mutate that jokes table and add a new joke when we click this add button so let's actually go ahead and let's go to the route responsible for this component which is the new.tsx and then in here in order to wire up this form and allow it to interact with our server and add a joke to our database all we have to do is export an action an action is very simply a function an arrow function that performs a mutation so let's just get right into it right now so what we're going to say is we're going to say export const and we're going to say action we're going to give this a type of action function this is some typescript stuff and let's get that from remix so let's go over here we're going to get that from remix and this is going to be a normal async function so it's going to get an async function so just like we were able to access the params when we destructured it out we can also access something called request and what this is going to do is just simply be the request that we are trying to make now what's going to be making the request well it's going to be the forum right here is going to be making this request so what we want to do is we want to be able to get the form data from that request so we can very simply say const form and let me zoom in one more here we can say something const form is equal to a weight and then we can say we want to get the request dot form data so remember the form is going to be making this request and that we're getting access to it inside of the action and then we're getting that form data inside of this form variable so then what we can very simply do is say something like const name is equal to form dot get and we want to get the name and we can also do here const content is equal to form dot get and we can also get the content because that's the two things that we need to add now the last thing is let's actually do a little bit of validation so let's make sure that we actually get something past them because right now what we can do is we just simply click add without adding anything in there so what we can very simply do is say if if uh the name is not defined so it's an empty string or the content is not defined what we can do is you can throw an error so throw a new error and we can say form not submitted correctly just go ahead and save that and now if this is submitted correctly what we're going to do is we're going to create a fields object so we're going to say fields we're going to say name here and then we're going to say content so name and content and then once we get that we're going to actually make a request to our database so we're going to say const joke is equal to a weight we're going to get the database from our utilities are we're going to say db dot joke dot create and then we're going to say that the data so we have to provide it with the data which is the name and the content and we put it inside of this fields sorry about that guys i don't know why i had to just suddenly sneeze and then we could just add that in there all right cool so as you can see here something is going wrong this wasn't expected so it's saying here data is what is this saying let me just zoom out a bit so it's saying that the content is not assignable to the ah okay so what we're gonna have to do here this is some typescript stuff what we're just gonna have to do here is just double check that this is actually a string so we can say if type of name is not equal to string and then or or type of uh content is not equal to string then we want to throw this error so this ensures that these things are strings so this is actually going to go ahead and save it to our database but once we save it what i want to do the final thing i want to do is actually want to redirect the users to that particular joke so what we can say here is return and from remix we can get this redirect function and what this is going to do is redirect it to whatever path that we specify so we can go ahead here and invoke it and we can say slash jokes and with template literals we can do slash dollar sign and then over here we can provide it with the joke dot id that we get back when we actually create it so what's happening here is we actually don't have to touch this at all so we don't have to touch this at all when we have this method post what this is going to do as soon as we post it it's going to get the content which we have the name up here and then name here and it's going to make a request to this action and this action is going to do the rest save it to our database validate everything and then we're done so let's just go ahead and save that and let's just do a quick refresh here and let's give this a joke a new let's call this i don't know microphone i don't really know any microphone jokes you know i was making a youtube video with a microphone what a terrible joke sorry guys i can't think of any jokes so now when we click add what should happen is we get redirected over here and you can see now we have microphones right over here and if you were to refresh you can see that it actually was added to our database how simple is that

Channel: Laith Harb

Views: 2,701

Keywords:

Id: 3CAqFdVlbUA

Length: 83min 17sec (4997 seconds)

Published: Sun Dec 05 2021