Deploy Nuxt SPA with Storyblok to Netlify

Contents
    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    This short guide describes how to configure & deploy your single page application (SPA) built with Nuxt and Storyblok to Netlify. You may check out the Getting Started guide from Storyblok, which will be our starting point for this guide.

    HINT:

    You may also be interested in the static deployment of Nuxt to Netlify. Find out how to do it in this article - will come soon. 😇

    Set up Storyblok space

    Follow the steps in the Getting Started guide from Storyblok to create a new space. Storyblok creates sample content for us so we don't need to create any new stories. Fork the getting started repo next. You may notice that there are multiple technology folders. Open the Nuxtjs folder in your IDE and install the dependencies of the project.

    console

    yarn // npm install

    After these steps, you should be able to start the local environment using the following command.

    console

    yarn dev // npm run dev
    IMPORTANT:

    Don’t forget to change the access token to one of your newly created Storyblok spaces, as described in the second step in the Nuxt Example of the Getting Started.

    Set up Nuxt

    Make sure that your Nuxt config file is correctly configured. You have to set ssr: 'false' and target:'server' otherwise Netlify would not find the dist folder.

    ./nuxt.config.js

    export default {
      ssr: false,
      target: 'server',
      /*
      ** Headers of the page
    	...
    	...
    } 

    Set up Netlify

    We will use a minimalistic Netlify setup in this case - you could do the same configuration using the Netlify UI, but I am going to show you how to do it with a netlify.toml file. 😉

    Create a netlify.toml file in the root folder of the Nuxt project and copy & paste the following configuration:

    ./netlify.toml

    [build]
      command = "yarn build"
      publish = "dist/"

    We are done with coding for today! Yes, that was all. Commit & push your code to your repository and let's finish deployment in the Netlify UI.

    Log into your Netlify account and hit the button "New site from Git" (1).

    Deploy new site on Netlify - start guide

    In the following Netlify guide, the first step is to choose your Git provider (GitHub in my case 😇). The second step is to select the newly created repository and the correct branch, if you did the changes in a different branch. You can always choose the "netlify" branch where I already configured the netlify.toml file to connect to our getting started space in Storyblok.

    Write "dist" in the field Publish directory to deploy the site.

    At first, you will see an error because we have to change the Base directory (2) in the Settings (1) of the site. Change it now to "nuxtjs".

    Set base deployment folder in Netlify

    Then go to the Deploys section of Netlify and trigger the deployment again. The result of the preview should look like this simple website of Getting Started with Storyblok.

    Preview of the project after deployment

    Set up webhooks

    The last topic we cover is how to trigger a deployment on Netlify if new content is published.

    Go to Settings in Netlify and, under Build & Deploy, look for the Build hooks (1) section. Create a new hook and set the branch you want to deploy.

    Get webhook from the Netlify

    Copy the URL of the webhook you just created and go to the Storyblok App and open the Setting of your space. Paste the URL in the field Story published & unpublished (1) and don't forgot to save it.

    Set webhook in Storyblok

    From now on, every time you publish or unpublish a story the build process on Netlify will be triggered.

    Conclusion

    That's all folks. It is this easy to set up the deployment of Nuxt with Storyblok to Netlify. You may also want to check our Nuxt technology page and find out how to deploy Static/SSG Nuxt to Netlify using the generate function.