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 synchronous, asynchronous, and streaming options
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
+
# With npm
32
+
npm create solid
33
+
# With pnpm
34
+
pnpm create solid --solidstart
35
+
# With bun
36
+
bun create solid
37
+
```
32
38
33
-
# with npm
34
-
npm init solid@latest
35
-
npm install
36
-
npm run dev
39
+
1. Follow the CLI prompts to set up your project.
40
+
2. Navigate to your project directory and install dependencies:
37
41
38
-
# or with pnpm
39
-
pnpm create solid@latest
40
-
pnpm install
41
-
pnpm dev
42
+
```bash
43
+
cd<project-name>
44
+
npm install # or pnpm install or bun install
45
+
```
46
+
47
+
3. Start the development server:
42
48
43
-
# or with Bun
44
-
bun create solid@latest
45
-
bun install
46
-
bun dev
49
+
```bash
50
+
npm run dev # or pnpm dev or bun dev
47
51
```
48
52
49
-
### Development
53
+
### Project Structure
54
+
55
+
-`public/`: Static assets like icons, images, and fonts
-**Configuration Files**: `app.config.ts`, `package.json`, and more
62
+
63
+
Learn more about routing in the [documentation](https://docs.solidjs.com/solid-start/building-your-application/routing).
50
64
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)
65
+
## Configuration
52
66
53
-
The monorepo uses `pnpm` as the package manager. To install `pnpm`, run the following command in your terminal.
67
+
Configure adapters in `app.config.ts` to deploy to platforms like Vercel, Netlify, Cloudflare, and others:
ssr: true, // Set to false for client-side rendering
74
+
server: { preset: "vercel" },
75
+
});
76
+
```
77
+
78
+
Presets also support 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).
79
+
80
+
## Building for Production
81
+
82
+
Generate production-ready bundles:
54
83
55
84
```bash
56
-
npm install -g pnpm
85
+
npm run build # or pnpm build or bun build
57
86
```
58
87
59
-
Run `pnpm install` to install all the dependencies for the packages and examples in your monorepo.
88
+
The output is saved to the `dist/` directory. Then, start the server:
89
+
90
+
```bash
91
+
npm start # or pnpm start or bun start
92
+
```
93
+
94
+
## Contributing
95
+
96
+
Join the SolidJS community and contribute!
60
97
61
-
Run `pnpm build` to build SolidStart project
98
+
-[Discord](https://discord.com/invite/solidjs): Ask for help and discuss ideas
99
+
-[Issues](https://github.com/solidjs/solid-start/issues): Report bugs or suggest features
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.
105
+
Use a Node.js version manager compatible with `.node-version`. We recommend [asdf-vm](https://asdf-vm.com/)for macOS and Linux users.
67
106
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._
107
+
### Monorepo & Package Manager
69
108
70
-
For example, if specifying `"nohoist"` options from the workspace root (i.e. for all packages):
109
+
SolidStart uses `pnpm` as the package manager. Install it globally:
110
+
111
+
```bash
112
+
npm install -g pnpm
113
+
```
114
+
115
+
Install dependencies for the monorepo:
116
+
117
+
```bash
118
+
pnpm install
119
+
```
120
+
121
+
Build the project:
122
+
123
+
```bash
124
+
pnpm build
125
+
```
126
+
127
+
### Monorepo & `package.json` Workspaces
128
+
129
+
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:
130
+
131
+
**Workspace Root Example**:
71
132
72
133
```jsonc
73
-
// in workspace root
74
134
{
75
135
"workspaces": {
76
136
"packages": [
@@ -81,32 +141,26 @@ For example, if specifying `"nohoist"` options from the workspace root (i.e. for
81
141
}
82
142
```
83
143
84
-
If specifying `"nohoist"` options for a specific package using `@solidjs/start`:
144
+
**Project Root Example**:
85
145
86
146
```jsonc
87
-
// in project root of a workspace child
88
147
{
89
148
"workspaces": {
90
149
"nohoist": ["@solidjs/start"]
91
150
}
92
151
}
93
152
```
94
153
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.
154
+
For **Yarn v2+**, use `installConfig` to prevent hoisting:
102
155
103
156
```jsonc
104
-
// in project root of a workspace child
105
157
{
106
158
"installConfig": {
107
159
"hoistingLimits":"dependencies"
108
160
}
109
161
}
110
162
```
111
163
164
+
**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