We’ve already come a long way here! Congratulations, you’ve built your first 11ty project....but we’re not done yet 😉

Let’s catch up with everything we’ve been working on so far.

We’ve:

• provisioned a Discord bot for our server
• created our 11ty project and set ourselves up with a workable file structure
• configured tailwind to handle styling for us
• learned how to use Nunjucks to template out our layouts and components
• utilized 11ty’s data cascade to fetch data from our Discord server and bring back the events

With all of that, we could be done! — but wait, there’s more.

With our current setup we’re bound to only refresh the events, every time we rebuild the site. That doesn’t seem like the best way to make sure folks will know about our latest events without something to make sure it’s fresh. Insert 11ty Serverless & Netlify’s On Demand Builders!

This combination will give us more options on how we serve the events page and make sure our data is fresh!

Now that we understand what we need to build, let’s get to it.

First things first, we need to add the EleventyServerlessBundlerPlugin to the 11ty config file.

Open up /_eleventy/config.js

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

module.exports = function (eleventyConfig) {
  // Serverless
  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "events",
    functionsDir: './netlify/functions',
    redirects: "netlify-toml-builders"
  });

  ...
}

With that configured, 11ty Serverless will copy over all of the files needed to render the events page (with the option to copy over any extra files you may need) and serve them (or the cache). It will also generate the proper redirects in your netlify.toml to make sure it serves from the builder.

Once the files are generated inside of our netlify directory, we need to make one small change to make sure we’re making use of On-Demand Builders and not just serverless functions.

Inside of our Netlify functions folder, there should now live some generated files, all of which support serving the events page.

Open the base index.js file and scroll the very bottom. We’re going to comment out the base handler for the function on line 54 and uncomment the handler wrapped in Netlify’s builder function.

// /netlify/functions/events/index.js

...

// exports.handler = handler;

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

...