{"id":26294673,"url":"https://github.com/everton-dgn/boilerplate_astro_solidjs","last_synced_at":"2026-04-10T07:05:52.192Z","repository":{"id":216944325,"uuid":"742748073","full_name":"everton-dgn/boilerplate_astro_solidjs","owner":"everton-dgn","description":"This project is a complete Astro.js boilerplate, constantly updated, configured in the smallest details to serve as the basis for large professional projects that intend to scale.","archived":false,"fork":false,"pushed_at":"2025-03-14T05:40:47.000Z","size":814,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T06:28:27.421Z","etag":null,"topics":["astro","boilerplate","eslint","husky","jest","prettier","sass","solidjs","stylelint","typescript","vitest"],"latest_commit_sha":null,"homepage":"https://boilerplate-astro-solidjs.querocriarsite.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/everton-dgn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-13T08:45:28.000Z","updated_at":"2025-03-14T05:40:03.000Z","dependencies_parsed_at":"2024-09-10T04:16:08.540Z","dependency_job_id":"cc3da9b4-fa48-4c92-8bb9-26f0b728e1c4","html_url":"https://github.com/everton-dgn/boilerplate_astro_solidjs","commit_stats":null,"previous_names":["everton-dgn/boilerplate_astro_solidjs"],"tags_count":8,"template":true,"template_full_name":"everton-dgn/boilerplate_astro_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_astro_solidjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_astro_solidjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_astro_solidjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_astro_solidjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/everton-dgn","download_url":"https://codeload.github.com/everton-dgn/boilerplate_astro_solidjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681024,"owners_count":20330152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","boilerplate","eslint","husky","jest","prettier","sass","solidjs","stylelint","typescript","vitest"],"created_at":"2025-03-15T03:31:27.185Z","updated_at":"2026-04-10T07:05:52.186Z","avatar_url":"https://github.com/everton-dgn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n![GitHub License](https://img.shields.io/github/license/everton-dgn/boilerplate_astro_solidjs?style=plastic)\n![GitHub repo size](https://img.shields.io/github/repo-size/everton-dgn/boilerplate_astro_solidjs?style=plastic)\n![Node Version](https://img.shields.io/badge/node-%3E%3D22-brightgreen?style=plastic)\n![Built With](https://img.shields.io/badge/built%20with-Astro%20%2B%20SolidJS-blue?style=plastic)\n\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eBoilerplate Complete and updated with Astro.js, Solid.js, Typescript, CSS Modules, Tests, and more\u003c/h1\u003e\n\n\u003cbr /\u003e\n\n# 📝 About the Project\n\nThis application is a comprehensive boilerplate for complex and large systems, especially those that need to scale with security and code quality. It combines the power of Astro.js for static site generation with the reactivity of Solid.js for dynamic components.\n\nWe sought to achieve three pillars:\n- **Readability**: Clean, well-documented code that's easy to understand\n- **Reusability**: Components and utilities designed to be reused across the application\n- **Refactorability**: Well-structured code that's easy to modify and extend\n\nIn the construction of the UI, the Atomic Design structure was chosen, organizing the global components into atoms, molecules, organisms, and templates. This methodology helps create consistent, scalable, and maintainable UI systems.\n\nIn addition to being constantly updated, this project was configured in the smallest details to serve as a basis for professional projects that require standardized and easy-to-maintain code architecture and design.\n\n\u003cbr /\u003e\n\n---\n\n# 📌 Contents\n\n- [Technologies](#globe_with_meridians-technologies)\n- [Features](#triangular_flag_on_post-features)\n- [Project Structure](#file_folder-project-structure)\n- [Prerequisites](#white_check_mark-prerequisites)\n- [How to install and run the project](#question-how-to-install-and-run-the-project)\n  - [Clone Repository](#clone-repository)\n  - [Install Dependencies](#install-dependencies)\n  - [Start Development Environment](#start-development-environment)\n  - [Generate Production Build](#generate-production-build)\n  - [Start Production Environment](#start-production-environment)\n  - [Run Tests](#run-tests)\n  - [Run Tests in Watch Mode](#run-tests-in-watch-mode)\n  - [Run E2E Tests](#run-e2e-tests)\n  - [Run Lints](#run-lints)\n  - [Format code with BiomeJS](#format-code-with-biomejs)\n  - [Check for Available Updates for Dependencies](#check-for-available-updates-for-dependencies)\n- [Testing](#test_tube-testing)\n- [Contributing](#handshake-contributing)\n- [Author](#technologist-author)\n\n\u003cbr /\u003e\n\n---\n\n# 🌐 Technologies\n\n🚀 **Astro.js** - Fast, modern static site generator with island architecture\n\n⚛ **Solid.js** - Reactive JavaScript library for building user interfaces\n\n🔥 **TypeScript** - Typed JavaScript for better developer experience and code quality\n\n💅 **CSS Modules** - Locally scoped CSS for component styling\n\n🚩 **Lints \u0026 Formatters**:\n  - Lefthook - Git hooks manager\n  - BiomeJS - Fast formatter and linter\n  - Commitlint - Lint commit messages\n\n✅ **Testing**:\n  - Vitest - Fast unit testing framework\n  - Playwright - End-to-end testing framework\n\n\u003cbr /\u003e\n\n---\n\n# 🚩 Features\n\n- [x] **Responsive design** - Mobile-first approach for all screen sizes\n\n- [x] **Atomic Design** - Structured component hierarchy for maintainable UI\n\n- [x] **Accessibility** - Detection of prefers-reduced-motion and other a11y features\n\n- [x] **Theming** - Theme configuration with CSS Modules for consistent styling\n\n- [x] **Developer Experience**:\n  - Global aliases for importing utilities like `clsx` without manual imports\n  - Instant lint and formatter with BiomeJS\n  - Lefthook runs lint only on changed files\n\n- [x] **Performance**:\n  - Ultra-optimized font setup, each font only 2kb with preload\n  - Astro's partial hydration for minimal JavaScript\n\n- [x] **Icons** - Customizable icon system supporting your own SVGs and any icon from [Iconify](https://icon-sets.iconify.design/)\n\n- [x] **CI/CD**:\n  - Automatic release generation and versioning\n  - Pre-configured GitHub Actions workflows\n\n\u003cbr /\u003e\n\n---\n\n# 📁 Project Structure\n\n```\nboilerplate_astro_solidjs/\n├── .github/             # GitHub workflows and configuration\n├── public/              # Static assets\n├── src/                 # Source code\n│   ├── @types/          # TypeScript type definitions\n│   ├── components/      # UI components (Atomic Design)\n│   │   ├── atoms/       # Basic building blocks (buttons, inputs, etc.)\n│   │   ├── molecules/   # Groups of atoms functioning together\n│   │   ├── organisms/   # Complex components composed of molecules and atoms\n│   │   └── layouts/     # Page layout components\n│   ├── hooks/           # Custom SolidJS hooks\n│   ├── pages/           # Astro pages for routing\n│   ├── tests/           # Test utilities\n│   │   ├── flows/       # Test flows and scenarios\n│   │   ├── mocks/       # Mock data and functions\n│   │   ├── pages/       # Page tests\n│   │   ├── providers/   # Test providers\n│   │   └── utils/       # Testing utilities\n│   └── theme/           # Styling and theming\n├── astro.config.ts      # Astro configuration\n├── biome.json           # BiomeJS configuration\n├── package.json         # Project dependencies and scripts\n├── playwright.config.ts # Playwright E2E test configuration\n├── tsconfig.json        # TypeScript configuration\n└── vitest.config.ts     # Vitest configuration\n```\n\n\u003cbr /\u003e\n\n---\n\n# ✅ Prerequisites\n\n- **Node.js** - Version 22 or higher (LTS recommended)\n- **pnpm** - Latest version (used as the package manager)\n\n\u003cbr /\u003e\n\n---\n\n# ❓ How to install and run the project\n\n## Clone Repository\n\n```bash\ngit clone https://github.com/everton-dgn/boilerplate_astro_solidjs.git\ncd boilerplate_astro_solidjs\n```\n\n## Install Dependencies\n\n```bash\npnpm i\n```\n\n## Start Development Environment\n\n```bash\npnpm dev\n```\n\nFor verbose output:\n\n```bash\npnpm dev:verbose\n```\n\nAvailable at http://localhost:4321\n\n## Generate Production Build\n\n```bash\npnpm build\n```\n\n## Start Production Environment\n\n```bash\npnpm preview\n```\n\nAvailable at http://localhost:4321\n\n## Run Tests\n\n```bash\npnpm test\n```\n\nWith coverage:\n\n```bash\npnpm test:c\n```\n\n## Run Tests in Watch Mode\n\n```bash\npnpm test:w\n```\n\nWith UI:\n\n```bash\npnpm test:ui\n```\n\n## Run E2E Tests\n\n```bash\npnpm test:e2e\n```\n\nWith UI:\n\n```bash\npnpm test:e2e:ui\n```\n\nGenerate test code:\n\n```bash\npnpm test:e2e:codegen\n```\n\n## Run Lints\n\n```bash\npnpm lint\n```\n\nType checking:\n\n```bash\npnpm typecheck\n```\n\nFormat checking:\n\n```bash\npnpm check:format\n```\n\n## Format code with BiomeJS\n\n```bash\npnpm format\n```\n\n## Check for Available Updates for Dependencies\n\n```bash\npnpm check:update\n```\n\n\u003cbr /\u003e\n\n---\n\n# 🧪 Testing\n\nThe project uses a comprehensive testing strategy:\n\n### Unit and Component Tests (Vitest)\n\nComponent tests are located in `__tests__` directories next to the components they test. Example:\n\n```typescript\n// src/components/atoms/Button/__tests__/Button.test.tsx\nimport { screen } from '@solidjs/testing-library'\nimport { renderWithProviders } from 'tests/providers/component'\nimport { event } from 'tests/utils'\n\nimport { Button } from '..'\n\ndescribe('[Component] Button', () =\u003e {\n  it('should call a function once on click on the button', async () =\u003e {\n    const onClick = vi.fn()\n    renderWithProviders(() =\u003e (\n      \u003cButton label=\"More information\" onClick={onClick} /\u003e\n    ))\n\n    const btn = screen.getByRole('button', { name: /More information/i })\n    await event().click(btn)\n\n    expect(onClick).toHaveBeenCalledTimes(1)\n  })\n})\n```\n\n### End-to-End Tests (Playwright)\n\nE2E tests simulate real user interactions in a browser environment. Run them with:\n\n```bash\npnpm test:e2e\n```\n\n\u003cbr /\u003e\n\n---\n\n# 🤝 Contributing\n\nContributions are welcome! Here's how you can contribute:\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feat/my-feature`\n3. Commit your changes: `git commit -m 'feat: add some feature'`\n   - This project uses conventional commits, so please follow the format\n4. Push to the branch: `git push origin feat/my-feature`\n5. Open a Pull Request\n\nBefore submitting, please ensure:\n- Your code follows the project's coding style\n- All tests pass\n- You've added tests for new features\n- Your commit messages follow the conventional commits format\n\n\u003cbr /\u003e\n\n---\n\n\n# 👨‍💻 Author\n\nBy [Éverton Toffanetto](https://devinsights.dev).\n\n:link: LinkedIn: https://www.linkedin.com/in/everton-toffanetto\n\n:link: YouTube: https://youtube.com/@toffanettodev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feverton-dgn%2Fboilerplate_astro_solidjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feverton-dgn%2Fboilerplate_astro_solidjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feverton-dgn%2Fboilerplate_astro_solidjs/lists"}