Best way to handle CMS previews in 11ty

[erichhaemmerle]

I've been given the luxury of choosing our tech stack at our company for a new project and I REALLY want to use 11ty. I've used it on a personal project and absolutely loved it. The problem is that one of the requirements for the CMS is that the content editors are able to preview the content that is in a draft status before publishing. I've scoured the internet and I haven't found any straightforward examples of how to do this in 11ty. I did a Gatsby project and with Gatsby cloud, CMS previews are very simple to setup and kind of just built in. But I DON'T want to have to use Gatsby just for the sake of previews. I like 11ty much better. So what is the best way to handle this? Whatever CMS I use will most likely have a way to have content in a "draft" status. It's these draft pages that I would like to be able to preview using all of my 11ty templates and components for whatever page it is. I've read about possibly being able to do it with 11ty serverless functions, but I can't wrap my head around the process there and what that looks like as far as doing a preview goes. I just want to allow the user to preview a specific page that's in draft status by going, for example, to "www.mysite.com/preview/UUID_HERE" where I intercept the UUID of the piece of content in the URL, fetch that piece of content from my CMS by UUID and display it in my page template. THANKS

[erichhaemmerle]

So I got a serverless function working and it is doing what I want, BUT I'm not entirely sure I did it correctly. I did this the Netlify route since that seemed the most built in way, however, I most likely won't be able to host my site on Netlify, but at least it's a start.

So in my .eleventy.js config file I did this:

const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");

module.exports = function (eleventyConfig) {

  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "dynamic",
    functionsDir: "./netlify/functions/",
  });

  return {
    dir: {
      input: "src",
      output: "dist",
    },
  };
};

Then in my preview page I have this in my front matter, where UUID is my UUID from my CMS that I can use to fetch a piece of content:

---js
{
	layout: "page",
	permalink: {
		dynamic: "/preview/:uuid/",
	}
}
---

Then, when I do an eleventy build, I see that the serverless function files did get auto generated into /netlify/functions/dynamic including the index.js file. This is where I wasn't sure if I was supposed to do my data fetch in THERE, but I did. Again, it's WORKING, but not sure if that was the proper place to do my fetch, especially because I could't figure out an easy way to grab the UUID from the dynamic URL. I ended up using JavaScript to pull it from the path. That seemed dirty to me and I feel like I should have had access to the URL part in the path. Anyway. I used Node Fetch to grab the data for my preview page and I added it to the Global data in the data cascade. Here is my entire index.js file for my serverless function. Am I doing this right?

const { EleventyServerless } = require("@11ty/eleventy");
const fetch = require("node-fetch");
require("dotenv").config();

// Explicit dependencies for the bundler from config file and global data.
// The file is generated by the Eleventy Serverless Bundler Plugin.
require("./eleventy-bundler-modules.js");

async function handler(event) {
  const path_parts = event.path.split("/");
  const uuid = path_parts.pop() || path_parts.pop();
  const single_page = await fetch(
    process.env.DRUPAL_BASE_URL +
      "/jsonapi/node/page/" +
      uuid +
      "?resourceVersion=rel:working-copy&jsonapi_include=1&api-key=" +
      process.env.DRUPAL_AUTH_KEY
  ).then((res) => res.json());

  let elev = new EleventyServerless("dynamic", {
    path: new URL(event.rawUrl).pathname,
    query: event.queryStringParameters,
    functionsDir: "./netlify/functions/",
    config: function (config) {
      config.addGlobalData("single", single_page.data);
    },
  });

  try {
    let [page] = await elev.getOutput();

    // If you want some of the data cascade available in `page.data`, use `eleventyConfig.dataFilterSelectors`.
    // Read more: https://www.11ty.dev/docs/config/#data-filter-selectors

    return {
      statusCode: 200,
      headers: {
        "Content-Type": "text/html; charset=UTF-8",
      },
      body: page.content,
    };
  } catch (error) {
    // Only console log for matching serverless paths
    // (otherwise you’ll see a bunch of BrowserSync 404s for non-dynamic URLs during --serve)
    if (elev.isServerlessUrl(event.path)) {
      console.log("Serverless Error:", error);
    }

    return {
      statusCode: error.httpStatusCode || 500,
      body: JSON.stringify(
        {
          error: error.message,
        },
        null,
        2
      ),
    };
  }
}

// Choose one:
// * Runs on each request: AWS Lambda, Netlify Function
// * Runs on first request only: Netlify On-demand Builder
//    1. Don’t forget to `npm install @netlify/functions`
//    2. Also use `redirects: "netlify-toml-builders"` in your config file’s serverless bundler options:
//       https://www.11ty.dev/docs/plugins/serverless/#bundler-options

exports.handler = handler;

//const { builder } = require("@netlify/functions");
//exports.handler = builder(handler);