A modern React framework for fast, SEO-ready client sites
TypeScript · Vite · SSR · React 18
I wanted to build my own framework for fast client sites. I can make sites fast that support the basics from start and are easy to use by the client itself—while still maintaining the speed of real code with AI.
| 🚀 | Vite — Instant dev server, HMR, tiny production bundles |
| ⚛️ | React 18 — Hooks, Suspense, concurrent rendering |
| 🔍 | SSR — Full server-side rendering for SEO and first paint |
| 📝 | TypeScript — Typed from day one |
| 🧭 | React Router — SPA routing with SSR support |
| 📱 | SEO — Head component and meta helpers built in |
Create a new app in one command:
npx create-landrr-app my-landing-page
cd my-landing-page
npm run devThen open http://localhost:3000 in your browser.
my-landing-page/
├── src/
│ ├── App.tsx # App shell & routes
│ ├── entry-client.tsx # Client hydration
│ ├── entry-server.tsx # SSR entry
│ └── pages/
│ ├── Home.tsx
│ └── About.tsx
├── server.js # Express SSR server
├── index.html
├── vite.config.ts
└── package.json
Use the Head component from @landrr/core for meta tags. Works with SSR out of the box.
import { Head } from "@landrr/core";
export default function LandingPage() {
return (
<>
<Head
title="My Amazing Product"
description="The best product for your needs"
ogImage="https://example.com/og-image.jpg"
ogType="website"
twitterCard="summary_large_image"
canonical="https://example.com"
/>
<div>
<h1>Welcome to My Product</h1>
</div>
</>
);
}| Prop | Description |
|---|---|
title |
Page title |
description |
Meta description |
keywords |
Meta keywords |
ogTitle |
Open Graph title |
ogDescription |
Open Graph description |
ogImage |
Open Graph image URL |
ogUrl |
Open Graph URL |
ogType |
Open Graph type (e.g. website, article) |
twitterCard |
Twitter card type |
twitterSite |
Twitter @handle |
twitterCreator |
Creator @handle |
canonical |
Canonical URL |
robots |
Robots meta directive |
| Command | Description |
|---|---|
npm run dev |
Start dev server with HMR |
npm run build |
Production build |
npm run preview |
Run production build locally |
This repo is a pnpm + Turborepo monorepo. To hack on @landrr/core and the template together:
pnpm install
pnpm devThis runs @landrr/core in watch mode and the template app; edits to the core package are reflected in the template live.
- Connect your repo to Vercel.
- Build command:
npm run build - Output directory:
dist/client - Environment:
NODE_ENV=production
- Connect the repo.
- Build:
npm run build - Start:
npm run preview
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
ENV NODE_ENV=production
EXPOSE 3000
CMD ["node", "server.js"]Contributions welcome — open an issue or send a PR.