Intro and course plug
Hey, before I start this video you could see me here frozen on the screen. This video is from my course Create Awesome Vue.js Apps with Nuxt.js. In this course I go over about five hours of Vue.js content to become all the way from beginner content to more advanced content, and then I go into Nuxt.js and inside Nuxt.js we create this video game store. I just explain everything from server-side middleware to normal middleware, how to deploy your application. I tell you everything about it. If you guys are interested in the course I have a link on it below, just click on that link. The course is now done. I'm going to be updating some information in the course soon but you guys can pick it up. It's awesome, check it out. And without further ado, this video is on deployment: how do you deploy a Nuxt.js app and I go over a couple different ways. Enjoy.
Deployment options: static vs universal
So far we've been using our application on our localhost but at some point we need to deploy it somewhere. So there's two ways we can do that with our Nuxt.js app. We can either deploy it as statically generated files or we can deploy it in Universal app mode. I'm going to go over a couple ways we can do this and we'll discuss it. So first you can see here, here's the app that we've created. Now I'm going to go and open up my console here and there's two commands that you can use. You can use npm run... Actually if you take a look at the package.json file before we get too far you can see here we have this scripts and under the scripts we have dev, build, start, and generate. So build is what we use when we want to actually build our application for production. If we need to create our application for... for a statically generated site we use generate and that would be for production as well. So in other words what we do is just depends on what type of server and what kind of deployment we want to use.
What build and generate do
Let me tell you the differences. If we want to have our application in Universal app mode, in that case we're running code on the server side and on the client side and we're doing things like with our server middleware. Then we need to run in Universal app mode. In that case we need to run build. On the other hand, if we wanted to load this up on an S3 bucket or GitHub Pages or Netlify, there's quite a few options, we can host statically generated files. And what that does is if we run the generate command then it'll go ahead and generate a folder for us and we can copy that folder anywhere and it should work fine. So let's take a look at that first.
Running npm run generate
So I can do npm run generate and that's going to generate the files and you'll see here in the console what it's doing. Okay, great, so we went ahead and generated the files for us. So if we go to the dist folder we can see here that we have this 200.html, the icons, index.html, nuxt, README. So I could copy this whole folder and put it up on GitHub Pages or anywhere else and it will work. However, since in this application we created some server middleware and we were doing some server-side stuff, this application would not work and none of our server-side stuff will work. So what we want to do is run it and generate it so it can work as a Universal app. To do that we need to run npm run build.
Building for Universal (SSR)
So to do that we need to run npm run build and that will build it. Okay, it's built. Don't worry about this warning here, it's just saying that we have a larger size on our asset files but don't worry about that right now. So it's built. If you look in the folder it actually didn't put it in the dist folder; this is still the statically generated site. But if we go into the Nuxt folder, it's dot-nuxt, so it's actually a hidden folder. And go to dist — this is actually the whole layout of this, this is the actual bundled build files for our application that we just created with the server-side rendering. So this is the folder that we want now. So let's go ahead and since we have these files let's go ahead and put it up on a server and I'll show you how to get up and...
Preparing a server and transferring files
One thing you could do — and I'll bring up the console right here — is I'm already logged into a site. Actually this is very similar to a DigitalOcean Ubuntu instance, so this is just like a server that I have. It's very similar to DigitalOcean. What I did is I basically went ahead and created a folder called site and in it there's nothing in it right now. So what I need to do is I'm going to open up WinSCP and that's this program right here. If you're on Mac you can get different SCP clients or you could do it from the command line or you can FTP your files over. That's another way of doing it. So on this server I've actually — let me refresh it here — I've actually already copied the Nuxt folder over but I'm going to delete that so I have nothing in this site folder right now. So what I'm going to do, this left-hand pane right here is all the files in my server. So the easiest way to do this is you can copy the whole folder over, so that means you actually get all the source code — and some people like that, then some people don't like that because then in that case on your production server you would have all your source code — but you could always do a git pull and then build and do everything here. Another way you could do it is you need to pull over some folders. So what I do is I pull over the .nuxt folder that has after I run the build command, makes, you run that first. I copy that over. I copy over the API folder because that's the folder that has the special API server file that we created. Then I pull over the static folder for any static files I have. Then I pull over the store or sessions, the store, but the Nuxt config file and I pull over the server folder and I also do the package.json file. So those are the ones you must have. Now you can pull everything over but you don't have to. So what I did is I took my local directory that had all my Nuxt files. I just pulled over these specific folders: the static, server, API, and .nuxt. So now if I ls here I could see the files. So now I want to do an npm install.
Node, npm install, and starting the app
Now before you do that on your server — and this isn't an Ubuntu server — make sure you have Node installed. So if I go node --version I have 9.3.0 installed. Make sure it matches; you actually have to have a newer version of Node to run Nuxt, so make sure you have that newer version. I also needed Python installed, so make sure you have Python 2.7 installed so that way you can npm install and this will install the packages you need. Let's take a moment. Okay, it's run, it's downloaded all the packages, so we can go ahead and run it. Now if we do npm run start that goes ahead and runs it. Now it's running on my server and localhost:3000 but it's actually — that's not going to help us, we want to actually run it on port 80 and we also want to maybe use something like nginx to help work everything out. So we have a couple things we can do here.
Configuring nginx and using pm2
If we go — I'm not going to give you instructions but there is a way to install nginx on your server. I would Google that. I'll put a link below with some instructions of how to install nginx. That's not a part of this tutorial, but nginx is a really good web server that we can use. Once you have it installed you just need to go to etc/nginx and then you go to sites-available and you go into the default file. What I did is I already set this up beforehand to show you guys. So I deleted everything in the server bracket here and I just left here this listen on port 80, my server name, and then I de proxy pass. So this is basically doing a reverse proxy. In other words, we're going to run the Nuxt server on port 3000 and then we're going to reverse proxy that in nginx so it actually listens on port 80. So port 80 will actually listen to the internal port 3000. That's all you really need to do. I'll add that to the notes below so you guys can see it in your sites-available default file. After you add that you can go ahead and restart the server, sudo service nginx stop and start. After you do that I'd go back to your folder. There's some ways you can do this. I have a dedicated user named eric that I've logged into the server. You can make another dedicated user called www and then all its responsibility would be to run this application and then you can lock down a bunch of things on it. There's a lot of ways to do this. I have the directory here now I want to run it forever. One thing I found really useful is I installed — if I have it — so I ran npm install and it's called pm2 and I did that -g. So that installed it globally. pm2 is a process manager that you can run for Node and it basically, if your server reboots, it automatically starts the service again after the server restarts so you don't have to worry about it. If it crashes it restarts, there's a bunch of logging involved, it's production ready, it's pretty awesome. So what I do here is I do pm2 after I npm install it, do pm2 start npm -- start. So what this does is it runs the npm start command which will fork it and run it in the background and it will run npm run start or npm start. If I do this you could say it went ahead and added it. You can see here at the top fork that it has it online. You can also run pm2 monit and that'll show that it's running. So it should be running now on my server. To test that out we just need to open it up and see if it works. So I'm going to go ahead and open this up and I'm going to put in the web address. Cool, here is this store running on my server. Let's just make sure it works. I can do /api. Well, if I click on any of this I'm not getting any errors. Description looks OK. So if I put in /api and then title, still working. So you can see here it's working from the server. I'm deployed. pm2 works great in production and I'm all set. Now like I said you could copy the whole folder over, everything in the .nuxt folder, but this is just a little bit easier: you just need a handful of folders. And then if you needed to make any changes in the future, all you need to do is run npm run build again, go into the .nuxt/dist folder or dist folder, excuse me, and then copy that over and copy to the same place on the server.
