Vite-surf NPM | npm.io

Vite Surf

A Vite plugin that adds Express server, React Router and SSR.

Note: This is package is under development!

Setup

Create Vite app from boilerplate:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app

Install dependencies:

npm install vite-surf react-router-dom express sirv
npm install -D @types/express

Configure vite.config.ts:

import { defineConfig } from 'vite'
import react from "@vitejs/plugin-react";
+import surfPlugin, { virtualClientEntry } from "vite-surf/plugin";

// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  build: {
+    rollupOptions: {
+      input: [virtualClientEntry],
+    },
+  },
+  plugins: [surfPlugin(), react()],
+});

Configure package.json scripts:

   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build:client": "vite build --manifest --outDir dist/client",
+    "build:server": "vite build --ssr src/server.ts --outDir dist/server",
+    "build": "npm run build:client && npm run build:server",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "start": "node ./dist/server/server.js"
   },

Remove some files, and add some new ones:

    node_modules/
    public/
    src/
        assets/
            react.svg
-       App.css
-       App.tsx
+       Document.tsx
        index.css
-       main.tsx
+       routes.tsx
+       server.ts
        vite-env.d.ts
    .gitignore
    README.md
    eslint.config.js
-   index.html
    package-lock.json
    package.json
    tsconfig.app.json
    tsconfig.json
    tsconfig.node.json
    vite.config.ts

src/Document.tsx

import { ReactNode } from "react";
import { Links, Scripts } from "vite-surf";

export default function Document({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React + TS + SSR</title>
        <Links />
      </head>
      <body>
        <div id="root">{children}</div>
        <Scripts />
      </body>
    </html>
  );
}

src/server.ts

import express from "express";
import { surfMiddleware } from "vite-surf";
import Document from "./Document";
import routes from "./routes";
import sirv from "sirv";
import manifest from "../dist/client/.vite/manifest.json";

const app = express();

app.get("/test", (_req, res) => {
  res.send("hello world");
});

app.use(sirv("./dist/client"));
app.use(surfMiddleware({ Document, routes, manifest }));

app.listen(3000);

src/routes.tsx

import { Link, Route, Routes } from "react-router-dom";
import "./index.css";

export default (
  <Routes>
    <Route
      path="/"
      element={
        <div>
          Home <Link to="/about">About</Link>
        </div>
      }
    />
    <Route
      path="/about"
      element={
        <div>
          About <Link to="/">home</Link>
        </div>
      }
    />
  </Routes>
);

Development

npm run dev

Production

npm run build
npm start

vite react react-router ssr express

9 months ago

9 months ago

9 months ago

9 months ago