├── .node-version
├── vitest.setup.ts
├── .prettierignore
├── src
    ├── styles
    │   └── global.css
    ├── components
    │   ├── Example.tsx
    │   ├── Example.test.tsx
    │   └── Layout.astro
    ├── env.d.ts
    └── pages
    │   ├── index.astro
    │   ├── 404.astro
    │   └── 500.astro
├── .vscode
    ├── extensions.json
    └── launch.json
├── .prettierrc
├── astro.config.mjs
├── .gitignore
├── tsconfig.json
├── vite.config.js
├── eslint.config.mjs
├── .github
    └── workflows
    │   └── test.yml
├── public
    └── favicon.svg
├── README.md
├── LICENSE.md
└── package.json


/.node-version:
--------------------------------------------------------------------------------
1 | 22.14.0
2 | 


--------------------------------------------------------------------------------
/vitest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest'
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | vendor
2 | .cache
3 | dist
4 | *.md
5 | pnpm-lock.yaml
6 | 


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 | 
3 | body {
4 |   background: #eef;
5 | }
6 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/src/components/Example.tsx:
--------------------------------------------------------------------------------
1 | export function Example() {
2 |   return <div className="p-4 text-gray-700">Hello!</div>
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "none",
5 |   "plugins": ["prettier-plugin-astro"]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/triple-slash-reference
2 | /// <reference path="../.astro/types.d.ts" />
3 | /// <reference types="astro/client" />
4 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { Example } from '@/components/Example'
3 | import Layout from '@/components/Layout.astro'
4 | ---
5 | 
6 | <Layout title="Astro">
7 |   <Example client:visible />
8 | </Layout>
9 | 


--------------------------------------------------------------------------------
/src/components/Example.test.tsx:
--------------------------------------------------------------------------------
1 | import { Example } from './Example'
2 | import { render } from '@testing-library/react'
3 | 
4 | it('renders', () => {
5 |   const tree = render(<Example />)
6 |   expect(tree.getByText('Hello!')).toBeInTheDocument()
7 | })
8 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/pages/404.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '@/components/Layout.astro'
 3 | ---
 4 | 
 5 | <Layout title="404">
 6 |   <div class="text-center pt-[45svh]">
 7 |     Nothing here!
 8 |     <a href="/" class="ml-5 font-medium text-blue-500">Go home</a>
 9 |   </div>
10 | </Layout>
11 | 


--------------------------------------------------------------------------------
/src/pages/500.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '@/components/Layout.astro'
 3 | ---
 4 | 
 5 | <Layout title="500">
 6 |   <div class="text-center pt-[45svh]">
 7 |     Sorry, something went wrong.
 8 |     <a href="/" class="ml-5 font-medium text-blue-500">Go home</a>
 9 |   </div>
10 | </Layout>
11 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config'
 2 | import tailwindcss from '@tailwindcss/vite'
 3 | import react from '@astrojs/react'
 4 | 
 5 | // https://astro.build/config
 6 | export default defineConfig({
 7 |   vite: { plugins: [tailwindcss()] },
 8 |   integrations: [react()]
 9 | })
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | # generated types
 4 | .astro/
 5 | 
 6 | # dependencies
 7 | node_modules/
 8 | 
 9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # environment variables
16 | .env
17 | .env.production
18 | 
19 | # macOS-specific files
20 | .DS_Store
21 | 
22 | coverage
23 | .cache
24 | *.tsbuildinfo
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "astro/tsconfigs/strict",
 3 |   "compilerOptions": {
 4 |     "baseUrl": ".",
 5 |     "types": ["vitest/globals"],
 6 |     "plugins": [{ "name": "@astrojs/ts-plugin" }],
 7 |     "paths": { "@/*": ["src/*"] },
 8 |     "jsx": "react-jsx",
 9 |     "jsxImportSource": "react",
10 |     "incremental": true
11 |   },
12 |   "include": [".astro/types.d.ts", ".astro/actions.d.ts", "**/*"],
13 |   "exclude": ["dist", "coverage"]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/global.css'
 3 | 
 4 | // type Props = {
 5 | //   title: string
 6 | // }
 7 | 
 8 | const { title } = Astro.props
 9 | ---
10 | 
11 | <html lang="en">
12 |   <head>
13 |     <meta charset="utf-8" />
14 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
15 |     <meta name="viewport" content="width=device-width" />
16 |     <meta name="generator" content={Astro.generator} />
17 |     <title>{title}</title>
18 |   </head>
19 |   <body>
20 |     <slot />
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { getViteConfig } from 'astro/config'
 2 | 
 3 | // https://docs.astro.build/en/guides/testing/#vitest
 4 | export default getViteConfig({
 5 |   test: {
 6 |     environment: 'jsdom',
 7 |     globals: true,
 8 |     reporter: 'dot',
 9 |     setupFiles: ['./vitest.setup.ts'],
10 |     coverage: {
11 |       enabled: true,
12 |       exclude: [
13 |         'dist',
14 |         '.storybook',
15 |         '.astro',
16 |         '*.config.*{ts,js}*',
17 |         'worker-configuration.d.ts',
18 |         'src/actions/index.ts',
19 |         'src/**/*.astro', // can't test Astro
20 |         '**/*.stories.tsx' // Exclude all story files
21 |       ]
22 |     }
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import eslint from '@eslint/js'
 2 | import tseslint from 'typescript-eslint'
 3 | import eslintPluginAstro from 'eslint-plugin-astro'
 4 | import eslintConfigPrettier from 'eslint-config-prettier'
 5 | import simpleImportSort from 'eslint-plugin-simple-import-sort'
 6 | 
 7 | /** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
 8 | export default [
 9 |   {
10 |     plugins: {
11 |       'simple-import-sort': simpleImportSort
12 |     },
13 |   },
14 |   eslint.configs.recommended,
15 |   ...tseslint.configs.recommended,
16 |   ...eslintPluginAstro.configs.recommended,
17 |   eslintConfigPrettier,
18 |   { ignores: ['**/dist', '**/public', '.astro/**'] }
19 | ]
20 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Run tests
 2 | on: [push, pull_request]
 3 | 
 4 | jobs:
 5 |   build:
 6 |     runs-on: ubuntu-latest
 7 |     permissions:
 8 |       contents: read
 9 |       pull-requests: write
10 | 
11 |     steps:
12 |       - uses: actions/checkout@v4
13 |       - uses: pnpm/action-setup@v4
14 |       - uses: actions/setup-node@v4
15 |         with:
16 |           node-version-file: '.node-version'
17 |           cache: 'pnpm'
18 |       - run: pnpm install --frozen-lockfile
19 |       - run: pnpm check
20 |       - run: pnpm vitest run --coverage.enabled true
21 | 
22 |       - name: 'Report coverage'
23 |         uses: davelosert/vitest-coverage-report-action@v2
24 |         if: always()
25 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # astro-starter-rsc
 2 | 
 3 | I often use Astro to prototype new ideas, but I find myself adding the same integrations over and over.
 4 | This starter is a collection of my favorite integrations.
 5 | 
 6 | - [Astro](https://astro.build)
 7 | - TypeScript
 8 | - Tailwind
 9 | - Vitest
10 | - Eslint
11 | - Prettier
12 | - pnpm
13 | - GitHub Actions
14 | - Testing Library
15 | 
16 | ## Ideas on how to use this
17 | 
18 | There are a few ways I can think this repo can be useful:
19 | 
20 | * Use this as is. I chose the defaults to be as reasonable as possible to modern React projects. Try it with `npx tiged github:rstacruz/astro-starter-rsc <project-name>`.
21 | 
22 | * Remove integrations you don't need. Don't need Tailwind? Search the codebase (`git grep tailwind` and `git ls-files | grep tailwind`) and remove those references.
23 | 
24 | * Use it as a reference. Need to integrate Testing Library into your own Astro project? Search this codebase like above and see how I did it.
25 | 
26 | ## Getting started
27 | 
28 | ```sh
29 | # to enable pnpm: corepack enable pnpm
30 | pnpm install
31 | pnpm dev
32 | open http://localhost:4321/
33 | ```
34 | 
35 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Rico Sta. Cruz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-starter-rsc",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro check && astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro",
11 |     "test": "vitest",
12 |     "astro:check": "astro check",
13 |     "eslint:check": "eslint . --cache --cache-location .cache/eslint",
14 |     "eslint:format": "eslint . --cache --cache-location .cache/eslint --fix",
15 |     "prettier:check": "prettier --cache --cache-location .cache/prettier --check .",
16 |     "prettier:format": "prettier --cache --cache-location .cache/prettier --write . --log-level silent",
17 |     "check": "astro sync && FORCE_COLOR=3 pnpm run '/^(astro:check|eslint:check|prettier:check|vitest:run)$/'",
18 |     "format": "pnpm run --sequential '/^(eslint:format|prettier:format)$/'"
19 |   },
20 |   "dependencies": {
21 |     "@astrojs/check": "^0.9.4",
22 |     "@astrojs/react": "^4.3.0",
23 |     "@eslint/js": "^9.33.0",
24 |     "@tailwindcss/vite": "^4.1.12",
25 |     "@testing-library/jest-dom": "^6.7.0",
26 |     "@testing-library/react": "^16.3.0",
27 |     "@types/react": "^19.1.10",
28 |     "@types/react-dom": "^19.1.7",
29 |     "@vitest/coverage-v8": "^3.2.4",
30 |     "astro": "^5.13.2",
31 |     "eslint": "^9.33.0",
32 |     "eslint-config-prettier": "^10.1.8",
33 |     "eslint-plugin-astro": "^1.3.1",
34 |     "eslint-plugin-jsx-a11y": "^6.10.2",
35 |     "eslint-plugin-simple-import-sort": "^12.1.1",
36 |     "jsdom": "^26.1.0",
37 |     "prettier": "^3.6.2",
38 |     "prettier-plugin-astro": "^0.14.1",
39 |     "react": "^19.1.1",
40 |     "react-dom": "^19.1.1",
41 |     "tailwindcss": "^4.1.12",
42 |     "typescript": "^5.9.2",
43 |     "typescript-eslint": "^8.40.0",
44 |     "vitest": "^3.2.4"
45 |   },
46 |   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
47 |   "pnpm": {
48 |     "onlyBuiltDependencies": [
49 |       "@tailwindcss/oxide",
50 |       "esbuild",
51 |       "sharp"
52 |     ]
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------