Nuxt commands and deployment so you can easily deploy your application

hey everyone let's take a look at the commands that are available to us for when we want to deploy your application using next on the differences between target server and target static so in our documentation we have a page commands and deployment and you will see we have four commands available to us we have dev build start and generate now the dev command you probably all know and that's to launch next in development mode with hot module replacement on localhost 3000 and you can run that using yarndev or npm rundiv now there's a list of commands available to us depending on the target and we have two targets target server and target static target server is when we want to host our application on node.js hosting such as heroku digitalocean etc and target static is when we want to host your application on hosting for static services such as netlify versal search azure static web apps github pages etc and the commands are a little bit different with target server we have the dev command the build command and the start command with target static we have the dev command the generate command and the start command let's have a look at the commands in action so i have in my nooks config target server now this is exactly the same as just having nothing because the default value is server so i'm going to leave it here but if you have nothing then you've basically got target server so i want to build my application for production so i'm going to use the command yarn build this will run my nux bill command and what it will do is it will do a production build bundling for server and client side using webpack with the target of server so as you can see now it's got all this webpack bundling has been done and it tells me it's ready to run nook start so i can run yarn start and what this will do is it will give me a production environment with the rendering server side the target server and i can then see my application on localhost 3000 but this is and i've just printed this out so we can see it with target server this is my application so i can you know check it out before i deploy it make sure it's okay and then once it's ready i can say yep great ready to deploy so what's going on in my folder structure here is that it's actually created a dot next folder now the dot nooks folder is what nooks uses to build the application and there's a lot of things going on in here such as let me just make this a little smaller the router js file is here for creating the roots there's a disk folder with a client and server bundles and some pages in here and you know we can look in this and it's basically what webpack is using to build up um that production environment that website it's ready to be built and that's what uh next is using to build that so we don't really have to understand what's going on in here we just have to know that it's there and that this is you this is rebuilt every single time so this is going to get built we can um delete this and it's not an issue it's not a problem because anytime we run that command uh yarn build it's going to be built again okay the same with the dev command it's going to be built with the dev command or with the yarn build command so you don't have to worry about it too much you just have to know that it's there and that's basically target server so let's have a look at target static and see the differences so if we put target static in our nooks config and then let's go over here and we'll stop this and we'll use the generate command let's just clear that to make it a bit cleaner so with the generate command it's a little bit different to build because we have generate but if you run the build command it's going to say ready to run yarn generate because the generate command actually builds your application first so it's going to build my application and as you can see the webpack bundling has gone on here now i never change my target in my index page so i can do that again uh i can do that very quickly and rebuild it so in my pages let's just quickly change this to target static there we go and we'll rebuild that again it'll only take a second and while that's doing that i'm just going to show you what was created so the disk folder is what gets created here and you'll see i've got no nooks folder anymore because i deleted it so the generate command bills the dist folder and you can see here it's doing um the webpack bundling here and you'll see with the target of static and you'll see down here then it generated an output directory of disk that's fantastic and it generated all these routes for me and i can still run yarn start to see a production environment with target static and we should now see there we go there's my target static that's been changed right i just changed that a second ago and you can see that that works perfect now what's going on in my disk folder so in my disk folder i have a folder with a name for every single mountain i've got a mountains page if i look in here i'm just going to move this over a little bit you can see i have static content with all this text right so different to the nooks folder where i had all that webpack thing going on i've now got all static text and i can look mount everest and i've got all this information about mount everest now where did all these mountains come from so let's have a look at our pages and as you can see here i've got a mountains page in index.viewpage and an underscore mountain.viewpage and this page is a dynamic page because it's got the underscore it's a dynamic page that's uh what it's doing is it's getting all the mountains depending on the param and that's what's going to give me all these mountain pages are created because of this dynamic page and what's happening here the mountains page because there's a link to it the crawler is going to crawl all those dynamic pages and it's going to generate for me a page for every single one of these mountains so that's kind of really really cool because i didn't have to do anything in my nooks config to get that i didn't do anything at all and it generated all these mountains for me and all those mountains coming from an api generated for me and i didn't do anything great so what we can do is uh you can see here um i'm serving from disk right now i want to deploy my application so how would i deploy my application i'm just going to stop that for a second and there are a couple of easy there's a lot of ways but i'm going to show you two really really quickly uh one of them is using surge so i can just go search disk once i've installed it and what it's going to do is it's going to deploy that so it asks me if this one is okay i'm like yeah that one's fine it's a bit of an early one i could have changed it um and i've now got breakablebit.search.sh so i copy this i now should see my application with target static because i wrote target static let's have a look but um yes and there we have it deployed on this beautiful url breakable bit surge.sh so that was really cool that was very fast and that was really easy to do and there's another way i'm going to show you another way and what we can do is if we click on here and we say reveal in finder i'll then find out it's on another screen but i've got that dist folder and then what i can do is i can go to netlify and just under sites down at the very bottom there's a deploy a drag-and-drop way of deploying and i can just drag that this folder you can see it here yeah dragging that disk i'm dropping it and what that is gonna do is it has not been deployed okay don't worry it's going to start you can see i'm deploying my site here and i can set up a custom domain if i wanted to but i'm just going to use this um this crazy one because it'll it's fine for this example and there i have on netlify um this mystifying pasture or whatever dot netifida app i have my application deployed in seconds so that's the great benefits there of deploying the disk folder it's very very quick and easy and um there are the main differences when running um your application with target server and target static just make sure in your next config to change between these two targets static tatix target server and then you can deploy depending on uh what your target is so yeah really really simple don't forget it's all in the documentation if you need to brush up on the list of commands and that's pretty much it i hope that makes a lot of sense and makes it easier for when you're deploying your applications thank you very much bye

Channel: Debbie O'Brien

Views: 4,745

Rating: 4.9452057 out of 5

Keywords: web development, server-side rendering, nuxt.js tutorial, static sites, target, nuxt, nuxt.js

Id: lAQ3mcGgnHk

Length: 9min 5sec (545 seconds)

Published: Wed Nov 04 2020