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.
8
10
9
-
## Features
11
+
Explore the official [documentation](https://docs.solidjs.com/solid-start) for detailed guides and examples.
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
+
## Core Features
24
14
25
-
### Getting started
15
+
-**All Rendering Modes**:
16
+
- Server-Side Rendering _(SSR)_ with sync, async, and stream [modes](https://docs.solidjs.com/solid-start/reference/server/create-handler)
17
+
- Client-Side Rendering _(CSR)_
18
+
- Static Site Generation _(SSG)_
19
+
-**TypeScript**: Full integration for robust, type-safe development
20
+
-**File-Based Routing**: Intuitive routing based on your project’s file structure
21
+
-**API Routes**: Dedicated server-side endpoints for seamless API development
22
+
-**Streaming**: Efficient data rendering for faster page loads
23
+
-**Build Optimizations**: Code splitting, tree shaking, and dead code elimination
24
+
-**Deployment Adapters**: Easily deploy to platforms like Vercel, Netlify, Cloudflare, and more
26
25
27
-
Create a SolidStart application and run a development server using your preferred package manager:
26
+
## Getting Started
27
+
28
+
### Installation
29
+
30
+
Create a template project with your preferred package manager
28
31
29
32
```bash
30
-
mkdir my-app
31
-
cd my-app
33
+
# using npm
34
+
npm create solid@latest -- --solidstart
35
+
```
32
36
33
-
# with npm
34
-
npm init solid@latest
35
-
npm install
36
-
npm run dev
37
+
```bash
38
+
# using pnpm
39
+
pnpm create solid@latest --solidstart
40
+
```
37
41
38
-
# or with pnpm
39
-
pnpm create solid@latest
40
-
pnpm install
41
-
pnpm dev
42
+
```bash
43
+
# using bun
44
+
bun create solid@latest --solidstart
45
+
```
46
+
47
+
1. Follow the CLI prompts to set up your project
48
+
2. Navigate to your project directory and install the dependencies
42
49
43
-
# or with Bun
44
-
bun create solid@latest
45
-
bun install
46
-
bun dev
50
+
```bash
51
+
cd<project-name>
52
+
npm install # or pnpm install or bun install
47
53
```
48
54
49
-
### Development
55
+
3. Start the development server
50
56
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)
57
+
```bash
58
+
npm run dev # or pnpm dev or bun dev
59
+
```
52
60
53
-
The monorepo uses `pnpm` as the package manager. To install `pnpm`, run the following command in your terminal.
61
+
### Project Structure
62
+
63
+
-`public/`: Static assets like icons, images, and fonts
Use a Node.js version manager compatible with `.node-version`. We recommend [asdf-vm](https://asdf-vm.com/) for macOS and Linux users.
111
+
112
+
### Monorepo & Package Manager
113
+
114
+
SolidStart uses `pnpm` as the package manager. Install it globally:
115
+
116
+
```bash
117
+
npm install -g pnpm
118
+
```
119
+
120
+
Install dependencies for the monorepo:
121
+
122
+
```bash
123
+
pnpm install
124
+
```
65
125
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.
126
+
Build the project:
127
+
128
+
```bash
129
+
pnpm build
130
+
```
67
131
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._
132
+
### Monorepo & `package.json` Workspaces
69
133
70
-
For example, if specifying `"nohoist"` options from the workspace root (i.e. for all packages):
134
+
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:
135
+
136
+
**Workspace Root Example**:
71
137
72
138
```jsonc
73
-
// in workspace root
74
139
{
75
140
"workspaces": {
76
141
"packages": [
@@ -81,32 +146,26 @@ For example, if specifying `"nohoist"` options from the workspace root (i.e. for
81
146
}
82
147
```
83
148
84
-
If specifying `"nohoist"` options for a specific package using `@solidjs/start`:
149
+
**Project Root Example**:
85
150
86
151
```jsonc
87
-
// in project root of a workspace child
88
152
{
89
153
"workspaces": {
90
154
"nohoist": ["@solidjs/start"]
91
155
}
92
156
}
93
157
```
94
158
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.
159
+
For **Yarn v2+**, use `installConfig` to prevent hoisting:
102
160
103
161
```jsonc
104
-
// in project root of a workspace child
105
162
{
106
163
"installConfig": {
107
164
"hoistingLimits":"dependencies"
108
165
}
109
166
}
110
167
```
111
168
169
+
**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