Jamstack Explorers

Get Started with Nuxt with Debbie O'Brien

Nuxt Generate and Deploy

It's time to launch our application so the whole world can see it. So what do we need to do? Well first, we need to make sure the nuxt config has target set to static. We want to use target static so we can deploy a JAMstack site to Netlify.

Let's have a look at the commands available to us in our package.json. These commands have already been set up for us when we used create nuxt-app. Now we've already used the dev command to launch Nuxt in development mode. What we need next is the generate command which will generate our application for us so we can easily deploy.

Let's do that.

In our terminal run yarn generate.

This will build our application using webpack.

And it will Bundle for both server and client. The first page hit is the server rendered or pre rendered page but after that and on navigation Nuxt works client side. As you can see it's bundled all of our pages for us. We have our chunk names. We have our component. And we have everything we want in order for an application to run.

It tells us that full static generation is activated.

And it's generating an output directory of dist. It's generating the pages with full static mode. And look at the pages we have generated. Our home root our about route. As well as a client side, fullback created at 200.html.

But. Where's our planets? We have no Mars or Jupiter or Neptune route. What's going on here? Why have we no pages generated for our planets? The planets are dynamic pages remember they were created using _slug. So what do we need in order to generate dynamic pages. Well, Nuxt comes with a crawler installed.

It will crawl all the pages for you once there's a link to those pages. We have a link to our home and to our about page. But we don't have a link to our planets because it is lazy loaded and only shown when we click the show planets button. When I click this button. The JavaScript loads and the component is added to the DOM.

The crawler can't click that button therefore those links are never going to be crawled. They're kind of like secret pages. If we wanted to keep our planets hidden we could manually generate these pages using the generate function. However I prefer that our planets are visible and that the crawler can pick them up so let's fix that.

Back in her application. Let's open our index page.

And let's remove the v-if and the word lazy.

And we can remove the button as well.

Same for our scripts.

Now we have our planet's. Let's see if it's going to generate those routes now. They are showing int he browser but let's see if the crawler picks it up.

Let's run your own generate command again.

Webpack is going to rebuild because we made some changes to our index page.

We now have new bundles and as you can see, our routes have been generated. Very cool.

Now let's have a look at our output directory. It says it's generating an output directory of dist.

And in vsCode you will see we now have a dist directory. Inside it we have an index.html page for all our routes, including our planets.

This has all the HTML, JavaScript and CSS needed in order for our page to run.

The dist directory is what we need to use for deploying to Netlify. Let's do deploy our site.

First we need to create an account or sign in to Netlify.

Once we've logged in click on sites and scroll down to the bottom. Here you'll find a box with a message that says deploy a new site without connecting, to git. Drag and drop your site folder here. Let's try it out.

In vs code if we right click our dist directory and select reveal in finder it will open a finder window with my dist directory which I can then drag and drop into this box. How cool is that? Now it says this site has not been deployed. That's okay. Oh, wow. Look, it's done. That was quick.

My site is being deployed as wizardly Northcott. Well, don't worry about the name for now. Let's just check it out first. And there we have it. There's our page with all our planets. Yay. That was easy.

Now we really should change the name because that name's not really a good one. We can create a custom name by editing the site name.

We want to call it the JAMstack Explorer nuxt mission. Let's paste that in here and press save.

And there we have it.

Now when we click it. We've got the URL we want. Amazing.

When working with static sites, anytime we change something, we will have to redeploy it. So although dragging and dropping is great, it's sometimes not. What we really want is continuous integration. We want Netlify to generate the site for us every time we push our changes to GitHub

With Netlify we can do this really easily.

Let's link our site to git.

Let's choose GitHub.

This will open and check our authorization.

Let's search for our nuxt-mission repo.

There we have it. Let's select it and choose the branch we want to deploy.

And now we just need to add the build command, our build command is yarn generate.

Our published directory is dist. And that's it. We have just setup continuous integration. Wow

That means now, anytime we make changes in our application we can just push our changes to GitHub and Netlify will take care of the rest. Let's check it out by changing our title. Lets add and commit our changes and push them. Now over in Netlify we can see our app is building. Notice the preview button. We can even see a preview of what it will look like before its deployed. Nice. And there is our site is deployed. Wow only 38 seconds. This is great. Let's open and and yes our new title is there and we didn't have to do anything else in Netlify. This is because Auto publishing is on. Deploys from master are published automatically.

As Netlify is so fast at deploying our site we probably should generate our site locally and then use the start command which will give us a production version of our application. That means we can check everything is working before we push our changes. Very cool.

Wow great job everyone. we have deployed our app and setup continuous integration. mega cool.


your progress