StartSimple.js

What is Start Simple?

A minimal full-stack monorepo with out-of-the-box SSR, SSG, and routing — powered by Vite, React, and Express. No rewrites needed. Just configure your routes and loaders.

Why Start Simple?

• Zero learning curve — if you know React and Express, you're ready.
• No frontend rewrites — your existing React code works as-is.
• Route-based rendering — declare which routes are SSR or SSG in one config file.
• Loaders — each route can fetch its own data server-side, just like Remix/Next.js.
• Works with any frontend — swap React for Vue/Svelte and the SSR pipeline still works.

Installation

npx start-simple my-app
cd my-app
npm install
npm run dev

Project Structure

my-app/
├── packages/
│   ├── frontend/              # Vite + React SSR app
│   │   ├── renderingConfig.js # ✨ SSG & SSR route definitions + loaders
│   │   ├── server.js          # Express SSR server (dev & prod)
│   │   ├── scripts/
│   │   │   └── prerender.js   # Build-time SSG pre-renderer
│   │   └── src/
│   │       ├── entry-client.jsx
│   │       ├── entry-server.jsx
│   │       ├── App.jsx
│   │       ├── context/
│   │       │   └── LoaderDataContext.jsx
│   │       └── pages/
│   │           ├── Home.jsx
│   │           ├── About.jsx
│   │           └── Post.jsx
│   └── backend/               # Express API server
│       └── index.js
├── package.json               # Monorepo root (npm workspaces + Turbo)
└── turbo.json

Available Scripts

Run all scripts from the monorepo root (my-app/):

Script	Description
npm run dev	Start the SSR frontend and the backend API on concurrent ports
npm run frontend	Start only the frontend SSR dev server (node server)
npm run backend	Start only the backend API server
npm run start	Start the frontend in production SSR mode (pre-rendered SSG pages served from disk)
npm run build	Build the frontend for production + pre-render SSG routes (automatically triggered)

Quick Start: How it Works

1. Define routes in renderingConfig.js

export const ssgRoutes = [
  {
    path: "/",
    loader: async () => ({ title: "Home" }),
  },
];

export const ssrRoutes = [
  {
    path: "/post/:id",
    loader: async ({ params }) => {
      const res = await fetch(`https://api.example.com/posts/${params.id}`);
      return res.json();
    },
  },
];

2. Use loader data in your component

import { useLoaderData } from "./context/LoaderDataContext";

export default function Post() {
  const data = useLoaderData();
  return <h1>{data.title}</h1>;
}

3. That's it!

• SSR routes — loader runs on the server for every request.
• SSG routes — loader runs at build time, HTML is saved to disk.
• Unlisted routes — treated as SSG by default (client-side only in dev).

Rendering Modes

Mode	When Loader Runs	Best For
SSG	Once at build time	Static pages (home, about, blog index)
SSR	Every request	Dynamic pages (user profiles, posts, search results)
Default (unlisted)	Client-side only	Pages without data needs

Deployment

# 1. Build everything
npm run build

# 2. Start the production SSR server
npm run start

# 3. Start the API server
npm run backend

Further Reading

• documentation.md — Full API reference
• tutorial.md — Step-by-step guide to adding routes
• mechanism.md — Deep dive into how SSR/SSG works internally

License

MIT