You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is the home of the SolidStart, the Solid app framework.
9
+
**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. Explore the official [documentation](https://docs.solidjs.com/solid-start) for detailed guides and examples.
8
10
9
-
## Features
11
+
## Core Features
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
+
-**All Rendering Modes**:
14
+
- Server-Side Rendering (SSR) with sync, async, and stream [modes](https://docs.solidjs.com/solid-start/reference/server/create-handler).
15
+
- Client-Side Rendering (CSR)
16
+
- Static Site Generation (SSG)
17
+
-**TypeScript**: Full integration for robust, type-safe development
18
+
-**File-Based Routing**: Intuitive routing based on your project’s file structure
19
+
-**API Routes**: Dedicated server-side endpoints for seamless API development
20
+
-**Streaming**: Efficient data rendering for faster page loads
21
+
-**Build Optimizations**: Code splitting, tree shaking, and dead code elimination
22
+
-**Deployment Adapters**: Easily deploy to platforms like Vercel, Netlify, Cloudflare, and more
24
23
25
-
###Getting started
24
+
## Getting Started
26
25
27
-
Create a SolidStart application and run a development server using your preferred package manager:
26
+
### Installation
27
+
28
+
Create a template project with your preferred package manager:
28
29
29
30
```bash
30
-
mkdir my-app
31
-
cd my-app
31
+
# using npm
32
+
npm create solid@latest -- --solidstart
32
33
33
-
# with npm
34
-
npm init solid@latest
35
-
npm install
36
-
npm run dev
34
+
# using pnpm
35
+
pnpm create solid@latest --solidstart
37
36
38
-
# or with pnpm
39
-
pnpm create solid@latest
40
-
pnpm install
41
-
pnpm dev
37
+
# using bun
38
+
bun create solid@latest --solidstart
39
+
```
40
+
41
+
1. Follow the CLI prompts to set up your project.
42
+
2. Navigate to your project directory and install dependencies:
43
+
44
+
```bash
45
+
cd<project-name>
46
+
npm install # or pnpm install or bun install
47
+
```
48
+
49
+
3. Start the development server:
50
+
51
+
```bash
52
+
npm run dev # or pnpm dev or bun dev
53
+
```
42
54
43
-
# or with Bun
44
-
bun create solid@latest
45
-
bun install
46
-
bun dev
55
+
### Project Structure
56
+
57
+
-`public/`: Static assets like icons, images, and fonts
Presets also include runtimes like Node.js, Bun or Deno. For example, the `node-server` preset enables hosting on your server. Learn more about [`defineConfig`](https://docs.solidjs.com/solid-start/reference/config/define-config).
50
81
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)
82
+
## Building for Production
52
83
53
-
The monorepo uses `pnpm` as the package manager. To install `pnpm`, run the following command in your terminal.
84
+
Generate production-ready bundles:
54
85
55
86
```bash
56
-
npm install -g pnpm
87
+
npm run build # or pnpm build or bun build
88
+
```
89
+
90
+
The output is saved to the `dist/` directory. Then, start the server:
91
+
92
+
```bash
93
+
npm start # or pnpm start or bun start
57
94
```
58
95
59
-
Run `pnpm install` to install all the dependencies for the packages and examples in your monorepo.
96
+
## Contributing
60
97
61
-
Run `pnpm build` to build SolidStart project
98
+
Join the SolidJS community and contribute!
99
+
100
+
-[Discord](https://discord.com/invite/solidjs): Ask for help and discuss ideas
101
+
-[Issues](https://github.com/solidjs/solid-start/issues): Report bugs or suggest features
Use a Node.js version manager compatible with `.node-version`. We recommend [asdf-vm](https://asdf-vm.com/) for macOS and Linux users.
108
+
109
+
### Monorepo & Package Manager
65
110
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.
111
+
SolidStart uses `pnpm` as the package manager. Install it globally:
67
112
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._
113
+
```bash
114
+
npm install -g pnpm
115
+
```
116
+
117
+
Install dependencies for the monorepo:
118
+
119
+
```bash
120
+
pnpm install
121
+
```
69
122
70
-
For example, if specifying `"nohoist"` options from the workspace root (i.e. for all packages):
123
+
Build the project:
124
+
125
+
```bash
126
+
pnpm build
127
+
```
128
+
129
+
### Monorepo & `package.json` Workspaces
130
+
131
+
If using a monorepo with `package.json``"workspaces"` (e.g., [Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)), ensure `@solidjs/start` is not hoisted. Add it to the `"nohoist"` field in the workspace root or project root:
132
+
133
+
**Workspace Root Example**:
71
134
72
135
```jsonc
73
-
// in workspace root
74
136
{
75
137
"workspaces": {
76
138
"packages": [
@@ -81,32 +143,26 @@ For example, if specifying `"nohoist"` options from the workspace root (i.e. for
81
143
}
82
144
```
83
145
84
-
If specifying `"nohoist"` options for a specific package using `@solidjs/start`:
146
+
**Project Root Example**:
85
147
86
148
```jsonc
87
-
// in project root of a workspace child
88
149
{
89
150
"workspaces": {
90
151
"nohoist": ["@solidjs/start"]
91
152
}
92
153
}
93
154
```
94
155
95
-
Regardless of where you specify the `nohoist` option, you also need to include `@solidjs/start` as a `devDependency` in the child `package.json`.
96
-
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.
98
-
99
-
**Yarn v2 or higher**
100
-
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.
156
+
For **Yarn v2+**, use `installConfig` to prevent hoisting:
102
157
103
158
```jsonc
104
-
// in project root of a workspace child
105
159
{
106
160
"installConfig": {
107
161
"hoistingLimits":"dependencies"
108
162
}
109
163
}
110
164
```
111
165
166
+
**Note**: Add `@solidjs/start` as a `devDependency` in the child `package.json` to ensure the `/node_modules/@solidjs/start/runtime/entry.jsx` script is available.
0 commit comments