Requirements

• Craft CMS Pro (v3.4+)
• Node.js (v8.3+)
• Yarn or NPM
• Gridsome CLI

Setup Craft CMS

1. Install the Gridsome Nogn plugin
2. Enable the GraphQL endpoint in config/routes.php
3. Use the Nogn UI to connect to the Gridsome site, and select the sections to enable live preview

Gridsome steps

1. gridsome create my-new-site - Create a gridsome site

2. cd my-new-site - Go in the folder

3. yarn add @nogn/gridsome-source-craft - Install the source plugin

4. Add the plugin config to the gridsome.config.js file (swaping https://example.com/api for your endpoint):

   module.exports = {
     plugins: [
       {
         use: '@nogn/gridsome-source-craft',
         options: {
           url: 'https://example.com/api',
           livePreview: process.env.CRAFT_LIVE_PREVIEW || false, // Use false in production
         },
       },
     ],
   }

5. create a .env file with CRAFT_LIVE_PREVIEW=true

6. Boot up the local server yarn develop (this will then be available at http://localhost:8080)

7. Check the Gridsome GraphQL explorer to confirm the craft data is there (http://localhost:8080/___explore)

Congratulations. NOGN is ready 🎉.

Now see how to setup templates using the Craft content.