React Templates & Themes Logo React Templates & Themes
Vite Plugin React Pages screenshot

Vite Plugin React Pages

Author Avatar Theme by Vitejs
Updated: 6 Aug 2024
472 Stars

A vite framework for building react app. Especially suitable for document site and demos/playgrounds of react components.

Github Live Preview

Categories

Vite

Overview:

Vite-plugin-react-pages (vite-pages) is a React app framework powered by Vite, ideal for blog sites, documentation sites, stories/demos/playgrounds for React components, or libraries. It offers a quick development experience with features like filesystem-based routing, support for Mdx, powerful theme customization, automatic code splitting, static site generation, and tools for library documentation.

Features:

  • Fantastic Development Experience: Quick local development server startup with hot module replacement for instant code feedback.
  • Filesystem Based Routing: Simple filesystem routing convention for easy page creation and development without routing configuration.
  • Support Mdx: Content creation in either normal React or Mdx formats for flexibility and readability.
  • Powerful Theme Customization: Customize any aspect of the page with shareable and configurable themes.
  • Automatic Code Splitting: Load page data as needed, enabling faster page load times.
  • Support Static Site Generation: Pre-render app into HTML for content visibility before JS loading.
  • Tools for Library Documentation: Tools to reduce maintenance costs and enhance document readability.

Installation:

  1. Initialize a vite-pages project with npm 7+:
npm init vite-pages app-demo -- --template app
  1. For library projects, initialize with:
npm init vite-pages library-demo -- --template lib
  1. For library projects with monorepo setup:
npm init vite-pages library-monorepo-demo -- --template lib-monorepo
  1. For npm 6.x, remove the extra “–” before “–template”.
  2. Install dependencies:
npm install
  1. Start local development server:
npm run dev
  1. Build the project:
npm run build
  1. For SSR, run:
npm run ssr

Summary:

Vite-plugin-react-pages (vite-pages) is a powerful React app framework with excellent development experience, filesystem-based routing, Mdx support, theme customization, code splitting, static site generation, and documentation tools. It simplifies React app development for various purposes and offers a seamless workflow for creating dynamic and interactive web applications.