React Routing with Express (P5D62) - Live Coding with Jesse

Key Takeaways

okay hey everybody welcome to live coding with jesse i'm jesse and this is cordelia can you say hi thank you wave say hi hi and are we gonna do some coding yeah all right yeah so um a little update on a few things so if you um follow me on twitter you're seeing some of the tweets that i was um putting out there were about my streaming setup at home so i uh i did everything i i got an old pc that i used to use for um for development but i haven't used in years got it up spent a really long time updating it uh because it evidently it takes forever to run updates if you haven't updated it in years uh so updated it all uh got everything set up on my macbook which is what i normally use and the pc and then it turns out that i was trying to use something a plug-in called ndi for obs which is my streaming software and it doesn't work with a lot of amd processors and i happen to have one of the processors that it doesn't work with so didn't get it to work so if today's stream is a little bit slow i apologize i i worked i worked hard on trying to fix that so i'm not sure what the next step is in terms of a solution i'd love to be able to use my uh my webcam that's much better than the built-in camera but my macbook can't handle it uh so i'll have to come up with something else i mean maybe if i just get a really cheap uh windows machine uh that has an intel processor i could offload a lot of the streaming stuff onto that i don't know we'll see but for today we're going to work on our our routing so let me get this up on the other screen and then i'll switch over to that all right so this is our on the left is our server.js file and this is where we have our custom router so i've gone over this before on the stream if anyone really wants me to go into it in more detail let me know we can do that in the question and answer portion of the stream which will come at the end and otherwise i'm just going to kind of briefly explain what we're doing and then on the right we have our our data for our main menu that that's in that side drawer and we have it it looks a little bit different than normal links so in order to have our client-side routing work we need to add in some extra information so that's why we have you know this not only this link url but then an as url [Music] so we need to tell if i could deal yet so uh yeah cordelia sadly she won't be joining us for the rest of the stream her mom figured out that she had snuck down here so um she was doing pretty good though she wasn't trying to press the keys i don't know maybe she could have stayed uh but anyway that's why we're gonna have to have to add in a little bit more information so basically what we need to do is tell our router exactly what information we need and what component it needs to render so normally if you go straight to the site like you type in a url all of it is handled by this router here but if you try to do client-side routing uh obviously like it bypasses our server-side routing right so we need to handle that over here as well so it's a little bit of extra work but i think it's it's what we have to do to make sure that all the urls from the old site work on the new site as well okay let's get to it seems like we have a lot fewer viewers than normal i'm wondering what um [Music] i wonder did anybody get a notification i didn't get a notification from the stream saying that it was gonna start maybe maybe that's the problem uh so usually when that happens and a notification doesn't go out then we a lot of people don't know so i did throw something on twitter and on instagram but uh i don't think i can manually make a notification go out so i'm just gonna get started i was kind of waiting a little bit see if we get you know our normal amount of viewers but i'm just going to get started with this so i will have a pomodoro timer and i'm just going to let it go on my other screen here and then let's jump right into what i was working on before i started the stream and that is i'm just going through let's shrink this down a bit we really won't use this at all uh maybe at the end we'll be able to get commit uh but i'm going through our data all our links for that side uh navigation menu and oh phoenix mentioned it's it's uh past 1am in india you know what phoenix i totally forgot about that you're right uh i i do have a um a decent amount of viewers uh who are nearly on the other side of the world from me and it is really late uh for them so that that probably explains uh why we don't have at least why we part of why we don't have as many viewers as normal um let's see just trying to find where i left off at okay so it looks like we have minor programming or minor programs works that link works our academic advising uh i'm having trouble finding this data so i may not have transferred this data yet so we're just going to skip that for now and i've already made a note to check that out so student academic support services uh let's see if we have if we have anything so all of our if you want to check out the server.js file the link uh to the repos in the description to the video so you can check that out and just go you know write to server.js this is all right on the master branch uh but all of you know the actual logic is down here but up top here we have a large array that it gets searched through to determine based on the url what needs to be rendered what data do we need to get from wordpress and what components need to be rendered so that's what all this data is here so let me i guess i should just do a search because this is getting quite large and i want to see this i believe the url would be s-a-s-s and what i've been doing and let me pull some of this over some of the stuff i've been working on on this this other screen what i've been doing is searching just to be sure so uh in this instance let me check back here okay so i believe we're in academics in undergraduate we have these sub menus uh which we ended up taking in in on this is the current site like the main site for the university that i work for as it is now so instead of having these menus here we move them to be a part of our side navigation which is nice because then you can get to them from any other page on the site it saves you having to load another page uh but this is what we're trying to get to the student academic support services so we need a route so that people can get to this page on the new site so let's see we have our url they need to be able to get to this url but also oops accidentally clicked on it actually it looks like there are sub pages as well good to know lots of sub pages okay so we have to be aware of those sub pages and what we'll do first is let me pull over another page here and let me get over i was just cleaning up some data so let's see if we have anything here and there are only about 20 entries here so it can just scan through quickly and it looks like we may not have we may not even have this data yet which is okay uh if that's the case we can grab that data later on and just make a note of it but we can still create a route we just won't be able to test the route right now so what i'll do is make note of this url in this route and then on my other screen i have a to-do list so i'm just going to pop this into the to-do list wow in my to-do list thing seems to take up quite a bit of uh quite a bit of computing power i can hear my um i can hear my laptop running a lot more loudly so i'm just going to close that down and let's make a route for this so that we have it even though we can't test it so whenever someone types in sass we need to direct them somewhere so let's just let's grab something so that we don't have to type it all out we're going to copy and paste so what we're going to do this first part is and this is how we set up our router not every custom router has to work like this but in the context of what we've done we're going to say if somebody happens to type in sass and i believe i've already set this up so that uh the case does not matter so this is case insensitive um so if someone types this in what we want to do is have the component that gets rendered be the page component and then we don't have a post type yet but we're going to anticipate creating a new post type for this so this would be i don't even remember what that was student academic support services so for now i'm going to anticipate we will create that post type because it looks like they're at maybe four at least four um sub pages that i can see so that may be a good candidate to be its own post type of its own section so we're going to create that at some point maybe not in the stream today we'll see uh i mean i suppose maybe we could let me know what you all think if you'd like to go through the steps of creating that or not and then for the id we'll stick with the default being main so what we'll do is the main page will give it the slug of main in wordpress so we'll save that and now we'll move on right because we don't have that data so there's not really anything else we can do about that uh although what we can do is is i guess we can change this here so it's going to be page type and id is going to be main there we go uh now writing center is another one of those where i don't know that the data has has come over yet we can double check though actually there's a link to it here so i'm just going to go here regardless of whether or not we have the data transferred it still needs to be added to the router john hanson said so now you're using sas for your styling um i would prefer to use sas for the styling actually i just never took the time to set it up oh worlds asked do you use express with wordpress uh so the express is a separate part of it so our express code which is i mean express for those of you who aren't sure what's what's happening here we're using javascript on the server okay using something called node.js which allows you to use javascript server side there is a a library or plug-in wherever you want to call it that works with node.js called express it's very common it may be the most common uh plugin that people use or library that people use with node and it helps like any javascript library it helps to simplify things makes it easier uh to work with it so we're using that uh in our server.js file to help us out to create a custom routing solution for our react site where wordpress comes in is we have a separate wordpress installation that lives elsewhere on a totally different server and we have graphql running on that server which means we can use apollo which which is another library that we work with to make graphql queries to our wordpress installation and get data back so express does work with wordpress but intellect indirectly right through intermediaries here so we don't directly have you know express on a wordpress server or anything like that okay so we have the writing center page and let's see it looks like there are no sub pages for the writing center so this would probably be a better candidate to yeah this would be a better candidate to reside elsewhere i'm meaning like it doesn't need its own post type it can reside inside of another post type and i'll show you you know what i mean so on the side here this might be hard to see let me increase the font size a bit so on the side here all different post types so probably that student academic services student academic support services that's probably where this writing center should live in there but i really would like to show you what happens when we have real data and we make a route so let's add into the academics pages because it i mean it makes sense there uh at least for now we can always move it later but in the academics pages let's add manually another post type so i'm not going to bother trying to go to the database and pull the data in we're just gonna do copy and paste just to get this working so we're gonna add a new page and let's call this writing center and we're going to paste this in let's paste this in here there we go and then we we keep our formatting when i originally pasted it i went into this text thing and uh you see we had no formatting no tags if you taste paste it into the visual tab in wordpress uh it pulls over a lot of the formatting so let's see i wonder if the uh all right yeah so the notification finally went out that the stream was happening so the viewer account just jumped up so hello everyone if uh for those of you just joining us which is most of you uh we're doing some routing uh we're working with our router so i'm just putting in some data so we can create a route and then actually navigate to it and see the data there so i will need to do something about you know these these links i need to add the links in somewhere so i'm not going to worry about that right now but for now let's add a slug and we'll just call this writing writing center so i did put the title yep writing center so let's publish this so it'll be available now great okay now let's go back to our a router here so if we take let's go yeah let's go here and copy and paste this because we won't need to change much so this is already set up to work with the same post type so let's grab this and change it to writing center alright and i'll take a second to explain this so what's going to happen now is i don't know why they didn't auto format what's going to happen now is if somebody types in a url that when the site launches it'll be franciscan.edu writing center then our router is going search through this array find writing center and then now it's gonna know okay we need to render the component called page it is the post type of academic pages so we're going to need to make a graphql call to search through academic pages and then within there we would want to search for the academic page with a slug of writing center so that's what each of these mean so when we say here that this has this this default i'm not going to get in too deep into that right now but in our router we have uh several like options for some kind of odd routes that we've had to deal with uh but for right now this is just you know pretty simple so now that i've saved that we should be able to navigate directly to that here we go we should be able to navigate on localhost writing center since i'm running this locally let's make sure i am running this okay i am running this make sure i saved it okay and let's try it again localhost refused to connect all right let's just try to get to local hook no it didn't ah let's see all right well localhost is not working what happened let's restart the server then because it should be working um let's give it a old click let's see if we can oh it's just not giving us an error immediately i guess that's good all right okay it's it looks like it's supposed it's building the page okay in about five minutes i'm going to go to the live chat and answer your questions if you if you're asking some questions just you know hang in there wow this is really odd oh wow that was taking a really long time uh so at the beginning of the stream uh most of you weren't there but beginning in the stream i was explaining that uh i did have a plan to increase the streaming performance uh and it failed because i don't have the right processor on the pc i was trying to stream from so anyway uh i need to come up with a different plan so for now my computer is very sluggish when i'm running the stream and i can't use my better webcam okay so now let's try to go to writing center to verify that the route that we just made works this may end up being a shorter stream uh if if our if this is running so slowly uh there we are awesome okay so we have our writing center information that we just created this in wordpress and now it's being pulled in through graphql and apollo into our react site and so now we have it we have writing center but we have a problem so that was wonderful if we navigated directly to it but what if i um what if i go over here in my side menu and i go down here to academics into i believe undergraduate and then i want to click on writing center right now [Music] it takes me to to the wrong url anyway but then also i i can't get uh the info i want so let's let's check that out so here right now we are going to the wrong place so let's change our url to writing center but that's not enough since this is going to be when we click on that that's going to be a client-side uh route so it's not ever going to hit the server and load from the server there's going to be no page refresh so everything we've done here basically it's not going to apply so we need to mimic what we've done here over here in our data for this and so we're going to take pretty much exactly what here oops academic pages are right and we're going to say what id do we want and that id translates into what slug do we need to search for in wordpress under the type the post type of academic pages so let's go writing center and we're going to save that and i'm going to give it a second since it was so slow earlier yeah all right so let's go back in here and let's click here in undergraduate and now let's check out our writing center link and it worked this time actually let me navigate somewhere else because we were already on that page so it really wasn't impressive nothing actually changed whoops and writing center there we are and it went right there um so very quick client-side routing and i don't know i don't think it's set up when we when we serve this locally but in a production environment a lot of this information would be cached so uh we're we're gonna by doing it like this instead of just allowing it to fall back uh and do a page refresh on the server we're gonna see significant speed increases so running locally you don't really see it that much but it's it's going to be worth the effort in terms of user experience and performance okay and my timer just went up uh my pomodoro timer so i'm gonna now go to the chat and try to answer as many of your questions as i can and i'm i may or may not do another pomodoro session i uh i'd like to do more but it's just the my computer's running so slow it's it's just kind of painful to wait uh to see if these things are working okay uh renato says hey jesse uh sorry don't want to bother your work uh don't worry about that questions are always welcome says just wanted to ask are you using a mic to stream i'm thinking streaming coding myself also is a laptop okay um yeah so i'm streaming from a laptop right now from the macbook pro uh i'm using the built-in microphone so it works when i stream from my office though i get a much better you know quality stream and from my office i'm currently using an external microphone that plugs in by usb and i'm also using a usb webcam the razer keo webcam so i've my streams from my office are so much better uh right now than what i can do from a laptop so it is possible to stream from a laptop but unless you had a really really good laptop you're probably not going to get a great quality in your stream both in terms of video quality and you know like whether you can get 1080p or 720 or whatever and in terms of just the what your machine can handle my machine obviously is slowed down significantly when i'm not streaming everything just runs super quickly i never have any lag as soon as i start streaming everything slows down to a crawl so that's just something to you know keep in mind i'm i'm sure it does really depend on how powerful your laptop is uh vargo says what software do you use uh obs okay renato is talking about sorry without the camera yeah you can stream uh if you don't include the camera i you should get uh be able to get away with having a little bit less in terms of you know ram on your machine uh it it there's definitely a difference in like how much cpu gets used if you have obs it'll show you the percentage of the cpu that gets used so depending on what you're doing and if you have that camera there it does use more right now i'm just using the built-in camera uh it seems that an external like usb camera uses even more cpu at least that's just been my experience and then just said oh cool this is for a legit uni yeah for sure all the projects we do here are real projects that are that are either live right now and we're improving or are going to go live this particular project is scheduled to be live on june 4th this is coming soon uh phoenix says so jesse is a laptop with eight gigabytes of ram uh four gigabyte nvidia gtx uh 1050 with i7 processor good enough machine or do i need something more i i think that you should be able to get away with it with with that machine you know what let's bring up the um uh the specs for this machine now and uh just to to compare so right now uh that's probably too small for you all to see but uh oh so i'll read it off as well uh this is the macbook pro retina the 13 inch early 2015 model so it has a 2.7 gigahertz intel core i5 so if you had the i7 you know you're already doing better than i'm doing right now and it has the eight gigabytes of memory so i would say uh yeah definitely uh you you should be able to stream with a laptop as you described it's gonna be better than what i have right now uh and right now it's not ideal but it is possible for me to stream from uh this laptop uh julia says react me i'm not i'm not sure what that question is julia if you could uh explain a little bit more i'd be happy to give you an answer uh john says will the caching of the many pages from the wordpress server uh be using uh prefetch or something else uh yeah so a lot of that will be using prefetch so whatever links and i can kind of show this this this actually might be uh really appropriate to show right now is you know where this data is going into in terms of like what component is using this data and that's where that prefetching is going to happen too so let's check it out we need to go to our drawer let's see our components and let's go to our drawer item so each item in the drawer is a has a link so we're bringing in link from next link so this comes with next js which is what we're using uh with react next js has some really nice things in there um it does come with some routing with routing right out of the box we're not really utilizing that uh since we did a custom routing but it has server-side rendering setup by default which is amazing so it saves us time from having to try to do that on our own and one of the things that it does have is this link component and you can put prefetch on that and so for our prefetching what we have now set is for all these links over here it's if uh item as url so if this as url is there then it prefetches if we do not put this piece of data in there it doesn't prefetch so all of these will be pre-fetched and we also have some logic here to with our turn areas to determine what should the href be this is because uh mixed in with these internal links we do have some external links which we want to be treated differently so that's why we need to do this so you can see our href may end up being our link url or our as url depending on whether or not this as url is present um and if so i guess i didn't really explain the prefetching so what it what this does here what next just does here is it when your page loads it's going to look at all the links that have that prefetch attribute and it is going to get the data to load those pages in the background using a service worker a service worker is a javascript file that just kind of sits in the background in the browser and it can do things that won't block the rendering of the the page so in this case what it's doing is it's grabbing the data it's loading that data and just saving it and waiting so that if a user clicks on one of those links that we've pre-fetched the data is already ready and it just increases those load times so they're pretty much instantaneous because that data is already there and like i said because it doesn't block uh any of of the rendering you know the user doesn't even know there's no like performance issues with all this stuff loading in the background so really cool useful uh we've done this before on a site that we launched and in google analytics when we checked our load times for a lot of the interior pages the load time was zero zero seconds uh because we had already pre-fetched it so everything was ready there was literally nothing to load so really cool uh when when this works out so we're gonna have i've already i already have a test version of this that is live um and it just has um you know one of those now uh urls so that now.sh and it has a bunch of strings so i'm gonna get a a more normal looking url set up for that i'll use that as an alias so then you all i'll put that in the description to the video so you all can check it out whenever you want uh test it and then you'll be able to really see the speed that this site has when we use that pre-fetching see goku asks uh which database we're using so we're using a mysql database that's connected to a wordpress installation and that's the new database currently for the the old version of the site that's still running right now it's a sql server database so i've been migrating all the data from there and putting it into the my sequel database so normally with wordpress you use my sql or you can use mariadb default for wordpress is my sql goku will ask which back end framework is better um so if you're i guess if you're talking about back end uh i it depends on what language you're using so with react or i'm sorry with node so with javascript as your back end language then express seems to be you know the one that that everybody is using uh it's not the only one but i don't have any experience with any other excuse me sorry i don't have experience with other backend frameworks for that if you're talking about you know different languages there's there's a lot of different options uh so i don't know exactly what's better uh look for php what do people use larval is that that the php framework that's pretty popular um i don't remember what the python one is called i never use it so i don't really remember but mainly when we work with node we're almost always using express maybe always i i actually i can't recall a time when i've except for like very simple things i can't really recall it's him that i haven't used express with with node uh miss mistate says watching this for the first time can you briefly tell what you are doing um okay yeah so right now i was working on uh using node.js to do some custom routing so like basically when you're uh when you try to browse to a certain page on the website right a request gets sent to the server so we're using node to take that request break it down and say okay what data do i need to send back to the user right so we were just kind of making those routes we're coding in what needs to be done the goal is to make sure that the routes for this new website match up exactly with the routes that are currently exist on the old website it's a little bit tricky because there's not like a unified system that really makes sense so we keep having to adapt our router for all these different exceptions so if you check out the server.js file in the project it is quite large and the reason being that we we need to be able to adapt to all these different scenarios so that's like very very short explanation of what we're doing big daddy says hello world hello john says thanks i'd forgotten um you use next js here doing the pre-fetching by hand uh coding in javascript is a lot harder oh yeah for sure i'm i don't even want to attempt to try to do the pre-fetching by hand um nikki says hey everyone just reformatted pc how do i open a specific video in chrome again without the window dressing like url bar navigation icons and bookmarks um you mean like a youtube video so should be a little icon uh in the bottom right hand corner to be able to do that john hanson says if you could i know it's almost impossible now but to start all over would a blockchain database be easier to maintain and build on uh i wouldn't do blockchain for this uh the reason being for blockchain a lot of things that you do with blockchain um require is it has a cost right so like uh if you're doing like ethereum it has like a they call it a gas cost so like if i build it on the ethereum blockchain then certain interactions would cost the user ether to be able to do now on a site like this i'm i'm not sure i haven't even considered building just a regular website that wouldn't really have a lot of user interactions on uh blockchain so i hadn't really thought about it but that's a definitely a big consideration though is uh will this so number one consideration is how much is this going to cost users uh but number two is speed uh blockchain apps right now are almost always slower than their equivalents that are non-blockchain uh and the reason being like the calculations uh that need to be done on all the different nodes in the chain you have to verify transactions are by design hard they're very difficult to do so it takes a while so anyway uh yeah if we're going to do anything with blockchain then that has to be considered so there needs to be a really good reason of why do we need this to be decentralized on on the blockchain um you know what's the value to a user of this being decentralized so in with this type of website right now i don't really see that there would be any value added by doing things on a blockchain uh fortune auto says are the routes programmed and configured on the node side or client side with react router so we're not running react router uh but let's see how we do it so all the routes are configured on the server side um but we do have client-side routing happening as well okay and a lot of that's taken care of with next but what we need to do is tell our components what to render so we we do have to give some extra information to get that client-side routing working because we still need to grab data from uh from wordpress using graphql so graphql needs to know what post type do we need to get and it needs to know what is the slug what is the id for that post so even if we're going to do client-side routing we still need to supply that data so that data is supplied on the server side it's supplied to the router via the url and then we have an array that has key value pairs of the url being the key and then we specify okay what other data needs to be given to the router uh and used to do our graphql query uh on that's on the server side on the client side you know we have you know this on the left hand side is basically with our link components we pass in what data we need in addition to the normal url oh nikki said basically i used to watch these streams almost full screen video left chat right with the window options the video is so small also shows description video etc i'm not exactly sure what uh how to get it like full screen with the chat and everything like uh like you want nikki dragon hunter says where's the beard i shaved off the beard starting to get warmer out so i shaved it also my wife hates my beard so the problem now is when it gets a little bit of stubble like i have today uh my uh my three-year-old he complains that my my chin hurts him so when he's trying to cuddle with me my chin hurts so i probably should save the stubble off for uh he's gonna be so sad uh john says isn't the better part of blockchain is that it keeps integrity of information over time for university that may be somewhat important um yeah for sure so as i was explaining everything with the blockchain it did occur to me that you know potentially it might not be a bad idea to look into blockchain you know for data right uh you have this persistent immutable storage um that's untouchable you know by any regulatory agencies or anything like that so there's there's definitely an advantage i wouldn't i wouldn't want to let's say run a website straight from that data but to use it in some other capacity um yeah maybe maybe there'd be some value to that i guess i need to look into that more and think more about it but i mean i think you do have a good point there dragon hunter says looks very young without the beard yeah i i do end up looking a lot younger uh without my beard but uh especially because there are gray hairs in my beard but i don't have any gray uh on my head yet so definitely look look a lot older with a beard okay hmm let's uh i think i'm gonna end the stream here uh unless there's any other questions that are going to come in in the next minute or so um so i mean the stream's been going on for about an hour i don't really want to have to fight with this really slow machine i'll be back in the office tomorrow so be able to do a nice quality stream tomorrow and then uh i'll just i i really need to see i need to check out some prices to see if um if there's a reasonably priced pc that has an intel processor so that i can do the streaming like i was going to uh yeah i really hate to buy another computer just for that but that may end up being the only option uh that i have i certainly can't add ram to a macbook that they don't make it so that that can work um so i don't know maybe there's uh yeah unless there's some other option that i've never heard of then maybe that might be the best way to do it let's see uh this mistake says i'm not sure to pronounce that too so let me know if this is the wrong pronunciation but uh anyway they say where are you streaming from i mean which place right now i'm streaming from home uh so stream quality is not nearly as good as it it will be tomorrow when i stream from my office dragon just says assemble one from used parts yeah i i could try it i've done that before it is really fun it definitely takes a lot longer though uh so i just i kind of want to just get this going fast you know what i do have one other computer that's older and slower that but it still might be it might work i guess it's worth a shot before i buy another one i'd hate to use it though it's just um my kids use it it's like one of those all-in-one touch screens it was like one of the first all-in-one touch screens you could buy um i'll have to see what kind of processor that has it may not even be worth it it may just be too old though oh miss state says which country uh i'm from the united states i'm streaming from the from the us okay all right well thank you all for joining me uh sorry about the late notification uh i don't really have control over that but it does seem like if i schedule the stream earlier uh that doesn't happen as much also sorry about this the sluggishness of the machine i'm still working on that i'm definitely gonna try to find some solution to get a better stream quality i will be back in the office tomorrow so hopefully we'll have a nicer stream uh better quality and until then have a wonderful day