SolidStart
SolidStart has just entered a new Release Candidate Phase
v0.4.x marked a significant change in the project. Please check the updated docs and example projects to see how things have changed. A summary of the changes can be found in the RFC.
This is the home of the SolidStart, the Solid app framework.
Features
- File-system based routing
- Supports all rendering modes:
- Server-side rendering (SSR)
- Streaming SSR
- Client-side rendering (CSR)
- Static site generation (SSG)
- Streaming
- Build optimizations with code splitting, tree shaking and dead code elimination
- API Routes
- Built on Web standards like Fetch, Streams, and WebCrypto
- Adapters for deployment to all popular platforms
- CSS Modules, SASS/SCSS Support
- TypeScript-first
Getting started
Create a SolidStart application and run a development server using your preferred package manager:
mkdir my-app
cd my-app
# with npm
npm init solid@latest
npm install
npm run dev
# or with pnpm
pnpm create solid@latest
pnpm install
pnpm dev
# or with Bun
bun create solid@latest
bun install
bun run devDevelopment
You should use a Node.js version manager compatible with .node-version (asdf-vm is a great option macOS/Linux users)
The monorepo uses pnpm as the package manager. To install pnpm, run the following command in your terminal.
npm install -g pnpmRun pnpm install to install all the dependencies for the packages and examples in your monorepo.
Run pnpm build to build SolidStart project
Monorepo & project.json "workspace" support
Monorepo & project.json "workspace" support
If you are using SolidStart within a monorepo that takes advantage of the package.json "workspaces" property (e.g. Yarn 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.
- 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.
For example, if specifying "nohoist" options from the workspace root (i.e. for all packages):
// in workspace root
{
"workspaces": {
"packages": [
/* ... */
],
"nohoist": ["**/@solidjs/start"]
}
}If specifying "nohoist" options for a specific package using @solidjs/start:
// in project root of a workspace child
{
"workspaces": {
"nohoist": ["@solidjs/start"]
}
}Regardless of where you specify the nohoist option, you also need to include @solidjs/start as a devDependency in the child package.json.
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.
Yarn v2 or higher
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.
// in project root of a workspace child
{
"installConfig": {
"hoistingLimits": "dependencies"
}
}