Nuxt js SSR Tutorial - Build and deploy a love quotes app ❤️

hello everybody and welcome to today's video today I just want to give this quick introduction to explain the video that I'm gonna make it's going to be a nut JSS is our application that I'm going to launch on Heroku now it's gonna just cover the basics of how to build and deploy your Knox jss or application and because it's Valentine's we're gonna make it a little bit Valentine's themed II but also I want to let the watches and the subscribers know that I'm working on a course that is going to be a few videos long the course is going to cover node Express MongoDB and ejs full stack application and it's gonna we're gonna pull the block and I really want to make these videos as explanatory as possible explain everything in detail to teach the beginners slash intermediate developer web developer how to build something on the full stack write your server-side code and obviously the HTML CSS templates I also just want to let you know that I'm giving this course for free and all the videos I make obviously is for free and the way you can support me to help me keep making these videos is to just leave a like or subscribe or share the video and if you really want to support me you can actually go to my page that I'm gonna link here and you can actually make a donation doesn't have to be a big donation anything I really appreciate every every but I get because I use that money to be able to make these videos so thank you to all this the current subscribers I know we're not a lot and I just wanted to show you my face so that you can actually see who you watching and I really appreciate every view and click that you guys give me so let's jump into the project [Music] so let's get started welcome to the project we'll just immediately jump into it I haven't prepared any code for this I'm going to write everything from the top of my head and if I get stuck a little bit I will probably edit out some parts but I also kind of want to do it that way so that you guys can see what the way that I develop and think process information as I go along so first things first you are gonna want to have node installed on your system so you can check if you do by typing node version and I have the latest release installed if you don't you can just go to noticed org in your browser and download the latest version install it on your computer or if you have Linux or Mac you can use node version manager to install that the reason I want to have the latest version is because it has a well a few a few versions before the latest version they have a thing called NP x so what MPX does it or what we're gonna use it for today is to just use a - a CLI - but only use it once to create a not Knox project so usually when we want to use a CLI - - we want to do something like NPM install and then say - G and then the tool we're going to use today is called create next app not nest next app and what this will do is it will install this come this create Knox app command on our computer computer globally and when we use it we can just type that in and specify our app name and then create the app but I don't really want that - to be installed globally so what you can do in that case is just use MPX and to create - next - app and then the app name and I'm gonna call it Valentine's quotes and just takes in the app a little bit what we have here is a fully server-side rendered app which has both a server exposed and the client in one file the cool thing about the SSR is that we don't really need to care about managing both these things because next sort of abstracts that for us we can just write plain JavaScript Knox good and follow the documentation without having to know how to manage our Express server or how to set up routes etc because Knox will do that out of the box it will be necessary to check out the documentation because there are things that you need to know like the difference between data and async data difference between fetch and data and the store and how to call code on the server side before rendering the client side and just how to think about it also we'll cover some of those topics as we build but the point of today's video is just is to show you how to get a quick app built out there and then just put it up on some hosting tool and today we will be using now to do that and I'll show you how to use now so let's get started so once we run the MPX create Knox tap come on we'll get a few questions the project's name you can decide that I'll just leave it as Valentine's quotes and just create a new description something like get cute or let's say get lovable quotes and I'm going to use Express but it isn't really that important to know if you want to use some sort of framework I know a lot about Express on how to use it so in case there is some sort of situation where I want to access the Express server then I can just go into that code so I'll be using Express and I don't want EPW a support for now I don't want a Linton formatter because it screams at you I have prettier in my code editor so I'll just use Axios to make the requests press ENTER and for this one we'll we won't use any any framework and we won't write any tests and we want to make sure that we render our application in Universal mode because this will allow us to take advantage of the server side so let me just install this and then we need to change our author name I'm gonna change that to my github username and I want to use NPM and let this install so before we get started with the code guys I just want to introduce you to this free API HTTP 5/q Escom slash api is the URL you'll visit just create a account it's really quick you just create a username and a password and everything is free this is just so that you can be authorized to get user details and certain types of favorite quotes etc so what we're gonna do with this API is we're gonna request some quotes from it and plug it into our application on the server side and then send it to our client and the endpoint we want to be looking at is the list quotes and that is slash API slash quotes and we want to add some parameters to the URL and I think the best approach would be to get the quotes from this endpoint and the filter should be love because this is Valentine's Day and type tag so it's gonna give us all the quotes that people created that has the tag love so let's maybe try that in the let me just see if I have oh yeah so let's just call that oh by the way after the application installed we have some commands to run but we'll get to that in a minute so I'm just going to clear the screen and I'm gonna call that URL that's over here so copy that and paste that in there and then we want to filter for love instead of funny because this is Valentine's Day so let's call that check the response and we don't have a token so that is because we have to generate an API token the way we're going to do that we'll go to our account I think it's at the bottom I did struggle to find this the first time so right at the bottom of the page it'll say my API keys and I'm going to expose this to you in the video but don't worry after the video was created I simply deleted the API key so it doesn't exist anymore these are this is my key I think to use it in the request we can check out the some of the endpoints so I found the parameters to put in there I'm going to click that that's my token and we'll to the end point which was HTTP slash slash I think it was 5 Q s and calm for slash API for slash quotes and then we add the filter parameter and we wanted to filter for love and we also wanted to make that type a tag so type equals tag and then what we want to do is we want to set a header parameter authorization so example this is how you would set a authorization token so let's go back and to space and then dash H capital and then single quotes and in the single quotes we'll do authorization and then we'll say : and then token with a capital T and then token equals with double with the double quotation marks and then add that token in there that I have done yeah so let's just cut that out let's just delete that not sure how to copy paste in the terminal always confusing between Linux and Windows and Mac so let's just add the token there I think I know I can just right click yes so this should or think authorize me to get these let's see what happens okay so the system cannot find the file specified error occurred while processing tag system cannot find file system the file name directive volume is syntax is incorrect so let's have a look at the syntax so this should be a formatting issue the code come on list at the head of first and instead of single quotes will do double quotes and we'll add the authorization exactly the same token with a capital T make sure the spelling is correct token equals and instead of adding those extra apostrophes I might just leave it without the quotation mark so let's find my API key again I left it in the it's Tanja and then just copy that let's select copy and in right click here so I'm just gonna leave it in the quotation marks like that with no good single quotes around the key and then after that I will I will put in the endpoint that we want to hit and what we want is the this one with the filter and the type so let's do filter equals let's copy that and then paste it here and instead of funny we want love so we'll do hello ve and then try that and there we go we've got a bunch of data so this is pretty much unreadable because we aren't formatting this JSON but in the application we'll have a better look at it so the response looks like it gives a object and it gives the number of the page that we are on with the quotes and it's tells us if we add the last page so this could be useful for something like recursion where we just keep adding pages until lost page equals true and then stop but the data that we want is this quotes and we can see a quote as an ID and we don't really care about this dialogue private okay tags is what we searched for so it should sort of have love in some some way but I can't really see it so we'll see the author is Sun Tzu and the body is treat your men as you would your own beloved sons and they will follow into the deepest Valley so that's sort of love related and I guess all of these will just be related to love like heaven has no rage like love to hate return nor how a fury like a woman scorned so I don't really understand what that means but it sounds cool so we'll use that so okay let's quit playing with this API and go into the code and start building our next application I'm going to clear my screen here and then I'll CD into the application that we created and I think I called it let's just do a a list there's gonna be a bunch of projects so the app was called Valentine's quotes so I'll just CD into Valentine's quotes and then clear this and use vs code to edit the code now that we in the project let me increase the screen size or font size for you so that it's easy to see that should be good and this is what the npx create Knox app generated for us it's a lot of folders and in the future I'll probably do a detailed video explaining what everything in this project does what it means where it comes from where it goes but today we're just gonna build the app and launch it I mean hosted and just do remember that I have that project coming out on full stack web development so that's gonna be like the foundation of your full stack knowledge and once you know that most of these things would make sense because you just really need to know the basics or the foundation and then you have the tools to go out and you know teach yourself how to learn frameworks and libraries because those things pop up all the time and even experienced developers will not know exactly what's going on without playing with it for a while they do probably get it a little bit quicker but they they also don't just know it right off the bat so first of all let's have a look at the package JSON JSON what we have is a few scripts we have dev bold start generate and each of these creates a sort of a different environment and also allows us to do different things if we run npm run dev will start a development server and it's gonna use node 1 and it's gonna do the server file so if we have a look at the server file that is a basic Express app and the Express app what it does is it brings in next it brings in this console package which basically just helps make it the terminal look a bit prettier and then we bring in the config of the next application so that we can build that on the server side and then we'll create a new next with that config which is just using the Knox constructor to build in a new next application and that we then we set some local host ports or it's saying either use the hosts that we on the server or use local host and the port is either the port the server provides or the local host port or you can set this to whatever you like 3000 seems to be ok it seems to be the standard and then we just equal that to the Knox dot option but server so this is sort of destructuring the rockstar options and then all these things they just we build a new Knox application and then we render that in the middle way of Express and then we serve that to the client so every single page that we create here will automatically create a new next route so if we create a index of view then the route that we will be listening on would be the slash route if we create a home page the route will be listening on would be slash home etc so they they configure that for us out of the box and we really don't need to touch the server code unless we need to do special things so let's just jump into creating the basic pages that we're going to need and start coding be server and client side logic so I'll just get started with the home route I'll close down this sidewalk and in the home route we have all these all this boilerplate and I'm just going to remove that just to have the section and for now we'll just say hello world so that we have something to look at and I'll also remove all the default styles I'll just remove everything in here and we can probably remove the cell style tags from now move that and we don't need this logo component to be imported and you can remove that and we can remove this class for now so let's save that and let's go look at this route so long we'll open up the integrated terminal clear it out and we'll do NPM run development so that we can view this on a development server so it's gonna use node one startup that Express server both the next application and then generate all those routes for us so the service listening on localhost 3000 and let's go look at it usually when I start prototyping I'll just open my browser window like this too and I usually have two screens as well to be able to see what's going on so let me just move this off for now and then make this screen go to the left side just find a spot where I can grab it there we go and then increase it a little bit so that you can see what's going on we can close this down for now increase it to about there and then slam this one on this side so that's sort of also like a mobile-first first approach where if we design for mobile first we can tweak the the desktop size off to it so let's go to localhost 3000 and we'll see our hello world app it's just the basic wrap but how we know that this is being generated on the server side is that we can inspect the source and then if we skip through all the CSS we'll see that this section of this HTML over here is being rendered in the Dom and it's not being programmatically inserted by the next application so the we can also see here that server ended equals true and data server end it equals true so this is being rendered on our local server once we ask this up to now the server will first generate the HTML CSS JavaScript sort of compress all that and minify it and then send it to the client and then we can have things like SEO and we we know what's on the page so crawlers can index our pages and there's so many benefits to SSR apps that it's just a useful tool to have in your belt so let's just get this UI on the front end to be a little bit prettier and for that I'll just create a nav and in the nav we'll have a a tag and it will just go to /home and it will call it Valentine's let's call it that a quote and we can also just for sake of yeah we will just leave it like that and style this nav for so we have this a tag now so now we need to add the styles just to make it look a little bit better and we actually want to style the entire nav so what's the student have and we'll do position:fixed because we want to keep it at on top and we'll say top 0 right 0 left here and then next up we want to give it a bit of a height let's just do 56 pixels save that and we want to maybe give it a background Valentine's themed background and usually Valentine's would be red but maybe not that shockingly red we can go for maybe this kind of red and we can set a box shadow at the bottom I'll do I think it's XY spread so let's do X 0 and then Y i-i think we'll do one pixel and then we'll do a three pixel spread and we'll make that then the color would be pink let's see what that looks like okay looks looks alright now we just need to style the link so let's just do nav a and we'll say color white and we'll save that for now let's remove the line from the text so we'll do text decoration and we'll say none and we'll also just send to that text line because we don't really have anything in our menu bar so we can just put it in the center and then so that we can instead of using text-align:center actually because now we sort of display a position fix the nav bar so let's do give it a display flex so that we can align the items inside so the display flicks and then the a tag in the nav will be able to be Flexer we can do flicks now we can do align items to align it vertically let's just do line items and then Center and then we also want to do justify self oh wait we can actually let's remove this from here because we will have to use self way let's just use it on the parent itself so let's do paste and justify content and we'll do sin to here as well I'd say that so that's nice in the middle and I kind of want to change the size of the font so let's just do font size and we'll do one point two p.m. save that it's a bit small stall is to five okay that's fine and then we'll give it a different let's just first change the font it's now the font is actually fine let's do a different stroke so let's just do font weight and then - I think it's lighter that and that looks that looks okay we could probably find some cursive font and just do it like that but that's fine and to be able to actually route to use the e Bolton route instead of a we can use Knox bolt in both in link link called next link and instead of H riff that would be too so this wouldn't refresh the browser completely and it will keep our store intact etc so let's just do Knox link on this side as well save that and it will still look the same because in the end this this renders an a tag but it has special properties to it so you'll see that this is still in a tag and it has Knox link exact active and luxe Knox link active and this is so that we can style it once we are on that page or have been on that page etc so I've just quickly pulled a an image from the internet that we can add on this landing page and I saved it in the static folder the reason I did that is because next whatever isn't a static folder it just becomes appended to the URL so if we want to access this valu quote dot JPEG we can just go slash Bala quote dot JPEG let's just see if the okay so it's Valley quote with a capital and then if we access that we should see the image and I chose this one because it's kind of a heart with the binary data so we'll just put that on the landing page over here so let's do a below the nav will do a main section and in the main section we'll have an image and we'll have before I go on with that we'll have a before the image actually we'll have a lead h1 lead and then below the image will have a button and let's just wrap all of this in a div so that we can stall them as a group and then do that save that and then for the sauce we want to do Ford / Valley quote JPEG and we want to say so that screen readers have access to it we can do I'm just gonna create a close this down and create line breaks here and do a Valentine's heart with binary data so that those that are less fortunate than us can actually understand what's going on on the page and then that'll be huge at the moment because it is a massive image and I do recommend compressing your images when you upload stuff to your server encasing them so let's just set a width for now we want it to be about 80% of the screen width and then the height would be managed as an automatic value say that okay that's good and that button is pretty small now so let's just add some text get random love quote save that and then what we want to do is style all of these so that it looks a little bit better so we're gonna access the main and give it a max height of now go to a min height of calculation and then that'll be 100 view high - the 56 pixel navbar and then to send to those that do will just do display flex as always and will align items to the center and we will not justify the content but to a lot yeah let's say that see what's up okay so now it's in the center and to justify content will sync to that as well save that and this should out we have the terms now so let's remove that and then two main dev so that we can style these separately and we'll do a let's just do a margin of zero Otto and give it a width or we can give it a flex basis because it's in the Flex item give it a flick spaces of let's say nine ninety percent and then save that this is the line it will text align yeah that's fine so the reason the Flex basis and the margin:0 auto might not work is because the items inside will all need to be margin:0 authored and I could use display flex on that as well but it's not necessary for because there's only three images or three items and they will always be in the middle of the page so let's just style the items in there a little bit if the h1 some styles first of all increase the font size will do a 3-game and we'll do a I don't like these bold fonts let's just do a font weight and then writer save that just looks a little bit better to me and instead of lead let's just change the text with spoil your loved one with a random violent oh that's a random quote like that is the best Valentine's gift you could give someone but oh wow and for that we'll have to do so this is probably already text-align:center so that'll be fine we can to make sure we can do text because it probably is inheriting but will do text-align:center to see what happens okay that so it isn't everything and that's fine but I do want to create some spacing so we can do margin top and bottom of maybe let's say 10 pixels left and right of place to 0 say that maybe a little bit more let's do 20 and it looks fine and then we could target the image looks it looks fine I think we'll leave it like that we could probably use some sort of crop or radius or something to make it a little bit rounder so maybe let's give it a rounder edges mayn't of an image and then we'll do we'll do a border radius and the border radius will be just a little bit of rounding so that let's do maybe a little bit more 10 pixels and then we can maybe give it a shadow just to give it a life animated a little bit and we can say box shadow 1 pixel 1 pixel 3 pixel and we'll do our GPA and 0 0 0 and 0.3 so what this does it's it's red green blue and alpha so all black and then give it a bit of transparency save that and you'll see it has picked up from the screen just a little bit not too much to make your eyes bleed but enough so that it stands out from the page and it's the same with the nav 4 there's just a little bit of a pink shadow to make it seem 3d and finally we want to style the button so let's do the main and then we'll do dev and button and we want to give it a background of let's give it the same rate as the now policy if it stands out see if there's some contrast okay still looks ugly we'll remove the border:0 and we'll give it a lot of padding let's do 1.5 mm okay and we need the color to be visible black on red does not work always save that and we want the font size to increase as well so let's do font size 1.3 m then the padding can go down a little bit okay so we want to create a margin on this as well will do margin top and we'll make it the same amount I think it was 15 pixels or 20 yeah was 20 pixels just to keep that consistency we'll do 20 pixels again so everything is kind of evenly spaced and we'll do the same and to make it seem a little bit more animated we'll do some hover styles so let's just do this ctrl C and then V and then on hover well we wanted to sort of scale and I mean so we have to say transform what I wanted to do is grow a little bit so I'm gonna say scale and the current scale plus 0.15 and then I think 0.15 is just the amount I always use because point one sometimes feels a little bit too much and then we can also do a cursor J make the cursor change a little bit so that it actually looks like a link save that so now you can see the button grows and it kind of animates and makes it click with us but it's a little bit too fast so let's do a I think we need to set the transition on the before the item so we'll do transition and we'll listen for scale and we want to do that over I think let's do well let's just transition all and we'll do that over 500 milliseconds and then we want to do ease in out save that see if that looks a bit better yeah that looks a bit better it it's too big in my opinion still should just be a little bit of a transform so the text is blurring when that happens and I don't know if I like that so let's just make it quicker so that the text doesn't seem to blur that long okay so that looks a bit better and then when we click that what we want to do is we want to first when the page gets generated we want to insert all that all those quotes into our store so that we only need to make that request once on the server side inject it into the store send it to the client side so that we have all that data and now we can just play around with the data we can get a random quote and then go to a new page with something like the quote ID and then the ID would be sort of a dynamic ID so it doesn't matter what ID we go to we'll render a page but based on that ID will fetch a specific quote out of our store so random quote we can just generate a random ID or find any quote in the store and just plug that ID in so let's jump into doing that the first piece of logic that I want to create is actually just first instantiate the store and noxious seems to have changed the way the store creates so apparently we can just export state and export mutations and Gators and stuff like that and if you don't know what that is I suggest you go read up on View ex plus next but I'm gonna test it I don't know if it fits true but let's just test it I think the syntax is export Const and we'll do state and the state is just all the data that we want to keep by name and state would be equal to a function that returns an object and this object will have different properties so we'll say that we have a quotes property and for now it will just be oh but to return an array I mean an object with arrow function we have to do this and then then we can do this and then the quotes would be an array and we'll just set some dummy data for now ID body quote of the day and then the also maybe I don't know what the object looks like wolf will inspect that with Axios so the author would be John Snow and then let me just wrap all of this oops that's a bit too small let me wrap it with what is the come on I think it's I changed it yeah alt 0 so the the command to wrap your code is usually Alt + Z but I changed it to alternate 0 and then save that oh this objects so we don't need that and then we want to export the Gators as well and the Gators would be equal to an upper normal object and we would say that we want the quotes and the quotes is equal to a function that takes state as a parameter and then it will return state dot quotes so this is just a way for us to get upwards without having to mute to play with the state directly so then we want to be able to mutate state and I guess we can just sit let's just test this out for now let's see if it works before we write too much code let's save that and then go to our home page index dot view and minimize that and we'll sort of let's go to export default and will import the Axios library Axios from Axios and then we can do mounted so when this app is mounted we want to and this has to be a function when this app is mounted we want to console dot log the start state just to see if it has been created and we have to add that dollar sign let's just log the state save that and reload inspect and look at the console undefined so it doesn't look like our state is being generated maybe we need to restart the server because maybe the hot reload didn't pick up so let's just test that before diving into the docks to find out how to actually set State so to restart I'm just gonna do yes clear npm run Dave let's have a look at this there is an issue with our getters but because we didn't get those logs before it seems that the state wasn't um then it wasn't instantiated so let's go to this and this shouldn't be an equal sign there should be a colon because this is an object save that and let's see if we have any errors and it compiled successfully reload this and we still get undefined so it would seem that let's just check the next object and inspect that you could download the view dev tools but I don't have it at the moment so we do have store I guess maybe oh yes we're not supposed to look for the state we supposed to look for the store and I was doing this dot state sorry so let's do the store and then you can do dot state and save that and then we could look at the console and reload the page and then we have it stored out state and we have our quotes which is author body ID awesome so now what we want to do is we want to pre properly pre populate our store from our server side so that we have access to it in the client and have it be have it rain before the page loads this will allow us to do stuff like if we want to create the title of the page to be the quote we can because the quote actually exists when the page has been created but if we do it with the normal view library what happens is we usually create this data as the page loads and the problem with that is that the data isn't available at the start of the load so let's pre populate the store so I just want to make a few changes before I do that I want to change this to a Knox link because I want to preserve the state as we go to the next page and not have to reload the entire project we can save that and just give it a clause and we can call this the quote BTN and instead of targeting the button now we can do dot quote BTN save that styling should look the same let's have a look at this oh the two should be equal to four slash well and then four slash underscore ID and then to have that work or we can just do /id we don't need a quote page we can do a forward slash ID well let's actually do a quote page just for the sake of displaying the quotes quotes for slash ID and then we'll have to create that page and the way we create pages is by creating folders so we do quotes and then in the quotes we'll give it the actual index dot view so this is what will render when we hit quotes and let's just do a scaffold of h1 hello save that and seems to be that the button what is going on here so this break looks a little bit horrible I think it's because a tags rained in line but let's add a line break here save that there we go and I actually like this design a little bit having it overlap like that it looks looks modern so I think I'm going to leave it like that I just might remove that text decoration so we'll do the quote button and we don't have button here so we have to do dot quote button save that let's see when we hover refresh this doesn't seem to be hovering anyhow that's fine we'll we'll leave it like that and then it could be that the scale is still no okay well good bye with that because it's a link I mean a tag pretty sure it'll still be a clickable item so let's let's leave the entire scale thing because debugging is not part of this video let's do text decoration to remove that underline we'll say none save that and yeah that looks pretty good it looks a bit better in my opinion with overlapping so what we want to do next is what we were actually going to do is to populate the store so there are a few ways we could do that the first one is to populate the store when a specific page renders or we could populate the store when the server initializes so in the store itself so I think the way we'll do it is that method by populating as it renders so we'll do a few things we need to make mutation to be able to mutate the state and mutations will let's do set quotes and this is just standard to make it a cap of capitalized and with what you call that I think it's snake case and then this will take two this will take the state and this will take the payload and the payload what we want to do is do state a state thought we wanted quotes and then we want to set that equal to the payload so we we have to make sure that the payload we send here is a an array that has almost that type of structure so that we can loop over it in our quotes page so let's say that and then the way will populate the store is by doing export Const and then go to actions and the actions will equal sum functions and the first function we want is or the this is a reserved action you can name your actions what you want but unless you use this one and this one will be an asynchronous action and we'll call it next server in it and this runs when the server initializes so we can populate the store and send the data through so we can do knocks over in it and then that so we do need the Axios library and I believe when I looked at the store when I looked at it's just three of us out when I looked at next the Axios is part of the store so we can just do I believe we can in in the store itself we can do access so we can do this dot access because we are in the store and I believe Axios is available so let's try that save our request we want to say the response from the request would be equal to this dot dollar sign Axios dollar sign get and then we pass in our request URL and I believe that should be in my terminal let's just go back and find that so because I closed down my terminal I lost the history I should probably set that but I guess we can just get it again what we want is we want my key which I will revoke so won't really help if you try and use this let's just close this down and then right at the top we'll just say Const API URL just to make this available to everyone equals string space the key for now back and look at the I think it was just quotes yes and then we used this one so we will need to set a header on this I'll have to go look at the documentation on how to set the headers but let's just say that URL for now we'll have to separate these two Const API key or equals this so let's select this thing well remove that and paste that in there so now we have the URL and we have the key and we want to make a request so let's look at how to do that with Axios and this would be a good time to explore NOx so let's do next Axios get hitters and set it is not working get response' this is all issues we want to look at the options in the Axios module on Axios dot Knox j s dot org so this is the base URL we could set in the Knox config we have all these options we could set up proxy and let's find something what's this proxy here is proxy it is ignore usage so I'm exploring the github page now and the only thing if i do a control f5 headers is in this options with the post so I believe we probably should be able to set headers as options to the get request as well so let's do Axios dot git and then we want to use the API URL and then we want to set some options and these options would be it is and the errors would be an object and the type of error we want to set is what we have on 5q s and we will set the up on top authorization will set this header copy and this has to be in quotation marks and then we'll set the value to this entire thing token would equal the API key and this will also have to be let's do tactics and then do this as a literal and erase that go back in there API key equals that so let's just see if this can fit okay so the headers would be authorization token token equals API key and we'll get the response from that so let's say we have to await that as well because this is an asynchronous action will do await that to get the e response and then we'll do the data let's do Const theta would equal the response usually it's in the dot data and we want the quotes field save that and then let's just console dot log the data see you what's up so Knox Standards is not to add semicolons but I'm so used to it so let's just put that up there and put that down there and then save that and we can now reload the page and inspect our terminal in here see what happens cannot read property quotes of undefined so our response might be wrong or we might be accessing the wrong property so let's just try again let's see what let's just cancel that lock the response for now see what we get maybe we get an error unauthorized or something like that let's refresh and we get a actually we do get all of the quotes so the object would look like let's just go down here should probably do this in postman to have a better rendering of this stuff but it's fine we'll we'll be quick so what we got back is the response and I think we still are we logging anything else no okay so the response has should have it no that's the old thing so here we go we have responses page one and then quotes so it's just response codes I don't think it's responsible dated codes so let's just do this and instead of data we'll make it a little clearer will say quotes and we'll say response dot quotes save that and refresh see what's up so now we're logging it on the server side first and I believe which we inspect we should oh we haven't said it yet but let's do that to see what that's like but we get all the quotes so the things we're interested in the quotes or the ID we're interested in maybe the we don't really need the URL and we just need the ID the author and the body I think that that'll be enough so let's set the let's just set the entire objects or the entire thing in the quotes and then we'll post that in the index file itself in the quotes folder so the way we'll set that is we will have to commit this mutation to stay so in order to commit we'll have to bring in commit from the context and we'll say commit and then the name we want to commit is that set quotes mutation and we want to send it the payload that would be the quotes and then we could save that and so now stated quotes should equal payload and we should have it available but instead of looking at it in the in the console let's just render it on our quotes page for now so let's go to quotes that's it we'll probably look ugly for now but it's fine we'll do a let's just do a section it's to wrap everything in one element we'll do our UL and then an ally and then each Ally will be let's first make it a quote and then save that so what we want to do is when this component renders we want to set a computed property and we could use view X map getters but we only really need to get one thing so we could just say computed needs to be that and we could say quotes what we want to do is we want to access this dot store so we want to return this start store dot getters and together we want to use is the quotes Gator so we could also say dot quotes but I I kind of like the list syntax because if you have name spacing you'll do you'll do something like the name space and then the Gator but for now we'll do just the what is called quotes all the quotes save that and then in here we want to loop this so we'll save e4e quote in quotes and will say the key and we need to make that bind it and the key should be the quote dot ID so there should be a what I call it like a unique key for everything otherwise we'll get an error but we'll see what happens let's save that and instead of rendering with quote we want to render the quote dot body so let's just wrap that again so that we can see what's going on and save that and then try to access quotes let's go to slash quotes so what's happening now is the service making the request it's populating the store and it hasn't rained it anything so let's look at the store and in the store we'll see they will see the Kittles and we have quotes and it's undefined so this should not be undefined we need to go back and check that out so get those quotes we'll take the state and it's a function and it will return state quotes we have a look at the state will see that stated quote is undefined so something is not being set correctly so let's have a look so set quotes with the payload the payload would be the quotes we receive from responsive quotes and we await that so we should maybe see what this is console dot log T quotes see what's going on there open the server-side reload this making the request and we get undefined this time because I have misspelled quotes great so let's save that and reload and there we go we have all the random quotes that we wanted I've dealt with many crises in my life but few will ever happen it's so crowded nobody goes there 90% of the game so this doesn't seem like the love quotes that we requested and that's because we have funny so let's just do love save that and reload the page takes a while to populate the store and there we go the older you get the fewer things you really love where there is love there is life so it does seem like they do have HTML in some of these sometimes like this break tag over here so just to incorporate or to check for that we can dangerously plug in that HTML but this isn't always a good idea because this could if you get your code from an untrusted API I'm pretty sure of you does some parsing and stuff but we should always be careful when setting HTML so instead of doing this we can say that the V HTML should equal and we need to bind that oh no we don't when you say V HTM I should be the quote dot body and save that so we don't have to put anything in you now and I don't know if we can do self closing tags in view and oh that's sort of recommended in react so let's try that refresh populate the store get the quotes and now we have a line breaker so it's better to have loved and lost than never to have loved at all there is a fountain of youth it's in your mind talents the creativity bring to life and the lives of people you love when you learn to tap the source you will truly have defeated age and then one last one even though I love soul and love wind like most people do I like the renewable sources they alone are not going to get him okay so I just read that in some sort of love voice but just because I had love in there doesn't mean it was sort of this guy really loves his renewable resources so yeah blew it let's do the ID page so before we do that let's just give this page and a little bit of stars instead of a self-closing Ally will make an actual ally and then we'll add an a tag in there and this a tag should actually be a Knox link to be able to go to that quote and then Knox link yeah and then instead of href we want let me just close this down we want the to property and we want to go to two slash quotes and then what we want to do here is do some it's just do backticks maybe this will work and then instead of quotes we want to do we can do backticks let's just do thee do this do this and then we can do single ticks and then plus oh wait what we can do is actually set it to a dynamic property sorry I always get confused with all these ticks and tactics and post reviews and stuff so let's do now we can do single ticks and we want to go to slash quotes and slash and then we want to go we want to add plus the quote ID so at the moment when we go to the slash page where do I yeah so when we go to the quotes don't have an ID so let's create that quickly so we need to we have to save this folders under school ID to make it dynamic and new just index dot view again so in this dynamic folder I'll create a view template and for now I'll just say h1 I'm a quote so what this does is doesn't matter what we append to this here we'll get the I am a quote page so we can do any single I mean any any you can even do numbers I don't think that thought is valid yes but okay so we can do numbers or whatever so what we want to do is we want to send in the quote ID with the URL and then when we do that we want to fetch the that specific quote ID from the store and show all its details over here so what we'll do is we're gonna first of all we sending it to the we don't need to log the store out state anymore so we can just can actually remove this entire now we'll just remove this to keep it a component and we don't have to import Axios here so say that and then for the quote page what we do is when we click Knox link two quotes plus quote that ID we get that ID from this quote that we generate in the loop so to be able to go to that so when we go back to the quotes and if we click on any of these quotes they should take us to the to the specific ID on top year so if we click there has this as the set itself yet let's inspect so we have an error the client sign rendered virtual Dom is not matching the server so let's refresh this but we have we have the parent okay so it's that it's the innerhtml thing that we're doing so let's just leave it as we can actually just move this maybe to the Knox link content so let's X this out maybe that's what's going on because we were rendering the Knox link and now we sort of replaced it with a quote body so let's see what happens if we do that okay so now we get the links and if we inspect reload there is no conflict from the server and the client side so let's click on one of these it should generate an ID on there and we go to four to three at the moment it's just showing I'm a quote because we're not finding that in the store but if we go back we have a for every quote we have an ID so let's refresh that and now in the ID page we can find that quote again and render it because this data is being sent from the server side we now can use it to do with JavaScript populate this so if we in so let's just write that code first and then I'll explain so let's create a div with the ID of quote cord and then we'll have a title so let's just do an h1 and then the title will be in there and then below that we'll have the author so we'll do a P tag author and below that we'll have an H are two separate stuff a little bit have another P tag and have the body so what we want to do is when this page gets created we want to access the router parameters and see what that number is and then we want to go to the store and fetch that so let's do this by we can do let's see if we can access the router so we'll do mount it and as soon as this is mounted so when we start or mount the page we want to get the route want to match it to the store and get that specific ID from the store so let's do Const let's do per M equals this dot dot assign route dot params and because we name this file folder ID the per am will be an ID so we'll do ID and then we want to find the store item that matches that ID so first we want to make sure okay let's just find that item we can do Const store or let's just say post maybe quote equals this dot store and then what we want to do is fold to that so we can do this not stored oh let's just find the quotes first so let's when we create this computed property so we do computed so that we have the quotes here and go to quotes and then we'll return this dot store dot getters and we want the quotes so that will come from the store computed is a object not a function and then we'll return that so now that we have this dot quotes we can say that this dot quotes so let's just send the current quote on quote equals the start quotes and then what we want to do is find the index of that quote and because this is an array of objects we'll have to access a property on an object and a cool way to do this is either by filtering filter with the you know JavaScript dot filter and what that does is it filters things out of an array but instead of that I'm going to do this dot quotes that find index so we'll find the index and then so we'll have to go at the index where the index is equal so I'll explain this as I as I go so we'll do this stock quotes at the index where this dot quotes dot find index and then what we want to do is set the it takes a function so at the moment we are looking at our quotes array and we want to find the index where this dot quotes so we finding the index in there where something equals something so we're gonna say X just to give it a random parameter and X is the current quote that is being looked at and then we want to say the X dot ID should be equal to the parameter n-- the that will return the quote so let's consult that log that quote and see if that worked save that and let's go to the page and what we should do now is visit quote okay so we get the we get the markup we expect that we should okay so we get undefined which means we aren't getting the quote that we need let's see if the quotes exists let's just say console dot log quotes I mean this dot quotes and will comment this out for now say that reload page inspect and we do have the quotes it is in our store so that is a good thing so it must be our quote logic that we have going on here so let's just see if program exists because I might have screwed up that logic as well spec that so we do have the parameters correct and is the type do that supposed to have an ID yes the type is a number I think the per am is a string and that might be why it's not working because we used let's wrap this with alt 0 not ctrl 0 so we use triple equals and x dot ID is a number and program is a string so we could either do two string or we can do parse int so I'm gonna use two string X dot ID dot two string is equal to per am and this is just a line break it's not space or anything because I'm wrapping the code and now we can console.log that quote let's just leave that delete that save reload inspect and we should get a quote and there we go we do have it we have the author we have the body the dialogue downloads uploads whatever all those things but what we really care about is the author the body and we already use the ID so we just really want the author in the body so what we'll do is we'll move this from the mounted to be computed so all we have to do is delete that and then we'll say let's just create another one well we actually don't need to because we don't need to have yeah let's just do that just to be a bit more separated in our curve what have I done okay so quotes and then we want the single quote as well and that will be a function and we need a comma and for the single quote we'll do all this stuff and the pram is correct the route the quote would be the quotes add this out so this dot quotes would be this quotes and then what instead of consulted logging the quote we want to return the quote to our component and then we want to use that we want to say instead of title we want to use the quote dot so there isn't really a title we could use let's just use author and body so let's do X that out and we can do author and for the body we can do quote dot body save that and there we have it so if we go back every quote we visit now will have the specific quotes author and will have the body so let's just maybe style these two pages just a little bit not too much but just to have something to look at let's say that and just have a look at it if we reload this page what happens is the Knox server in it populates the store and the store populates the page so this is actually server-side rendered if we view the source skip all the CSS and stuff we this is all the quote so the entire stores quotes is being plugged into the page so this might be an issue if you are if you care about the size I mean if there's millions of quotes you don't really want to do this in that case you might want to check if the API has a limit so you can say fetch one or two or three or you can save your you can create your own API that it's just the amount of coaching it by ID but this is looks like a lot of tics but it's not really that much but the thing that we want to see is that this has been statically rendered by the server and it's oversee train it true and we actually have the text inside of the items the P tag where is the love all those or actually statically rendered into the page so when crawlers index this page you'll see oh this is a title and we can actually use that in the head as well and so let's just demonstrate that maybe with the ID instead of a PI computed we can do ed and it is a function that would return an object and then we'll do title so this sets the head made like the meta properties in it so let's just do this dot quote dot author and then let's do a let's do something like plus plus and then we'll do we'll do this and we'll add a pipe and we'll say hey plus let's start quote dot body not to make it too long we'll do substring we'll start from zero and we'll make it about 25 characters long and say that we could make this the description of the page as well but let's save that close that down refresh the page and you could see it's making the title that so let's add some space here save that and if we look at the page source if we go to the head will see that the title is actually statically generated by the server so let's close that and look at the new one we have to reload this and there it is Matt McGorry where there is love there dot we could add a dot dot dot day to make it plus dot o inspect or not expect we need the source title whether is love there is refresh this page first to get it from the server SPECT yeah mike mahoney where there is love there dot dot so that is that is the power of it is all we can actually sit our SEO and stuff like that so let's maybe add not a lot but just a few stars here let's do what do we have up here we have the quote card let's edge tag quote card and we want to do the width should be 70% the border one pixel that let's do zero point five pixels solid and gray and then we add a box shadow of one pixel one pixel three pixels orgy PA and we'll set that alpha value again say that and now we have that so let's do a bit of padding and we'll do 1.5 m and we'll set that in the center so we'll do margin:0 auto and we'll set some actually let's do margin 1.5 mm and then auto so now we have a nice little quote and we could do something like share this quote with someone so let's have a look at what's up maybe what's up share number I think they have a URL know how to say my number so we have what shei buttons if this is gonna take too long I'm not going to do it but it's worth having a quick look so now maybe you can send this to your to your lover looks like we need meta tags and all that but I'm pretty sure they just have like a mobile link wait the URL has a parameter that equals the number or something like that and then you can send it but whatever so you can just copy and paste this link and send it to your to your lover and you'll get this Mahatma Gandhi quote and let's do the same styles for the quotes on the on the page here we'll do style paste that and we can do actually the exact same thing save that and indent that and we want to repeat this thing so we can do efore equals quote in quotes and we want to do the key equals the quote that ID and we also want to make sure they spaced and make this clickable so this entire term should be clickable so we'll do ad click we'll use the router for this will do dollar sign router dot push so this will just push it into the router and we want to go to quotes and we want to paint that ID so quote dot ID so let's see if that works save go back to quotes and there we have all our quotes looks nice and neat we even have a Charlie Sheen quote I think my passion is misrepresented as anger sometimes and I don't think people are ready for the message that I'm delivering I'm delivering with a sense of violent love probably keep your love soft and nurtured and kind and then we had an error they because the quotes was I didn't add this let's refresh that so now when we click on any of these cards we should go to that specific quote so not very useful when you think about it because we already have all the quotes here but it does display the the usage of the nach stasis all so now to the final step of this is to close this up to host this up there's a few steps that we have to do first of all we could set some settings in our next config that allows us to use bold say things so we could use both directory to change where we built this to and we can change where the static assets gets both to in case we want to serve it with a cache or something like that but I'm gonna leave that for you to go research just go to the Knox touch a stocks and look at the different bold methods and stuff today I'm just gonna do the basic bold and hosting so to build your application what you want to do is you want to let's just close this up on the side you want to go to your terminal kill this development operation clear that out and to build it the only thing you have to do is npm run bold and what this will do is it's going to compile all the code and make it so that you can host it up to the to the server or platform of your choice so this is a node.js application and you will need to use a service that allows you to run node servers on the on the platform two of my favorite is now and Heroku you could use Google cloud platform you could use pretty much anything you like but I am a you know a paid support off Heroku and I really love now for quick prototypes and hosting and you can actually pay them or even use their free the free system to host your small applications up until a certain amount of size and stuff so what you want to do to do that so what happened we generated these assets and they were generated in the stock next file we don't have to really touch anything in here if we have a get ignore we need to remove that because we need to so if you have if you push to a Roku you will need to remove your dot Knox from your get ignore because we need to push that to Heroku and Heroku will need the next doesn't need the node modules because it will pull the node modules itself but it will it will need the the Knox and I think now we'll probably pull up the node modules as well so let's just be safe and remove the dot Knox from this file it should be yeah this is commented out for now and if you push this up to your get up you would want to get ignore that and your node modules to not make it a very big commit and if you have any environment variables like my API key you would want to enter that into so let's actually demonstrate how we would do that with now so let's create the InP file so we'll do in V and then what you're doing here is you'll just set your API key here equals and then go to the way that we do have that I think in the main page we have our request or now it's in the store let's go to the store index find our API key remove just the plain text not the quotation marks and paste that just like that API key equals that and what you have you'll need something to to process that so first of all will be processed or EMP underscore API key and we'll need to set this on our server side as well so this is just so that we can hide it from our github repository but we'll need a package to to read that locally so let's just do that quickly we need to run NPM install dot e and B and then in our Knox conflict or JSON we just want to say Const oh we just want to required we don't even need to give it a name we just require dot a and B and then we just say config just like that and this will allow us to use that process tour env in our files so it is installed will clear that out and look at our in V file that's fine and if we run this application now it should still work with this process tour in V API key so that Envy is commented out it won't be committed to your repository your key will be safe another thing is that if we host it on now so first of all let's go to now now Sh I think it's site I think I think it's this one site code now and then what you want to do is you want to login with your kit up or anything like that and have your account created but you can also download the now command line tool by saying NPM I dash G now and when you do that it's gonna install now globally on your computer so I already have it and first of all I'm just gonna log out to show you how to authenticate on your computer and blocked out now and to check with you or you can say now Who am I and blah blah blah author is invalid no token so we need to login the way we do that is say now and then login after you've created your account on now and you say login into your email I'm gonna blank this out but I'll enter my email yeah and then enter and then what it does is it will send you an email to your email address and then you have to go to your email to confirm that so I'm gonna quickly do that so now I have confirmed my email address and if you say now Who am I you should have your email address show up there but now that you have that you can simply do a command called now so we you have to be in the repository where you are and every single one of these files need to be uploaded - now for the server to run so what we need to do is we just say now and we don't need to specify anything because we are in the same in the same folder that we want to upload so let's just do now and enter the project is missing another JSON file you are using an old version of now and deploying under my email using Valentine's quotes your deployment code logs will publicly as well once you subscribe to the OSS plan that's fine if you don't want that happen you need to get an account and then let's just proceed you can use now public to upgrade your plan and to skip this problem use and yeah okay cool so it's uploading all the files sync the files and using node is eight point eleven point three we have the link HTTP Valentine's quotes and that's our link it's building the page so now what it's doing is it's running that NPM runs thought and MPM run it will I believe it runs NPM runs thought as a as its default come on and what that does is it will set it into production mode and it will run server index dot JSP and we will have an error now as well because we never set our environment variable so we'll have to rebuild this in a moment while this is running you can actually have a look if you control click on the link that they give you you'll send you to the progress of your actual upload so at the moment its building and it should finish anytime soon so you can see now the whole process is running npm install to install all the dependencies and there's the logs from the install we're running knox bold to pull the application it's initialized the files are generated we are compiling everything is looking good so far waiting and it looks like the server is now listening on localhost on that machine and they will be porting that to the link so let's have a look at the link again go up and click on our link the loading might actually also fail because the server does not have because we're doing Knox in it server and probably let's have a look if we can see in the logs let's go can we go back so if we look at the logs will say request failed go for one which means not authorized because we don't have a key so let's quickly set that key as an environment variable let's clear this out and redo the process so when we have a look at the now docks we can see that we can send a or set a deployment secret by saying now secret add we can do API we'll just do it a lowercase API - key and this will equal to our environment variable API key copy that and paste that in there so now it creates the secret but the secret isn't the environment variable we can just use the secret so we can do that so it should set that secret on our account success secret API key added on my account and now what we want to do is deploy with the environment variable so what you can do is now and then - II will add an environment variable and we want to make sure we use API underscore key because that's what we use in our code and we have to say that I think equals to the we can use at so we've saved our secret we can use at API key we don't have to type our secret again so now II API key equals the API key and let's do that let's see what happens deploying using a project yes please should go quicker I think they do cash online they just check what changed but we'll have a look at it let's open this link to see the poll process so it is listening on localhost 3000 which means that we should be able to access the URL now oh that's the old link we have a new link now so let's remove that and enter again and our image is being rendered if we view page source we have all our static content in there being server-side rendered if we get a random quote we should have a list now it might take a little bit longer it takes us to quote ID so we don't really want that we want quotes inter so we could fix that on the client-side but I'm not gonna do that for now then we have all our codes being sent by the server if we inspect we can see them we can actually view page source we can see them being statically added and if we click on one of them it should take us to the quote itself so that's very cool the only bug we have is that if we click this it goes to slash ID because I made a mistake with the both but I'm not gonna re-upload that because of that now yeah so I really hope you guys enjoyed this tutorial that is just a quick rundown on noxious SSR and how to host it with now and nice little Valentine's app I really hope you enjoyed it and that you will leave a like if you want to and maybe share this video or subscribe if you do feel like supporting the channel you can go to my website Kaizen media dot 0.04 / donate and leave a tip if you have to if you do decide to do it it has to be around USD number and it will convert to South African Rand but not necessary by liking or subscribing you to support the channel more than enough and I really appreciate that so I hope you guys have a wonderful Valentine's Day and I'll see you guys in the next video stay tuned for that course on full stack web development piece up [Music]

Channel: Kaizen Codes

Views: 8,128

Rating: 4.8251367 out of 5

Keywords: Nuxt js SSR Tutorial, Build And Host A Love Quotes App, Nuxt js SSR Tutorial - Build And Host A Love Quotes App, Build And Host A Nuxt js SSR Love Quotes App, Valentines quotes, love quotes, quotes app, biuld a quote app, quotes api app, free quotes api, nuxtjs, ssr, server side rendered, vuejs, nuxt, create-nuxt-app, web development course, tutorial, code a nuxt app, Nuxt.js, Vue, Vuex, Zeit, now.sh, host nuxt app, nuxt build firebase, firebase

Id: ICpXqoSHdQI

Length: 95min 42sec (5742 seconds)

Published: Thu Feb 14 2019