Skip to content

Commit 5215eae

Browse files
katywingskatywings
committed
chore: implement solid example
1 parent ba5147a commit 5215eae

15 files changed

Lines changed: 1154 additions & 106 deletions

File tree

‎examples/vite-ssr-solidstart/README.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
Set up server-side rendering (SSR) with Solid, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
2+
3+
## Overview
4+
5+
1. Add the Nitro Vite plugin to your Vite config
6+
2. Create a server entry that renders your app to HTML
7+
3. Create a client entry that hydrates the server-rendered HTML
8+
9+
## 1. Configure Vite
10+
11+
Add the SolidStart and Nitro plugins to your Vite config.
12+
13+
```js [vite.config.ts]
14+
import { defineConfig } from "vite";
15+
import { solidStart } from "@solidjs/start/config";
16+
import { nitro } from "nitro/vite";
17+
18+
export default defineConfig({
19+
plugins: [solidStart(), nitro()],
20+
});
21+
```
22+
23+
## 2. Create the App Component
24+
25+
Create a shared Solid component that runs on both server and client:
26+
27+
```tsx [src/app.tsx]
28+
import { MetaProvider, Title } from "@solidjs/meta";
29+
import { Router } from "@solidjs/router";
30+
import { FileRoutes } from "@solidjs/start/router";
31+
import { Suspense } from "solid-js";
32+
33+
export default function App() {
34+
return (
35+
<Router
36+
root={(props) => (
37+
<MetaProvider>
38+
<Title>SolidStart - Basic</Title>
39+
<Suspense>{props.children}</Suspense>
40+
</MetaProvider>
41+
)}
42+
>
43+
<FileRoutes />
44+
</Router>
45+
);
46+
}
47+
```
48+
49+
## 3. Create the Server Entry
50+
51+
The server entry renders your Solid app to a streaming HTML response:
52+
53+
```tsx [src/entry-server.tsx]
54+
// @refresh reload
55+
import { createHandler, StartServer } from "@solidjs/start/server";
56+
57+
export default createHandler(() => (
58+
<StartServer
59+
document={({ assets, children, scripts }) => (
60+
<html lang="en">
61+
<head>
62+
<meta charset="utf-8" />
63+
<meta name="viewport" content="width=device-width, initial-scale=1" />
64+
<link rel="icon" href="/favicon.ico" />
65+
{assets}
66+
</head>
67+
<body>
68+
<div id="app">{children}</div>
69+
{scripts}
70+
</body>
71+
</html>
72+
)}
73+
/>
74+
));
75+
```
76+
77+
## 4. Create the Client Entry
78+
79+
The client entry hydrates the server-rendered HTML, attaching Solid's event handlers:
80+
81+
```tsx [src/entry-client.tsx]
82+
// @refresh reload
83+
import { mount, StartClient } from "@solidjs/start/client";
84+
85+
mount(() => <StartClient />, document.getElementById("app")!);
86+
```

‎examples/vite-ssr-solidstart/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"private": true,
3+
"type": "module",
4+
"scripts": {
5+
"dev": "vite dev",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"@solidjs/meta": "^0.29.4",
10+
"@solidjs/router": "^0.15.4",
11+
"@solidjs/start": "^2.0.0-alpha.2",
12+
"nitro": "^3.0.260311-beta",
13+
"solid-js": "^1.9.11",
14+
"vite": "^8.0.0"
15+
},
16+
"engines": {
17+
"node": ">=22"
18+
}
19+
}

‎examples/vite-ssr-solidstart/public/favicon.ico‎

664 Bytes
Binary file not shown.

‎examples/vite-ssr-solidstart/src/app.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
font-family:
3+
Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4+
}
5+
6+
a {
7+
margin-right: 1rem;
8+
}
9+
10+
main {
11+
text-align: center;
12+
padding: 1em;
13+
margin: 0 auto;
14+
}
15+
16+
h1 {
17+
color: #335d92;
18+
text-transform: uppercase;
19+
font-size: 4rem;
20+
font-weight: 100;
21+
line-height: 1.1;
22+
margin: 4rem auto;
23+
max-width: 14rem;
24+
}
25+
26+
p {
27+
max-width: 14rem;
28+
margin: 2rem auto;
29+
line-height: 1.35;
30+
}
31+
32+
@media (min-width: 480px) {
33+
h1 {
34+
max-width: none;
35+
}
36+
37+
p {
38+
max-width: none;
39+
}
40+
}

‎examples/vite-ssr-solidstart/src/app.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { MetaProvider, Title } from "@solidjs/meta";
2+
import { Router } from "@solidjs/router";
3+
import { FileRoutes } from "@solidjs/start/router";
4+
import { Suspense } from "solid-js";
5+
import "./app.css";
6+
7+
export default function App() {
8+
return (
9+
<Router
10+
root={(props) => (
11+
<MetaProvider>
12+
<Title>SolidStart - Basic</Title>
13+
<a href="/">Index</a>
14+
<a href="/about">About</a>
15+
<Suspense>{props.children}</Suspense>
16+
</MetaProvider>
17+
)}
18+
>
19+
<FileRoutes />
20+
</Router>
21+
);
22+
}

‎examples/vite-ssr-solidstart/src/components/Counter.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.increment {
2+
font-family: inherit;
3+
font-size: inherit;
4+
padding: 1em 2em;
5+
color: #335d92;
6+
background-color: rgba(68, 107, 158, 0.1);
7+
border-radius: 2em;
8+
border: 2px solid rgba(68, 107, 158, 0);
9+
outline: none;
10+
width: 200px;
11+
font-variant-numeric: tabular-nums;
12+
cursor: pointer;
13+
}
14+
15+
.increment:focus {
16+
border: 2px solid #335d92;
17+
}
18+
19+
.increment:active {
20+
background-color: rgba(68, 107, 158, 0.2);
21+
}

‎examples/vite-ssr-solidstart/src/components/Counter.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { createSignal } from "solid-js";
2+
import "./Counter.css";
3+
4+
export default function Counter() {
5+
const [count, setCount] = createSignal(0);
6+
return (
7+
<button class="increment" onClick={() => setCount(count() + 1)} type="button">
8+
Clicks: {count()}
9+
</button>
10+
);
11+
}

‎examples/vite-ssr-solidstart/src/entry-client.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// @refresh reload
2+
import { mount, StartClient } from "@solidjs/start/client";
3+
4+
mount(() => <StartClient />, document.getElementById("app")!);

‎examples/vite-ssr-solidstart/src/entry-server.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// @refresh reload
2+
import { createHandler, StartServer } from "@solidjs/start/server";
3+
4+
export default createHandler(() => (
5+
<StartServer
6+
document={({ assets, children, scripts }) => (
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<link rel="icon" href="/favicon.ico" />
12+
{assets}
13+
</head>
14+
<body>
15+
<div id="app">{children}</div>
16+
{scripts}
17+
</body>
18+
</html>
19+
)}
20+
/>
21+
));

‎examples/vite-ssr-solidstart/src/routes/[...404].tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Title } from "@solidjs/meta";
2+
import { HttpStatusCode } from "@solidjs/start";
3+
4+
export default function NotFound() {
5+
return (
6+
<main>
7+
<Title>Not Found</Title>
8+
<HttpStatusCode code={404} />
9+
<h1>Page Not Found</h1>
10+
<p>
11+
Visit{" "}
12+
<a href="https://start.solidjs.com" target="_blank">
13+
start.solidjs.com
14+
</a>{" "}
15+
to learn how to build SolidStart apps.
16+
</p>
17+
</main>
18+
);
19+
}

0 commit comments

Comments
 (0)