Project Structure

SolidBase Entry

The entry point for a SolidBase project is the vite.config.ts file located in the root of your project.

import { createSolidBase } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";
import solid from "@solidjs/vite-plugin";
import { defineConfig } from "vite";

const solidBase = createSolidBase(defaultTheme);

export default defineConfig({
  plugins: [
    solidBase.plugin({
      title: "SolidBase",
      description: "Fully featured, fully customisable static site generation for Solid",
    }),
    solid(solidBase.startConfig()),
  ],
});

After vite build, SolidBase prerenders every page into dist/client, which deploys as a static site (set prerender: false to deploy the server bundle instead).

Routing

SolidBase uses file-system routing (the convention SolidStart established, now provided router-neutrally by filesystem-routing). Using file-based routing is recommended for both management and performance reasons.

The src/routes directory is where you define your application's routes. Each file in this directory corresponds to a route in your application. For example, src/routes/index.mdx corresponds to the root route /, and src/routes/about.mdx corresponds to the /about route.

├─ src
│  ├─ routes
│  │  ├─ index.mdx
│  │  └─ about.mdx
│  ├─ app.tsx
│  └─ Document.tsx
└─ vite.config.ts

Full documentation and reference can be found in the Solid Router docs and the filesystem-routing README.