Project Structure

SolidBase Entry

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

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

import { createWithSolidBase } from "@kobalte/solidbase";


export default defineConfig(
  createWithSolidBase(theme)(
    /* SolidStart options */
    {
      ssr: true,
      server: {
        prerender: {
          crawlLinks: true,
        },
      },
      ...
    },
    /* SolidBase options */
    {
      title: "SolidBase",
      description: "Fully featured, fully customisable static site generation for SolidStart",
      ...
    }
  )
);

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

import { createWithSolidBase } from "@kobalte/solidbase";


export default defineConfig(
  createWithSolidBase(theme)(
    /* SolidStart options */
    {
      ssr: true,
      server: {
        prerender: {
          crawlLinks: true,
        },
      },
      ...
    },
    /* SolidBase options */
    {
      title: "SolidBase",
      description: "Fully featured, fully customisable static site generation for SolidStart",
      ...
    }
  )
);

Routing

Since SolidBase is built on top of SolidStart, it uses the same file based routing system. 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
│  ├─ entry-client.tsx
│  └─ entry-server.tsx
└─ app.config.ts

Full documentation and reference can be found in the SolidStart docs.

Last updated: 10/13/25, 4:43 PM

Edit this page on GitHub