|
1 | | -<p> |
2 | | - <img width="100%" src="https://assets.solidjs.com/banner?project=Start&type=core" alt="Solid Docs"> |
3 | | -</p> |
| 1 | +[](https://github.com/solidjs) |
4 | 2 |
|
5 | | -# SolidStart |
| 3 | +<div align="center"> |
6 | 4 |
|
7 | | -This is the home of the SolidStart, the Solid app framework. |
| 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) |
8 | 10 |
|
9 | | -## Features |
| 11 | +</div> |
10 | 12 |
|
11 | | -- File-system based routing |
12 | | -- Supports all rendering modes: |
13 | | - - Server-side rendering (SSR) |
14 | | - - Streaming SSR |
15 | | - - Client-side rendering (CSR) |
16 | | - - Static site generation (SSG) |
17 | | -- Streaming |
18 | | -- Build optimizations with code splitting, tree shaking and dead code elimination |
19 | | -- API Routes |
20 | | -- Built on Web standards like Fetch, Streams, and WebCrypto |
21 | | -- Adapters for deployment to all popular platforms |
22 | | -- CSS Modules, SASS/SCSS Support |
23 | | -- TypeScript-first |
| 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. |
24 | 14 |
|
25 | | -### Getting started |
| 15 | +Explore the official [documentation](https://docs.solidjs.com/solid-start) for detailed guides and examples. |
26 | 16 |
|
27 | | -Create a SolidStart application and run a development server using your preferred package manager: |
| 17 | +## Core Features |
28 | 18 |
|
29 | | -```bash |
30 | | -mkdir my-app |
31 | | -cd my-app |
32 | | - |
33 | | -# with npm |
34 | | -npm init solid@latest |
35 | | -npm install |
36 | | -npm run dev |
37 | | - |
38 | | -# or with pnpm |
39 | | -pnpm create solid@latest |
40 | | -pnpm install |
41 | | -pnpm dev |
42 | | - |
43 | | -# or with Bun |
44 | | -bun create solid@latest |
45 | | -bun install |
46 | | -bun dev |
47 | | -``` |
| 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 |
48 | 29 |
|
49 | | -### Development |
| 30 | +## Getting Started |
50 | 31 |
|
51 | | -You should use a Node.js version manager [compatible with `.node-version`](https://stackoverflow.com/a/62978089/565877) ([asdf-vm](https://asdf-vm.com/) is a great option macOS/Linux users) |
| 32 | +### Installation |
52 | 33 |
|
53 | | -The monorepo uses `pnpm` as the package manager. To install `pnpm`, run the following command in your terminal. |
| 34 | +Create a SolidStart template project with your preferred package manager |
54 | 35 |
|
55 | 36 | ```bash |
56 | | -npm install -g pnpm |
| 37 | +# using npm |
| 38 | +npm create solid@latest -- -s |
57 | 39 | ``` |
58 | 40 |
|
59 | | -Run `pnpm install` to install all the dependencies for the packages and examples in your monorepo. |
| 41 | +```bash |
| 42 | +# using pnpm |
| 43 | +pnpm create solid@latest -s |
| 44 | +``` |
60 | 45 |
|
61 | | -Run `pnpm build` to build SolidStart project |
| 46 | +```bash |
| 47 | +# using bun |
| 48 | +bun create solid@latest --s |
| 49 | +``` |
62 | 50 |
|
63 | | -<details> |
64 | | -<summary><h4>Monorepo & <code>project.json</code> <code>"workspace"</code> support</h4></summary> |
| 51 | +### Project Structure |
65 | 52 |
|
66 | | -If you are using SolidStart within a monorepo that takes advantage of the `package.json` `"workspaces"` property (e.g. [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)) with hoisted dependencies (the default for Yarn), you must include `#solidjs/start` within the optional `"nohoist"` (for Yarn v2 or higher, see further down for instructions) workspaces property. |
| 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 |
67 | 60 |
|
68 | | -- _In the following, "workspace root" refers to the root of your repository while "project root" refers to the root of a child package within your repository._ |
| 61 | +Learn more about [routing](https://docs.solidjs.com/solid-start/building-your-application/routing) |
69 | 62 |
|
70 | | -For example, if specifying `"nohoist"` options from the workspace root (i.e. for all packages): |
| 63 | +## Adapters |
71 | 64 |
|
72 | | -```jsonc |
73 | | -// in workspace root |
74 | | -{ |
75 | | - "workspaces": { |
76 | | - "packages": [ |
77 | | - /* ... */ |
78 | | - ], |
79 | | - "nohoist": ["**/@solidjs/start"] |
80 | | - } |
81 | | -} |
82 | | -``` |
| 65 | +Configure adapters in `app.config.ts` to deploy to platforms like Vercel, Netlify, Cloudflare, and others |
83 | 66 |
|
84 | | -If specifying `"nohoist"` options for a specific package using `@solidjs/start`: |
| 67 | +```ts |
| 68 | +import { defineConfig } from "@solidjs/start/config"; |
85 | 69 |
|
86 | | -```jsonc |
87 | | -// in project root of a workspace child |
88 | | -{ |
89 | | - "workspaces": { |
90 | | - "nohoist": ["@solidjs/start"] |
91 | | - } |
92 | | -} |
| 70 | +export default defineConfig({ |
| 71 | + ssr: true, // false for client-side rendering only |
| 72 | + server: { preset: "vercel" } |
| 73 | +}); |
93 | 74 | ``` |
94 | 75 |
|
95 | | -Regardless of where you specify the `nohoist` option, you also need to include `@solidjs/start` as a `devDependency` in the child `package.json`. |
| 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) |
96 | 78 |
|
97 | | -The reason why this is necessary is because `@solidjs/start` creates an `index.html` file within your project which expects to load a script located in `/node_modules/@solidjs/start/runtime/entry.jsx` (where `/` is the path of your project root). By default, if you hoist the `@solidjs/start` dependency into the workspace root then that script will not be available within the package's `node_modules` folder. |
| 79 | +## Building |
98 | 80 |
|
99 | | -**Yarn v2 or higher** |
| 81 | +Generate production-ready bundles |
100 | 82 |
|
101 | | -The `nohoist` option is no longer available in Yarn v2+. In this case, we can use the `installConfig` property in the `package.json` (either workspace package or a specific project package) to make sure our deps are not hoisted. |
102 | | - |
103 | | -```jsonc |
104 | | -// in project root of a workspace child |
105 | | -{ |
106 | | - "installConfig": { |
107 | | - "hoistingLimits": "dependencies" |
108 | | - } |
109 | | -} |
| 83 | +```bash |
| 84 | +npm run build # or pnpm build or bun build |
110 | 85 | ``` |
111 | 86 |
|
112 | | -</details> |
| 87 | +After the build completes, you’ll be guided through deployment for your specific preset. |
0 commit comments