Deployment and Previews

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

By the end of this final step, you will learn how to deploy & rebuild your website statically. You will also learn how to preview Prismic content changes, saving build costs.


Deployment

We're going to deploy our Nuxt.js application on Netlify, this process is super simple so let's get into it.

First make sure you have target: 'static' in your nuxt.config, then push your project to a new Github repo. Next, go to the Netlify website and login with your Github account. Press the New site from Git button on the Netlify dashboard, select your repository and continue. You should land on step 3, "Build options, and deploy!", here are the settings you need:

  1. Branch to deploy: master, or which-ever branch you prefer
  2. Build command: npm run generate or yarn generate
  3. Publish directory: dist

That's it, your Nuxt.js & Prismic website should now be live!

View our website

Rebuilding

Now that you have your website live, you'll want your content creators to be able to make changes; for that, you'll need your Nuxt.js web app to rebuild when the content is updated. This again is really simple; we need to configure a webhook between Prismic and Netlify.

In Netlify, go to your Site Settings > Build & Deploy > Build Hooks and click Add Build Hook. Copy the build hook you generated and in your Prismic repo, go to Settings > Webhooks and click Create a webhook. Give your webhook a name, paste your URL and configure what events you want to trigger your webhook. Good Job! Your website will now automatically rebuild when content changes :)

You can see this full process in the video below:


Preview Your Content Changes

Now for the cherry on top. Rebuilding your website once content changes is great, but if you want to see what content changes might look like without publishing to your live site or incurring build costs from your deployment service, then the solution is Prismic Previews. This feature builds your preview on top of the browser so that it's fast & free.

The @nuxt/prismic module has everything that you need for previews already configured. All you need to do is copy your domain URL, then, in your Prismic repo, go to Settings > Previews, and click Create a Preview. Add a name for the preview, the URL of your website, and a route for the link resolver.

How your settings could look.

Now head over to your documents > enter a document > make a small change > save > click the eye icon to preview. It's that easy and now you can make as many content changes as you want with no cost. :)

You Can See the Full Process in the Video Below.

Congratulations!

Now that you can Preview your content changes, you should have got some experience using all the basic features of Slice Machine with Nuxt.js.

You should also have a fully functioning website project which you can customize and build on top of. Below you'll find some suggested articles on what to learn next. I suggest starting to create some of your own unique Slices; once you've done this, you can share them with us in the Prismic Community Forum or on Twitter with #PrismicSliceMachine.



Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.