solidstart-entrypoints
SolidStart entrypoints: app.tsx for isomorphic root, entry-client.tsx for browser initialization, entry-server.tsx for SSR setup, app.config.ts for build configuration.
Best use case
solidstart-entrypoints is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
SolidStart entrypoints: app.tsx for isomorphic root, entry-client.tsx for browser initialization, entry-server.tsx for SSR setup, app.config.ts for build configuration.
Teams using solidstart-entrypoints should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/solidstart-entrypoints/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How solidstart-entrypoints Compares
| Feature / Agent | solidstart-entrypoints | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
SolidStart entrypoints: app.tsx for isomorphic root, entry-client.tsx for browser initialization, entry-server.tsx for SSR setup, app.config.ts for build configuration.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# SolidStart Entrypoints
Complete guide to customizing SolidStart entrypoints. Entrypoints control how your app initializes on both client and server.
## app.tsx - Isomorphic Root
The `App` component is the isomorphic (shared on server and browser) entry point. This is where code runs on both sides.
### Basic Example (with Routing)
```tsx
import { A, Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
export default function App() {
return (
<Router
root={(props) => (
<>
<nav>
<A href="/">Index</A>
<A href="/about">About</A>
</nav>
<Suspense>{props.children}</Suspense>
</>
)}
>
<FileRoutes />
</Router>
);
}
```
**Critical:** Always wrap router root with `<Suspense>` - routes are lazy-loaded.
### Bare Example (no routing)
```tsx
export default function App() {
return (
<main>
<h1>Hello world!</h1>
</main>
);
}
```
**Key points:**
- Runs on both server and client
- Define router setup here
- Add global layouts, providers, context
- Shared initialization logic
## entry-client.tsx - Browser Entry
`entry-client.tsx` is where the application starts in the browser. It mounts the app to the DOM.
### Basic Setup
```tsx
import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!);
```
### Custom Client Initialization
```tsx
import { mount, StartClient } from "@solidjs/start/client";
// Register service workers
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
// Client-only initialization
console.log("Client starting");
mount(() => <StartClient />, document.getElementById("app")!);
```
**Use cases:**
- Service worker registration
- Client-only initialization
- Browser API setup
- Analytics initialization
- Client-side routing setup
**Important:** This file runs only in the browser, not on the server.
## entry-server.tsx - Server Entry
`entry-server.tsx` is where the application starts on the server. It defines the HTML document structure.
### Basic Setup
```tsx
import { createHandler, StartServer } from "@solidjs/start/server";
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));
```
### Custom Document Structure
```tsx
import { createHandler, StartServer } from "@solidjs/start/server";
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="My SolidStart app" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/styles.css" />
{assets}
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));
```
### SSR Modes
Configure SSR mode in `createHandler`:
```tsx
import { createHandler, StartServer } from "@solidjs/start/server";
// Sync SSR (default)
export default createHandler(() => <StartServer document={...} />);
// Async SSR
export default createHandler(
() => <StartServer document={...} />,
{ mode: "async" }
);
// Streaming SSR
export default createHandler(
() => <StartServer document={...} />,
{ mode: "stream" }
);
```
**Document props:**
- `assets`: CSS and other asset links
- `children`: Rendered app content
- `scripts`: JavaScript bundles
## app.config.ts - Build Configuration
The `app.config.ts` is the root configuration file for SolidStart, Vinxi, Vite, and Nitro.
### Basic Configuration
```tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({});
```
### Advanced Configuration
```tsx
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
server: {
preset: "node-server", // or "vercel", "netlify", etc.
},
vite: {
// Vite configuration
build: {
target: "esnext",
},
},
nitro: {
// Nitro configuration
preset: "node-server",
},
});
```
**Configuration options:**
- `server`: Server preset and settings
- `vite`: Vite build configuration
- `nitro`: Nitro server configuration
- `router`: Router configuration
- `ssr`: SSR mode settings
## Common Patterns
### Adding Global Providers
```tsx
// app.tsx
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { ThemeProvider } from "./contexts/ThemeContext";
export default function App() {
return (
<ThemeProvider>
<Router root={(props) => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
</ThemeProvider>
);
}
```
### Custom Error Boundaries
```tsx
// app.tsx
import { ErrorBoundary } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
export default function App() {
return (
<ErrorBoundary fallback={(err) => <div>Error: {err.toString()}</div>}>
<Router root={(props) => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
</ErrorBoundary>
);
}
```
### Service Worker Registration
```tsx
// entry-client.tsx
import { mount, StartClient } from "@solidjs/start/client";
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("/sw.js")
.then((registration) => {
console.log("SW registered:", registration);
})
.catch((error) => {
console.log("SW registration failed:", error);
});
});
}
mount(() => <StartClient />, document.getElementById("app")!);
```
### Custom HTML Document
```tsx
// entry-server.tsx
import { createHandler, StartServer } from "@solidjs/start/server";
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My App</title>
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));
```
### Environment-Specific Configuration
```tsx
// app.config.ts
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
server: {
preset: process.env.NODE_ENV === "production"
? "node-server"
: "node-dev",
},
vite: {
server: {
port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
},
},
});
```
## File Structure
```
src/
├── app.tsx # Isomorphic root component
├── entry-client.tsx # Browser entry point
├── entry-server.tsx # Server entry point
app.config.ts # Build configuration
```
## Best Practices
1. **Keep app.tsx isomorphic:**
- Don't use browser-only APIs
- Use `isServer` checks if needed
- Shared logic only
2. **Client-only code in entry-client.tsx:**
- Service workers
- Browser APIs
- Client-side analytics
3. **Server-only code in entry-server.tsx:**
- HTML document structure
- Meta tags
- Server-side initialization
4. **Configuration in app.config.ts:**
- Build settings
- Server presets
- Vite/Nitro config
5. **Always wrap router with Suspense:**
- Routes are lazy-loaded
- Suspense handles loading states
## Summary
- **app.tsx**: Isomorphic root, router setup, global providers
- **entry-client.tsx**: Browser initialization, service workers
- **entry-server.tsx**: HTML document structure, SSR setup
- **app.config.ts**: Build and server configurationRelated Skills
solidstart-hydration-guard
SolidStart hydration guard: keep SSR/CSR output identical, gate browser-only APIs, use stable IDs, align Suspense/resource fallbacks, and use clientOnly/onMount for client-only UI.
solidstart-websocket
SolidStart WebSocket: experimental WebSocket endpoints, connection handling, message events, real-time communication, bidirectional data flow.
solidstart-api-routes
SolidStart API routes: export GET/POST/PATCH/DELETE functions, handle APIEvent with request/params/fetch, GraphQL and tRPC integration, session management.
solidstart-optimistic-ui
SolidStart optimistic UI: use useSubmissions to show pending data immediately, combine server data with pending submissions, filter by pending state, handle rollback on errors.
solidstart-middleware-auth
SolidStart middleware, sessions, authentication: createMiddleware with onRequest/onBeforeResponse, useSession for cookies, protected routes, WebSocket endpoints.
solidstart-data-mutation
SolidStart data mutation: form submissions with actions, validation, error handling, pending states, optimistic UI, redirects, database operations, programmatic triggers.
solidstart-advanced-server
SolidStart advanced server: getRequestEvent for request context, static assets handling, returning responses, request events and nativeEvent access.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
agile-product-owner
Agile product ownership toolkit for Senior Product Owner including INVEST-compliant user story generation, sprint planning, backlog management, and velocity tracking. Use for story writing, sprint planning, stakeholder communication, and agile ceremonies.
agile-planning
Generate agile release plans with sprints and roadmaps using unique sprint codes. Use when creating sprint schedules, product roadmaps, release planning, or when user mentions agile planning, sprints, roadmap, or release plans.
agent-product-manager
Expert product manager specializing in product strategy, user-centric development, and business outcomes. Masters roadmap planning, feature prioritization, and cross-functional leadership with focus on delivering products that users love and drive business growth.
ae-sdd-discovery
Discover high-level architectural requirements for change-set specs