Zach’s ugly mug (his face)

Zach Leatherman

Eleventy Serverless (Eleventy Cloud) Thus Far

May 11, 2021 11ty

Updated on June 30, 2021: A first draft of the Eleventy Serverless documentation is now available.

Many of y’all following me on Twitter have probably noticed that I’ve been talking a lot about Eleventy Serverless (formerly called Eleventy Cloud). Eleventy Serverless will allow Eleventy projects to:

  • Lazily render individual templates outside of your primary build using Distributed Persistent Rendering. This is super useful for large projects with a lot of templates. For example, my Twitter archive (~32K templates) could greatly benefit from this.
  • Serve personalized per-user content via server-side rendering.

We’ll enable these things while maintaining Eleventy’s core ethos of zero-client-JavaScript by default.

This blog post is an attempt to organize all of the different places I’ve talked about this feature in preparation for its debut.

Origin Story

December 20, 2017. From the beginning of Eleventy’s existence, we exposed a Programmatic API but it was undocumented. The command line was the only recommended and supported usage. But times, they are, a-changing.

CMS Previews, build Eleventy on request

February 25, 2021, via Tweet. While working on netlify.com, we received a request for faster Browser Previews of CMS content in Sanity. “We want to see how it renders without running a full build” So I set to work. It turned out to be much harder than I expected and required a bunch of internal changes to how Eleventy configuration files were managed. But it was successful! This was the first example of using the Eleventy Programmatic API to run Eleventy in an AWS Lambda.

The reason this was exciting was that it allowed Eleventy to run on-request and render a full HTML page without needing or using any clientside JavaScript. Edit the content in the CMS and run Eleventy in an iframe to show the rendered HTML.

Coincidentally, this was about the same time I was having a very similar discussion about running Eleventy in a serverless function with Jason Lengstorf, who was gearing up for Netlify’s upcoming On-demand Builders feature. It was this discussion that sparked the idea to deliver something more first-class in Eleventy to support both use cases: dynamic server-rendered on-every-request pages and static, lazy-rendered pages.

Related blog post: Powering Netlify’s Community Events with Structured Content (and a Preview of Eleventy Cloud)

Sanity.io Open House

March 25, 2021, via Tweet. Showing off the Eleventy Sanity Previews, this was also the first debut of the Eleventy Cloud Demo, an minimum-viable template repo for running Eleventy in a serverless function. This repo was a great starter for those that wanted to try it out, but ultimately (in my opinion) still required too much manual intervention.

Related blog post: Powering Netlify’s Community Events with Structured Content (and a Preview of Eleventy Cloud)

Eleventy RFC on GitHub

April 3, 2021. This is probably the canonical home base for this feature, including screenshots showing the capabilities of dynamic versus static rendering modes.

Eleventy Docs Demo of On-demand Builders

April 27, 2021, via Tweet. In this video I removed 400+ pages from the Eleventy web site build and moved them to use On-demand Builders. This sped up the main build and generated these pages on-first-request only. Subsequent requests to On-demand Builders are served a persisted version of that first request’s content.

Rename from Eleventy Cloud to Eleventy Serverless

April 28, 2021, via Tweet After numerous pieces of feedback from folks, it became obvious that the Eleventy Cloud name was causing confusion in comparison to other framework Cloud offerings.

Big Problems Solved

If you’re interested about the Eleventy internals changes that we had to make to facilitate this feature, you can read about the steps here:

  • Add --to=json and --to=ndjson to CLI and expose methods in the new Programmatic API too. We use these in the Serverless environment to get access to the rendered output without writing any files.
  • Easy way to swap between a Build-time template and Serverless template: one change to permalink controls this.
    • Work with pagination to render only a subset of the data set for one specific page.
  • Expose /:path/ and ?querystring parameters as global data to templates.
  • Allowed build-time generated Eleventy collections to be shared in serverless render (configurable per-app)
  • Automatic generation of project Serverless Function bundles (config, includes, layouts, data files, templates)
    • We generate the redirects necessary for serverless URLs.
    • We generate the dependencies your project uses in configuration and data files (otherwise these files would be hidden from the serverless bundler)
    • Huge improvements to the default bundle size, using esbuild dropped the size from 16.5MB to 625KB.
  • Work with local development using BrowserSync instead of using another dependency or requiring an emulated AWS Lambda environment. We already use BrowserSync for live reload but now it works with Eleventy Serverless locally too.
    • That said, you can use netlify dev if you’d like to test Netlify Functions locally.
  • Keep the plugin as provider-independent as possible, though the first iteration will use Netlify.

Next Steps

The BrowserSync work and esbuild stuff needs to be pulled into this plugin and polished and then it’ll be ready for a few eager folks to try out! The finish line is in sight—stay tuned!

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Some Antics with Ben Myers: A First Look at Eleventy Serverless!
Next
Defer generating 400+ pages using Eleventy Cloud and On-demand Builders

14 Retweets

Nicolas HoizeyMatteo CollinaJesse HeadyHubert SABLONNIÈRESami KeijonenSteve LeeBrettРинат Валиуллов (4rontender)Carl WalkerDavid EastBrian LeRouxMatt BiilmannRaymond Camden 🥑Eleventy
68 Likes
Santi CrosJared WrayEduardo BouçasMike SiegielDavid Efhanf-elixScott MathsonRyan ScherlerCorey Megownknutmason conkrightSwenkaOsmelLee FisherWill Martin 🐝 🌹Nicolas HoizeyJose Luis HernandoKevinMarkus SchorkstephenSimon PlenderleithTimon ForrerTRST_BlogJohn MeyerhoferTom Hermans🤘JamstaticlisicaBrett JankordInfiniteLoop.ieDhi Aurrahman𝕕𝔾𝕣𝕒𝕞𝕞𝕒𝕥𝕚𝕜𝕠ChrisArchitectJared WhitebobbyMykal MachondanfasciaColin FahrionAgility CMSDaniel SchildtJesse HeadyJoshua YoesMatteo CollinaDustin SchauCarles MuiñosRainer Martínezkev eRobin CussolAdam Di MarioPatrick HaugAshur CabreraJoel Varty原稿締切間近HTML太郎ParkerBond usePrivilege(stopRacism)Tyler BrostromSteve LeeBrettSami KeijonenEric WallaceTanner DolbyMatt BiilmannMike TaylorBrian LeRouxLukeEleventyDavid Eastbeeman 🐝Stephen BellRafael Calvo 🔰
12 Replies
  1. Mike Siegiel

    Mike Siegiel @MSiegiel #

    I love @eleven_ty for static sites. Going dynamic seems somewhat counter to the original philosophy but I see why it was needed - after all pure static stuff has its limitations!

  2. Will Martin 🐝 🌹

    Will Martin 🐝 🌹 @will_martian #

    Super excited for this, Zach :)

  3. Thord D. Hedengren⚡️

    Thord D. Hedengren⚡️ @tdh #

    I’m intrigued. Thanks for writing it up.

  4. Daniel Schildt

    Daniel Schildt @autiomaa #

    BTW, we just published a small e-commerce website built with Eleventy. Shop part is at Shopify store, but the Preact-based pricing calculator is on top of Eleventy rendered static site. Future features to get more API integration possibilities could be a great thing.

  5. Zach Leatherman

    Zach Leatherman @zachleat #

    We are making moves 😇

  6. Daniel Schildt

    Daniel Schildt @autiomaa #

    Really interesting to see where the future of Eleventy is going. 🙂

  7. danfascia

    danfascia @danfascia #

    Is it going to be $9/mo —> $499/user/mo... actually you smell Enterprisey just call me? Not proper serverless if not... call me

  8. Steve Lee

    Steve Lee @SteveALee #

    But still really interesting!

  9. Steve Lee

    Steve Lee @SteveALee #

    That's a tease campaign if you ask me :)

  10. Zach Leatherman

    Zach Leatherman @zachleat #

    They are related conceptually in that they both can improve build times but are different. --incremental would still generate the templates at Build Time. DPR allows developers to punt on a specific template until after build: when the first end-user requests it in the browser.

  11. Stephen Bell

    Stephen Bell @stephenjbell #

    Is Distributed Persistent Rendering the incremental build that I've seen you mentioned 11ty 1.0? Or are they two different things?

  12. Starfall Projects

    Starfall Projects @starfalldocs #

    Was literally looking for info on this less than an hour ago 🎩

    1 Mention
    1. Joel Varty

      Joel Varty @joelvarty #

      Looking forward to implementing this with @AgilityCMS preview mode and dpr!

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)