11ty Solid Base
A solid base for building an SPA in 11ty with Solid-js, jsx, Is-land, WebC and esbuild
Overview
This product is a minimal base HTML5 template and setup using esbuild to compile SolidJS apps within 11ty. It includes features such as 11ty/is-landWebC, esbuild for compiling SolidJS, minifying and autoprefixing of styles using Lightning CSS, Purgecss for removing unused styles, a shortcode for compiling SolidJS inline, cachebusting via an esbuild generated hash, a manifest.json file, and a buildmeta.json file.
Features
- 11ty/is-landWebC: Integration with 11ty and is-landWebC for building SolidJS apps.
- esbuild: Uses esbuild for compiling SolidJS code into JavaScript.
- Minifying and autoprefixing of styles: Automatically minifies and autoprefixes styles using Lightning CSS.
- Purgecss: Removes unused styles using Purgecss.
- Shortcode for compiling SolidJS inline: Provides a shortcode for compiling SolidJS code inline.
- Cachebusting via esbuild generated hash: Adds a hash to the CSS and JS files to bust cache.
- Manifest.json and buildmeta.json files: Outputs manifest.json and buildmeta.json files for further configuration.
Summary
This product is a minimal base template and setup for building SolidJS apps within 11ty. It provides features such as integration with 11ty and is-landWebC, esbuild for compiling SolidJS code, minifying and autoprefixing of styles using Lightning CSS, Purgecss for removing unused styles, a shortcode for compiling SolidJS inline, cachebusting via an esbuild generated hash, and outputting manifest.json and buildmeta.json files. It also includes several development scripts for building and testing the app.
- Eleventy
11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.
- Solid
SolidJS is a declarative JavaScript library for building user interfaces, offering a reactive programming model for efficient updates. It stands out for its reactivity system that minimizes unnecessary re-renders and its small bundle size, making it a performant choice for developing lightweight and reactive web applications.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Pwa
A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.