Deployment & PreviewsBeta
By the end of this final step you will learn how to statically deploy & rebuild your website. You will also learn how to preview Prismic content changes, saving build costs.
We're going to deploy our Nuxt.js application on Netlify, this process is super simple so let's get in to it.
First make sure you have target: 'static' in your nuxt.config, then push you 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:
- Branch to deploy: master, or which-ever branch you prefer
- Build command: npm run generate or yarn generate
- Publish directory: dist
That's it, your Nuxt.js & Prismic website should now be live!
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 just need to configure a webhook between Prismic and Netlify.
The process is simple, in Netlify go to you Site Settings > Build & Deploy > Build Hooks and click Add Build Hook. Copy the build hook you generated and go to your Prismic repo > Settings > Webhooks and click Create a webhook. Give you 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 best part for you is that it's super easy to set up with Nuxt.js.
The @nuxt/prismic module has everything that you need for previews already configured. All you need to do is copy your domain URL > go to the Prismic repo settings > Previews > click 'Create a Preview' > add your name, website URL & '/preview/' for the link resolver.
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. :)