|
1 | | -# Solid Start |
| 1 | +[](https://github.com/solidjs) |
2 | 2 |
|
3 | | -This is the SolidStart framework and CLI. |
| 3 | +<div align="center"> |
4 | 4 |
|
5 | | -The quickest way to get started: |
| 5 | +[](https://npmjs.com/package/@solidjs/start) |
| 6 | +[](https://npmjs.com/package/@solidjs/start) |
| 7 | +[](https://github.com/solidjs/solid-start) |
| 8 | +[](https://discord.com/invite/solidjs) |
| 9 | +[](https://reddit.com/r/solidjs) |
| 10 | + |
| 11 | +</div> |
| 12 | + |
| 13 | +**SolidStart** brings fine-grained reactivity fullstack with full flexibility. Built with features like unified rendering and isomorphic code execution, SolidStart enables you to create highly performant and scalable web applications. |
| 14 | + |
| 15 | +Explore the official [documentation](https://docs.solidjs.com/solid-start) for detailed guides and examples. |
| 16 | + |
| 17 | +## Core Features |
| 18 | + |
| 19 | +- **All Rendering Modes**: |
| 20 | + - Server-Side Rendering _(SSR)_ with sync, async, and stream [modes](https://docs.solidjs.com/solid-start/reference/server/create-handler) |
| 21 | + - Client-Side Rendering _(CSR)_ |
| 22 | + - Static Site Generation _(SSG)_ with route [pre-rendering](https://docs.solidjs.com/solid-start/building-your-application/route-prerendering) |
| 23 | +- **TypeScript**: Full integration for robust, type-safe development |
| 24 | +- **File-Based Routing**: Intuitive routing based on your project’s file structure |
| 25 | +- **API Routes**: Dedicated server-side endpoints for seamless API development |
| 26 | +- **Streaming**: Efficient data rendering for faster page loads |
| 27 | +- **Build Optimizations**: Code splitting, tree shaking, and dead code elimination |
| 28 | +- **Deployment Adapters**: Easily deploy to platforms like Vercel, Netlify, Cloudflare, and more |
| 29 | + |
| 30 | +## Getting Started |
| 31 | + |
| 32 | +### Installation |
| 33 | + |
| 34 | +Create a SolidStart template project with your preferred package manager |
| 35 | + |
| 36 | +```bash |
| 37 | +# using npm |
| 38 | +npm create solid@latest -- -s |
| 39 | +``` |
6 | 40 |
|
7 | 41 | ```bash |
8 | | -npm init solid@latest my-app |
9 | | -cd my-app |
10 | | -npm install |
11 | | -npm run dev |
12 | | -``` |
| 42 | +# using pnpm |
| 43 | +pnpm create solid@latest -s |
| 44 | +``` |
| 45 | + |
| 46 | +```bash |
| 47 | +# using bun |
| 48 | +bun create solid@latest --s |
| 49 | +``` |
| 50 | + |
| 51 | +### Project Structure |
| 52 | + |
| 53 | +- `public/`: Static assets like icons, images, and fonts |
| 54 | +- `src/`: Core application (aliased to `~/`) |
| 55 | + - `routes/`: File-based routing for pages and APIs |
| 56 | + - `app.tsx`: Root component of your application |
| 57 | + - `entry-client.tsx`: Handles client-side hydration |
| 58 | + - `entry-server.tsx`: Manages server-side request handling |
| 59 | +- **Configuration Files**: `app.config.ts`, `package.json`, and more |
| 60 | + |
| 61 | +Learn more about [routing](https://docs.solidjs.com/solid-start/building-your-application/routing) |
| 62 | + |
| 63 | +## Adapters |
| 64 | + |
| 65 | +Configure adapters in `app.config.ts` to deploy to platforms like Vercel, Netlify, Cloudflare, and others |
| 66 | + |
| 67 | +```ts |
| 68 | +import { defineConfig } from "@solidjs/start/config"; |
| 69 | + |
| 70 | +export default defineConfig({ |
| 71 | + ssr: true, // false for client-side rendering only |
| 72 | + server: { preset: "vercel" } |
| 73 | +}); |
| 74 | +``` |
| 75 | + |
| 76 | +Presets also include runtimes like Node.js, Bun or Deno. For example, a preset like `node-server` enables hosting on your server. |
| 77 | +Learn more about [`defineConfig`](https://docs.solidjs.com/solid-start/reference/config/define-config) |
| 78 | + |
| 79 | +## Building |
| 80 | + |
| 81 | +Generate production-ready bundles |
| 82 | + |
| 83 | +```bash |
| 84 | +npm run build # or pnpm build or bun build |
| 85 | +``` |
| 86 | + |
| 87 | +After the build completes, you’ll be guided through deployment for your specific preset. |
0 commit comments