boilerplate Vite w/ vite-plugin-ssr

Author: Romuald Brillout

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package.json

@@ -0,0 +1,28 @@
+{
+  "scripts": {
+    "dev": "npm run server",
+    "prod": "npm run build && npm run server:prod",
+    "build": "vite build",
+    "server": "ts-node ./server/index.ts",
+    "server:prod": "cross-env NODE_ENV=production ts-node ./server/index.ts"
+  },
+  "dependencies": {
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.14",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "@vitejs/plugin-react": "^3.0.0",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "express": "^4.18.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sirv": "^2.0.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.3",
+    "vite-plugin-ssr": "^0.4.112"
+  },
+  "type": "module"
+}

pages/about/code.css

@@ -0,0 +1,6 @@
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}

pages/about/index.page.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import './code.css'
+
+export { Page }
+
+function Page() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>
+        Example of using <code>vite-plugin-ssr</code>.
+      </p>
+    </>
+  )
+}

pages/index/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react'
+
+export { Counter }
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}

pages/index/index.page.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Counter } from './Counter'
+
+export { Page }
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive. <Counter />
+        </li>
+      </ul>
+    </>
+  )
+}

renderer/Link.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { usePageContext } from './usePageContext'
+
+export { Link }
+
+function Link(props: { href?: string; className?: string; children: React.ReactNode }) {
+  const pageContext = usePageContext()
+  const className = [props.className, pageContext.urlPathname === props.href && 'is-active'].filter(Boolean).join(' ')
+  return <a {...props} className={className} />
+}

renderer/PageShell.css

@@ -0,0 +1,19 @@
+/* This CSS is common to all pages */
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+
+.navitem {
+  padding: 3px 10px;
+}
+.navitem.is-active {
+  background-color: #eee;
+}

renderer/PageShell.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import logo from './logo.svg'
+import { PageContextProvider } from './usePageContext'
+import type { PageContext } from './types'
+import './PageShell.css'
+import { Link } from './Link'
+
+export { PageShell }
+
+function PageShell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
+  return (
+    <React.StrictMode>
+      <PageContextProvider pageContext={pageContext}>
+        <Layout>
+          <Sidebar>
+            <Logo />
+            <Link className="navitem" href="/">
+              Home
+            </Link>
+            <Link className="navitem" href="/about">
+              About
+            </Link>
+          </Sidebar>
+          <Content>{children}</Content>
+        </Layout>
+      </PageContextProvider>
+    </React.StrictMode>
+  )
+}
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Sidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        lineHeight: '1.8em'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        paddingBottom: 50,
+        borderLeft: '2px solid #eee',
+        minHeight: '100vh'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Logo() {
+  return (
+    <div
+      style={{
+        marginTop: 20,
+        marginBottom: 10
+      }}
+    >
+      <a href="/">
+        <img src={logo} height={64} width={64} alt="logo" />
+      </a>
+    </div>
+  )
+}

renderer/_default.page.client.tsx

@@ -0,0 +1,22 @@
+export { render }
+
+import React from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import { PageShell } from './PageShell'
+import type { PageContextClient } from './types'
+
+// This render() hook only supports SSR, see https://vite-plugin-ssr.com/render-modes for how to modify render() to support SPA
+async function render(pageContext: PageContextClient) {
+  const { Page, pageProps } = pageContext
+  if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined')
+  hydrateRoot(
+    document.getElementById('page-view')!,
+    <PageShell pageContext={pageContext}>
+      <Page {...pageProps} />
+    </PageShell>
+  )
+}
+
+/* To enable Client-side Routing:
+export const clientRouting = true
+// !! WARNING !! Before doing so, read https://vite-plugin-ssr.com/clientRouting */