react-server: A JavaScript repository from matyasjay

A minimalist React meta-framework using Vite.

Combines the fantastic developer experience of using Vite for React development and all the new React 19 features.

And more...

Features

React Server Components

Server Actions

server modules and inline server actions with "use server";
progressive enhancement

File-system based router

Performance

response caching and revalidation
React hot module replacement using Vite
blazing-fast production build using node.js cluster

Getting started

Install

Use a package manager to add @lazarv/react-server to your project. pnpm is a great choice to do it!

pnpm add @lazarv/react-server

Peer dependencies

@lazarv/react-server uses react, react-dom, react-server-dom-webpack and react-error-boundary as peer dependencies. Until all React dependencies are not released as latest the framework uses a pinned version of React. To install this version specifically the best way is to let pnpm install these for you.

If your project is not set up to auto-install peer dependencies, add this to your .npmrc:

auto-install-peers=true

or alternatively run:

pnpm config set auto-install-peers true --location project

Create your app

Create an entrypoint for your app and export your root component as default.

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>@lazarv/react-server</title>
      </head>
      <body>
        Hello World!
      </body>
    </html>
  );
}

Run your app

Similarly how you would run a script with node, use react-server to start your app. Magic!

pnpm exec react-server ./App.tsx --open

Build

For production build use the build command of react-server. This will build your app both for the server and the client side. Your build will be available in the .react-server folder of your project.

pnpm exec react-server build ./App.tsx

Run in production

To start your app after a successful production build, you will need to use the start command of react-server.

pnpm exec react-server start

You can unleash cluster mode by using the REACT_SERVER_CLUSTER environment variable.

REACT_SERVER_CLUSTER=8 pnpm exec react-server start

@lazarv/react-server-router

To enable file-system based routing, you need to install the @lazarv/react-server-router package and you no longer need to specify and entrypoint for your app.

pnpm add @lazarv/react-server-router

Create a @lazarv/react-server configuration file in your project root to specify where the router should start processing files. By default every file are included in the routing, but you can include/exclude using arrays of glob patterns.

`react-server.config.json`

{
  "root": "src"
}

Move your entrypoint from ./App.tsx to ./src/page.tsx to transform it into a page.

Just start react-server without using an entrypoint.

pnpm exec react-server --open

Documentation

Check out the full documentation at react-server.dev.

The documentation site was fully created using this framework and so it also functions as a static site example. To start the documentation site locally, use:

pnpm --filter ./docs dev

Examples

You can try out the existing examples in this repo by using the following commands:

git clone https://github.com/lazarv/react-server.git
cd react-server
pnpm install

And then run the example you want to check out:

pnpm --filter ./examples/todo dev --open
pnpm --filter ./examples/photos dev --open
pnpm --filter ./examples/express dev
pnpm --filter ./examples/nestjs start:dev

You will need to have pnpm installed. Follow instructions at https://pnpm.io/installation.

License

MIT

matyasjay/react-server