feat: prepare client-side

src/entry-client.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import createRoutes from "./routes";
+import App from "./App";
+import Context from "./context";
+import "./index.css";
+
+declare global {
+  interface Window {
+    CONTEXT: any;
+  }
+}
+
+const mount = (children: React.ReactNode) => {
+  const root = document.getElementById("root") as HTMLElement;
+
+  if (window.CONTEXT) {
+    ReactDOM.hydrateRoot(root, children);
+  } else {
+    ReactDOM.createRoot(root).render(children);
+  }
+};
+
+(async () => {
+  const { routes } = await createRoutes(window.location.pathname);
+  const context = window.CONTEXT;
+
+  mount(
+    <React.StrictMode>
+      <Context.Provider value={context}>
+        <BrowserRouter>
+          <App routes={routes} />
+        </BrowserRouter>
+      </Context.Provider>
+    </React.StrictMode>
+  );
+})();

src/index.css

@@ -68,3 +68,54 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.list {
+  padding: 2em;
+}
+
+.powered-by {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+}
+
+.powered-by img {
+  width: 12rem;
+  display: inline-block;
+  margin-left: 0.5rem;
+}

src/pages/[name].tsx

@@ -0,0 +1,71 @@
+import { useContext } from "react";
+import { Link } from "react-router-dom";
+import reactLogo from "~/assets/react.svg";
+import Context from "~/context";
+
+// If a route exports `fetchData` method, it will be called
+// on the server side. The returned optional `head` property will be
+// injected into HTML for SEO, and the optional `context` property
+// will be made available on the client-side.
+export const fetchData: FetchDataFunc = (match) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        head: { title: match.name },
+        context: { serverTime: Date.now() },
+      });
+    }, 1000);
+  });
+};
+
+const Home: React.FC = () => {
+  const context = useContext(Context);
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/logo.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="list">
+        {context ? (
+          <>
+            <p>
+              This page is server side rendered. <br />
+              Check the source code and search for the{" "}
+              <code>window.CONTEXT</code> object.
+            </p>
+            <p>
+              Context generated on the server-side:
+              <br /> <code>{JSON.stringify(context)}</code>
+            </p>
+            <p>
+              Go back to <Link to="/">home page</Link>.
+            </p>
+          </>
+        ) : (
+          <p>
+            This page has ssr support. Refresh the page and check the content.
+          </p>
+        )}
+      </div>
+      <p className="powered-by">
+        Template by{" "}
+        <a
+          href="https://www.stormkit.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src="/stormkit-logo.svg" />
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default Home;

src/pages/index.tsx

@@ -0,0 +1,40 @@
+import { Link } from "react-router-dom";
+import reactLogo from "~/assets/react.svg";
+
+const Home: React.FC = () => {
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/logo.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="list">
+        <p>
+          Visit <Link to="/ssr">/my-dynamic-url</Link> to see the
+          server-side-rendered content.
+        </p>
+        <p>
+          Checkout template from{" "}
+          <a href="https://github.com/stormkit-io/monorepo-template">GitHub</a>
+        </p>
+      </div>
+      <p className="powered-by">
+        Template by{" "}
+        <a
+          href="https://www.stormkit.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src="/stormkit-logo.svg" />
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default Home;

src/pages/ssg.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import reactLogo from "~/assets/react.svg";
+
+const Home: React.FC = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React monorepo template</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/pages/index.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </div>
+  );
+};
+
+export default Home;