11ty Solid Base is a minimal starter template that compiles SolidJS applications inside the Eleventy static site generator using esbuild, WebC, and is-land.
What is 11ty Solid Base?
11ty Solid Base is an open-source boilerplate for building single-page applications with SolidJS and Eleventy (11ty). It takes SolidJS JSX or JavaScript files placed in src/scripts/jsx or src/scripts/js and produces minified, cache-busted JavaScript bundles while 11ty handles HTML generation. The project runs on Node.js and is maintained by woodcox on GitHub, with the repository available at woodcox/11ty-solid-base.
Key Features
- esbuild-powered compilation — Automatically compiles SolidJS JSX and JS from the
src/scriptsfolders into minified JavaScript; configuration lives inconfig/build/esbuild.js. - Partial hydration with is-land — Includes the 11ty is-land plugin for hydrating islands of interactivity, letting you lazy-load and hydrate components on demand.
- WebC component support — Allows authoring Web Components directly inside 11ty templates using the WebC language.
- Lightning CSS processing — Styles are autoprefixed and minified by Lightning CSS, and can be extended to CSS Modules by adding
--css-modulesto the npm prefix script. - PurgeCSS in production — Unused CSS is automatically removed in production builds using a modified version of esbuild-plugin-purgecss-2; the purge configuration is in
config/build/purgecss.js. - Cache-busting hash filter — esbuild generates a
manifest.jsonfile insrc/_datalisting hashed filenames; ahashfilter rewrites asset URLs, appending hashes and a-minsuffix when minified. - Gzip and Brotli compression — Production builds output
.gzand.brfiles alongside every minified JS and CSS asset. - SolidJS inline shortcode — A
solidshortcode compiles inline JSX into a module script tag, with arguments for the output filename and an optionalbundleOffswitch.
Who is it for?
- Eleventy developers who want to add SolidJS interactivity without managing a separate bundler setup.
- Frontend teams building content-driven SPAs that need client-side routing and a static-friendly build pipeline.
- Developers exploring the islands architecture who want is-land and WebC to hydrate individual components in a static site.
What can you do with 11ty Solid Base?
- Build a SolidJS SPA with routing — Use solid-router and the
pathPrefixenvironment variable (passed through esbuild's define API) to set the base URL for sub-path deployments. - Embed interactive widgets inline — Use the
solidshortcode to compile JSX directly in Liquid templates, outputting a module script tag without a separate file. - Optimize assets for production — Run
npm run minifyto get purged, minified, autoprefixed CSS and JS plus gzipped and brotli-compressed variants.
How does 11ty Solid Base work?
Source JSX files live in src/scripts/jsx or src/scripts/js. esbuild bundles them into dist/app, adds hashes, and writes manifest.json. The hash filter in templates rewrites asset URLs to the hashed filenames. For development, npm start runs 11ty with hot reload at localhost:8080; npm run cloud is a variant for cloud IDEs like Stackblitz; npm run build creates a staging build without minification or purging.
FAQ
Does 11ty Solid Base support CSS Modules?
Yes. Lightning CSS can be configured to output CSS Modules by adding --css-modules to the prefix npm script, or you can use the esbuild CSS modules plugin.
What compression does the production build produce?
In production, every JavaScript and CSS file is output as a minified file, a .gz gzip file, and a .br brotli file. This behavior is controlled in config/build/esbuild.js via the gzipPlugin.
Is there a development script for cloud IDEs?
Yes, npm run cloud is a development build intended for cloud IDEs such as Stackblitz. It skips the path prefix and disables minification and purging, with autoprefixing still enabled.
Can I use environment variables in my SolidJS code?
Yes, the npm script arguments are passed as environment variables using esbuild's define API. The pathPrefix argument is already available, and you can add more variables to the defineEnv constant in config/build/esbuild.js.
Does it include support for client-side routing?
You can integrate solid-router by using the pathPrefix environment variable to set the URL prefix, as shown in the README's example for handling sub-path deployments.
