Home Original page

GitHub - lightyaer/solid-start: SolidStart, the Solid app framework

Solid Docs

Start has just entered a new Beta Phase

v0.4.x marks 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 Solid app framework. This is still a work in progress. Many features are missing or incomplete. Experimental status does not even mean beta status. Patch releases will break everything.

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 dev

Development

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.

Run 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

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):

If specifying "nohoist" options for a specific package using @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.