app.config.ts

app.config.ts is where you configure your application.

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  vite: {
    // vite options
    plugins: []
  },
  server: {
    preset: "netlify"
  }
});

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  vite: {
    // vite options
    plugins: []
  },
  server: {
    preset: "netlify"
  }
});

Usage

Configuring your application

SolidStart is built on top of Vinxi which combines the power of Vite and Nitro.

The core configuration used by SolidStart is found at @solidjs/start/config.

SolidStart supports most vite options, including plugins via the vite option:

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  vite: {
    // vite options
    plugins: []
  }
});

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  vite: {
    // vite options
    plugins: []
  }
});

The vite option can also be a function which can be customized for each Vinxi router. In SolidStart we use 3, server for SSR, client for the browser, and server-function for server functions.

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  vite({ router }) {
    if (router === "server") {
    } else if (router === "client") {
    } else if (router === "server-function") {
    }
    return { plugins: [] };
  }
});

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  vite({ router }) {
    if (router === "server") {
    } else if (router === "client") {
    } else if (router === "server-function") {
    }
    return { plugins: [] };
  }
});

SolidStart uses Nitro which can run on a number of platforms. The server option exposes some Nitro options including deployment presets.

• Node
• Static hosting
• Netlify Functions & Edge
• Vercel Functions & Edge
• AWS Lambda & Lambda@Edge
• Cloudflare Workers & Pages
• Deno Deploy

The simplest usage is passing no arguments, which defaults to the Node preset. Some presets may be autodetected by the provider. Otherwise they must added to the configuration via the server.preset option. For example, this uses Netlify Edge:

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  server: {
    preset: "netlify_edge"
  }
});

tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  server: {
    preset: "netlify_edge"
  }
});

Special Note

SolidStart uses Async Local Storage. Not all non-node platforms support it out of the box. Netlify, Vercel, and Deno should just work. But for Cloudflare you will need specific config:

js
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  server: {
    preset: "cloudflare_module",
    rollupConfig: {
      external: ["__STATIC_CONTENT_MANIFEST", "node:async_hooks"]
    }
  }
});

js
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
  server: {
    preset: "cloudflare_module",
    rollupConfig: {
      external: ["__STATIC_CONTENT_MANIFEST", "node:async_hooks"]
    }
  }
});

And enable node compat in your wrangler.toml.

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

Reference

@solidjs/start/config

The vite options are same as the default with exception of the start property exposes the following options:

• server (object): Nitro server config options
• appRoot (string, default "./src"): Sets the root of the application code.
• routesDir (string, default "./routes"): The path to where the routes are located.
• ssr (boolean | "sync" | "async", default true): Providing a boolean value will toggle between client rendering and streaming server rendering (ssr) mode, while "sync" and "async" will render using Solid's renderToString and renderToStringAsync respectively.
• experimental.islands (boolean, default false): experimental toggles on "islands" mode.