Getting started

The easiest way to start a new SolidStart project is with create-solid. SolidStart v2 requires Node.js 24 or newer.

Create a project

Create a new app with the Solid scaffolding tool:

npm init solid

pnpm create solid

yarn create solid

bun create solid

deno init --npm solid

Follow the interactive prompts and choose the SolidStart template or an official example that matches your use case.

After the project is created, install dependencies:

npm i

pnpm i

yarn i

bun i

deno i

Then start the development server:

npm run dev

pnpm dev

yarn dev

bun run dev

deno run dev

Configuration

Configuration lives in vite.config.ts. SolidStart configures the application and Nitro v3 supplies the server and deployment integration.

import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
import { solidStart } from "@solidjs/start/config";

export default defineConfig({
  plugins: [solidStart(), nitro()],
});

If your app already has middleware, solidStart() also accepts a middleware option:

import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
import { solidStart } from "@solidjs/start/config";

export default defineConfig({
  plugins: [solidStart({ middleware: "./src/middleware/index.ts" }), nitro()],
});

Use the top-level nitro property for Nitro options such as deployment presets, prerendering, tasks, and WebSockets.

Path alias

SolidStart provides a built-in ~ alias for the application root. With the default appRoot, an import from ~/lib/db resolves to src/lib/db.

import { db } from "~/lib/db";

During development, SolidStart adds a toolbar for inspecting application errors and server function calls. The toolbar is not included in production builds.

To hide it during development, set devOverlay to false:

solidStart({ devOverlay: false });

Start adding routes

The filesystem router reads files from your routes directory and turns them into UI routes or API routes. For example:

src/routes/index.tsx becomes /
src/routes/about.tsx becomes /about
src/routes/api/ping.ts can expose /api/ping

Read Routing next if you want the exact filename conventions.

Type support

Environment types ship in @solidjs/start/env. Add it to your TypeScript config if your template has not already done so.

{
  "compilerOptions": {
    "types": ["@solidjs/start/env"]
  }
}

If you are migrating an existing app instead of creating a new one, continue with Migrating from v1.