Path Rush

File-Based Routing for Vite

📘 Documentation: https://path-rush.web2bizz.ru/

Path Rush is a Vite plugin that provides file-based routing for React applications.
It is inspired by Next.js and designed to be lightweight, predictable, and production-ready.

The plugin enables automatic route generation from the file system, supports layouts, dynamic routes, HMR, SEO integration, and TypeScript type generation with minimal configuration.

---

Key Features

• File-based routing using the filesystem
• Nested layout support
• Dynamic and catch-all routes
• Hot Module Replacement (HMR)
• Automatic sitemap.xml and robots.txt generation
• SEO metadata extraction
• Code splitting and lazy loading
• Full TypeScript support with autogenerated types
• Multiple frontends on a single domain via base paths

---

Installation

npm install path-rush
# or
pnpm add path-rush
# or
yarn add path-rush

---

Quick Start

1. Vite Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { pathRush } from 'path-rush/core'

export default defineConfig({
  plugins: [react(), pathRush()],
})

---

2. Pages Structure

src/pages/
├── page.tsx             // /
├── about/page.tsx       // /about
├── blog/
│   ├── page.tsx         // /blog
│   └── [id]/page.tsx    // /blog/:id
├── layout.tsx           // Root layout
├── (auth)/login/page.tsx // /login
└── _components/         // Ignored

Rules:

• Folders wrapped in parentheses are route groups and do not appear in the URL
• Files and folders starting with _ are ignored by the router

---

3. Page Example

export default function HomePage() {
  return <h1>Home</h1>
}

export const metadata = {
  title: 'Home',
  description: 'Welcome to the website',
}

---

4. Layout Example

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </>
  )
}

---

5. Router Provider

// main.tsx
import { RouterProvider } from 'path-rush/react'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider />
)

---

Configuration

pathRush({
  pagesDir: 'src/pages',
  pageFileName: 'page',
  layoutFileName: 'layout',
  extensions: ['tsx', 'jsx'],
  baseUrl: 'https://example.com',
  basePath: '/',
  enableSEO: true,
  generateTypes: true,
})

The plugin automatically configures the required Vite options.
No additional setup is needed.

---

SEO Support

Path Rush extracts metadata from:

• JSDoc comments
• export const metadata

Based on this data, the plugin generates:

• sitemap.xml
• robots.txt
• strongly typed metadata definitions for TypeScript

---

Production Build

During production builds, Path Rush automatically enables:

• route-based code splitting
• lazy loading for pages and layouts
• route manifest generation
• TypeScript route and metadata types

dist/
├── routes-manifest.js
├── sitemap.xml
├── robots.txt
└── types/

---

Multiple Frontends

Path Rush supports multiple frontend applications on a single domain using basePath.

Example:

• / — main application
• /admin — admin panel

Each frontend should have its own pagesDir and entry point.

---

License

MIT License
© da-b1rmuda
Web2Bizz