Boilerplate Astro + SolidJS

Boilerplate Astro + SolidJS is a GitHub repository that combines Astro.js static site generation with Solid.js reactive UI, delivering a production-ready starter kit for large-scale web projects.

What is Boilerplate Astro + SolidJS?

It is an open-source development starter, not a hosted product, that scaffolds a web application with Astro for static pages and SolidJS for interactive components. The template takes a source tree of components, pages, tests, and theming as input, and outputs a deployable static site with full linting, formatting, and testing pre-configured. It is maintained by Éverton Toffanetto and built to be continuously updated.

Key Features

• Atomic Design structure — Organizes global components into atoms, molecules, organisms, and layouts for consistent, scalable UI.
• Astro partial hydration — Ships minimal JavaScript by hydrating only interactive SolidJS islands, while static content stays server-rendered.
• CSS Modules theming — Uses locally scoped CSS with a configurable theme for consistent styling across components.
• Testing toolchain — Includes Vitest for unit/component tests and Playwright for end-to-end tests, with coverage, watch, UI, and codegen modes.
• Linting and formatting — BiomeJS for fast format and lint, Lefthook to run checks only on changed files, and Commitlint for conventional commit messages.
• Icons system — Supports custom SVGs plus any icon from Iconify.
• CI/CD automation — Pre-configured GitHub Actions workflows with automatic release generation and versioning.
• Performance optimizations — Font setup that preloads each font at only 2 kB, plus accessibility features like prefers-reduced-motion detection.

Who should use Boilerplate Astro + SolidJS?

Frontend developers who want a pre-configured Astro and SolidJS stack with TypeScript, CSS Modules, and testing out of the box. Development teams building large or enterprise projects that need standardized, maintainable code architecture and Atomic Design. Open-source contributors who want a boilerplate with CI/CD and conventional commits to streamline collaboration.

Use cases

• Starting a new Astro + SolidJS project: clone the repository, install dependencies with pnpm i, and run pnpm dev to launch a local development server at localhost:4321.
• Building and previewing production bundles: run pnpm build to generate an optimized production build and pnpm preview to serve it locally.
• Running a full test suite: use pnpm test for Vitest unit tests and pnpm test:e2e for Playwright end-to-end tests, including UI mode and codegen.

How does Boilerplate Astro + SolidJS work?

The README documents a straightforward workflow: clone the repository, install dependencies with pnpm i, then use pnpm dev for development. The project separates source code into src/components (Atomic Design), src/pages (Astro routing), and src/theme, and all scripts are defined in package.json. Testing runs through Vitest with providers and mocks under src/tests.

FAQ

What Node.js version is required?

You need Node.js 22 or higher, with pnpm as the package manager. The repository's node badge explicitly marks version 22 as the minimum.

Does the boilerplate include end-to-end tests?

Yes. Playwright is configured for E2E testing, with commands for running tests, opening the test UI, and generating test code via pnpm test:e2e:codegen.

How do I check for dependency updates?

Run pnpm check:update to list available updates for project dependencies.

What testing library is used for component tests?

Vitest is paired with @solidjs/testing-library; examples in the README show rendering components inside a test provider and asserting on screen queries.

Is the boilerplate responsive and accessible?

The README states it follows a mobile-first responsive design and includes accessibility detection for prefers-reduced-motion and other features.