### Micro-frontends Example Setup

Source: https://react-server.dev/ja/framework/micro-frontends

Instructions for setting up and running the micro-frontends example from the `@lazarv/react-server` repository. It includes commands for installing dependencies and starting the development server.

```bash
pnpm install
pnpm --filter ./examples/remote dev
```

--------------------------------

### Prerequisites for @lazarv/react-server

Source: https://react-server.dev/guide/get-started

To get started with @lazarv/react-server, you need Node.js and a package manager. The guide suggests the latest Node.js runtime and pnpm, but other package managers are also supported. Bun is also a viable alternative.

```text
Node.js v20.10.0 or higher
pnpm

Bun v1.2.9 or higher
```

--------------------------------

### Install @lazarv/react-server

Source: https://react-server.dev/guide/get-started

Installs the @lazarv/react-server package using different package managers like pnpm, npm, yarn, and bun. Deno is not yet supported.

```bash
pnpm add @lazarv/react-server
```

```bash
npm install @lazarv/react-server
```

```bash
yarn add @lazarv/react-server
```

```bash
bun add @lazarv/react-server
```

--------------------------------

### Build React Server Application for Production

Source: https://react-server.dev/guide/get-started

Builds the React Server application for production, creating a .react-server folder with all necessary files. Deno is not supported.

```bash
pnpm react-server build ./App.jsx
```

```bash
npx react-server build ./App.jsx
```

```bash
yarn react-server build ./App.jsx
```

```bash
bun --bun react-server build ./App.jsx
```

--------------------------------

### Running React Server Micro-frontend Example

Source: https://react-server.dev/framework/micro-frontends

Commands to install dependencies and run the micro-frontend example from the `@lazarv/react-server` repository.

```bash
pnpm install
pnpm --filter ./examples/remote dev
```

--------------------------------

### Create First React Server Application

Source: https://react-server.dev/guide/get-started

Defines a simple React Server Component named 'App' that renders a 'Hello World' message. This component serves as the entry point for a React Server application.

```jsx
export default function App(return <h1>Hello World</h1>;
}
```

--------------------------------

### Project Setup with pnpm

Source: https://react-server.dev/ja/tutorials/todo-app

Initializes a new project, installs dependencies including @lazarv/react-server, better-sqlite3, and zod, and sets up development dependencies for Tailwind CSS and TypeScript.

```bash
mkdir todo
cd todo
pnpm init
pnpm add @lazarv/react-server better-sqlite3 zod
pnpm add -D @types/better-sqlite3 @types/react @types/react-dom autoprefixer postcss tailwindcss@3 typescript
pnpx tailwindcss@3 init -p
```

--------------------------------

### Start React Server in Production Mode

Source: https://react-server.dev/guide/get-started

Starts the React Server application in production mode. This command is used after building the application for deployment. Deno is not supported.

```bash
pnpm react-server start
```

```bash
npx react-server start
```

```bash
yarn react-server start
```

```bash
bun --bun react-server start
```

--------------------------------

### Project Setup and Dependencies

Source: https://react-server.dev/ja/tutorials/photos

Commands to create a new React project, install core dependencies like @lazarv/react-server, react-click-away-listener, @faker-js/faker, and development dependencies for TypeScript and Tailwind CSS.

```bash
mkdir photos
cd photos
pnpm init
pnpm add @lazarv/react-server react-click-away-listener @faker-js/faker
pnpm add -D @types/react @types/react-dom autoprefixer postcss tailwindcss@3 typescript typescript-plugin-css-modules
pnpx tailwindcss@3 init -p
mkdir src
mkdir src/app
mkdir src/components
```

--------------------------------

### Start React Server Production

Source: https://react-server.dev/tutorials/hello-world

Command to start the React Server production server.

```bash
pnpm react-server start
```

--------------------------------

### Add Start Script to package.json

Source: https://react-server.dev/tutorials/hello-world

Adds a 'start' script to the package.json file to easily start the React Server production server.

```json
{
  "scripts": {
    "dev": "react-server ./App.jsx",
    "build": "react-server build ./App.jsx",
    "start": "react-server start"
  }
}
```

--------------------------------

### Install @lazarv/react-server

Source: https://react-server.dev/tutorials/hello-world

Commands to create a new project directory, initialize a pnpm project, and install the @lazarv/react-server package. This package includes React and ReactDOM as dependencies.

```bash
mkdir my-first-application
cd my-first-application
pnpm init
pnpm add @lazarv/react-server

```

--------------------------------

### Start React Server Development

Source: https://react-server.dev/tutorials/hello-world

Command to start the React Server development server, specifying the entry file.

```bash
pnpm react-server ./App.jsx
```

--------------------------------

### Run React Server with npx (Development)

Source: https://react-server.dev/tutorials/hello-world

Command to start the React Server development server using npx, useful for projects without global installation.

```bash
npx @lazarv/react-server ./App.jsx
```

--------------------------------

### Run React Server in Development Mode

Source: https://react-server.dev/guide/get-started

Starts the React Server application in development mode using the react-server CLI. The --open flag automatically opens the application in the default browser at http://localhost:3000. Deno is not supported.

```bash
pnpm react-server ./App.jsx
```

```bash
npx react-server ./App.jsx
```

```bash
yarn react-server ./App.jsx
```

```bash
bun --bun react-server ./App.jsx
```

--------------------------------

### Run React Server with npx (Start)

Source: https://react-server.dev/tutorials/hello-world

Command to start the React Server production server using npx.

```bash
npx @lazarv/react-server start
```

--------------------------------

### Project Setup and Dependencies

Source: https://react-server.dev/tutorials/todo-app

Initializes a new project using pnpm, adds core dependencies like @lazarv/react-server, better-sqlite3, and zod, and installs development dependencies including TypeScript and Tailwind CSS.

```bash
mkdir todo
cd todo
pnpm init
pnpm add @lazarv/react-server better-sqlite3 zod
pnpm add -D @types/better-sqlite3 @types/react @types/react-dom autoprefixer postcss tailwindcss@3 typescript
pnpx tailwindcss@3 init -p
```

--------------------------------

### Install @lazarv/react-server

Source: https://react-server.dev/ja/tutorials/hello-world

Initialize a new application and install the @lazarv/react-server package using pnpm. React and React DOM are included as dependencies.

```bash
mkdir my-first-application
cd my-first-application
pnpm init
pnpm add @lazarv/react-server

```

--------------------------------

### Running React Server Components with react-server CLI

Source: https://react-server.dev/guide/get-started

You can use the `react-server` CLI similarly to how you use Node.js. Once you have a file exporting a default server component, you can execute it using `react-server`. This allows for single-file micro-applications or complex applications using a file-system based router.

```bash
react-server your-server-component-file.js
```

--------------------------------

### Start Development Server

Source: https://react-server.dev/framework/cli

Starts the React Server development server with a specified entrypoint.

```bash
pnpm react-server ./App.jsx
```

--------------------------------

### Create and Run Vite + React App

Source: https://react-server.dev/integrations/vite

Steps to create a new Vite + React project, install dependencies, and start the development server.

```bash
pnpm create vite my-react-app --template react
cd my-react-app
pnpm install
pnpm dev
```

--------------------------------

### Production Build and Server Start

Source: https://react-server.dev/tutorials/todo-app

This snippet shows the commands to build the React Server application for production and then start the production server.

```bash
pnpm build
pnpm start
```

--------------------------------

### React Server Client Components Tutorial

Source: https://react-server.dev/tutorials/photos

This tutorial guides users through creating and utilizing client components within the React Server framework. It focuses on enhancing user experience with client-side interactivity and dynamic content, using a photo gallery as a practical example. The tutorial also demonstrates the integration of file-system based routing for seamless navigation.

```react-server
This tutorial covers the following key aspects:
- Creating client components for interactive elements.
- Handling user interactions within client components.
- Utilizing file-system based routing for application navigation.
- Building a photo gallery application as a practical example.
```

--------------------------------

### React Server CLI Start Options

Source: https://react-server.dev/framework/cli

Details the command-line arguments for starting the React Server. Options like host, port, https, and cors mirror development server settings. Additional options include specifying the origin, trusting proxy headers, running a build before start, and defining the output directory for the build.

```APIDOC
start [options]

Options:
  --host <host>       Specify the host to listen on. Same as development server.
  --port <port>       Specify the port to listen on. Same as development server.
  --https             Enable HTTPS. Same as development server.
  --cors              Enable CORS. Same as development server.
  --origin <origin>   Specify the origin part of the URL to a constant value. Equivalent to setting the ORIGIN environment variable.
  --trust-proxy       Trust X-Forwarded-* headers for proxy information.
  --build             Run the build command before starting the server using the provided entrypoint.
  --outDir <dir>      Output directory for the build. Defaults to '.react-server'. Specify if a different output directory was used in the build command.
```

--------------------------------

### Start Production Application

Source: https://react-server.dev/router/file-router

Starts the built production application. This command is used after the build process to run the optimized application.

```bash
pnpm react-server start
```

--------------------------------

### React Server CLI Commands

Source: https://react-server.dev/framework/cli

Defines the core commands for the react-server CLI: starting the development server, building for production, and starting the production server. The entrypoint of the app is a required argument for most commands.

```bash
react-server [root]
build [root]
start
```

--------------------------------

### Add Development Script to package.json

Source: https://react-server.dev/tutorials/hello-world

Adds a 'dev' script to the package.json file to easily start the React Server development server.

```json
{
  "scripts": {
    "dev": "react-server ./App.jsx"
  }
}
```

--------------------------------

### npm Scripts for React Server Development

Source: https://react-server.dev/tutorials/todo-app

Defines essential npm scripts for managing a React Server application. Includes scripts for development ('dev'), building ('build'), and starting the server ('start'), utilizing the 'react-server' command-line tool.

```json
"scripts": {
  "dev": "react-server ./src/index.tsx",
  "build": "react-server build ./src/index.tsx",
  "start": "react-server start"
}
```

--------------------------------

### Install Vercel Adapter and Initialize Project

Source: https://react-server.dev/ja/deploy/vercel

Steps to add the Vercel adapter package and initialize your project with Vercel CLI for deployment.

```bash
vercel project add <project-name>
vercel link --yes --project <project-name>
pnpm add -D @lazarv/react-server-adapter-vercel
```

--------------------------------

### React Server Configuration Example

Source: https://react-server.dev/router/configuration

Example of a react-server.config.mjs file to configure the router. It specifies the root directory for pages and the public directory for static assets.

```javascript
export default {
  root: "src/pages",
  public: "public",
};
```

--------------------------------

### Basic Configuration (JSON)

Source: https://react-server.dev/framework/configuration

Example of a basic configuration file in JSON format for setting runtime values.

```json
react-server.config.json
{
  "runtime": {
    "myEntry": "myValue"
  }
}
```

--------------------------------

### Basic Tailwind CSS Setup

Source: https://react-server.dev/ja/tutorials/todo-app

Includes the essential Tailwind directives for base, components, and utilities in the main CSS file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### Create Vite + React App

Source: https://react-server.dev/ja/integrations/vite

Commands to create a new Vite project with a React template and start the development server.

```bash
pnpm create vite my-react-app --template react
cd my-react-app
pnpm install
pnpm dev
```

--------------------------------

### React Partial Pre-rendering Example

Source: https://react-server.dev/ja/framework/ppr

Demonstrates how to implement partial pre-rendering using Suspense and the `usePrerender` hook. It splits a page into static and dynamic content, deferring the rendering of the dynamic component.

```javascript
import { Suspense } from "react";
import { usePrerender } from "@lazarv/react-server/prerender";

async function DynamicComponent(usePrerender();
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return <div>Dynamic content</div>;
}

export default function App(return (
    <div>
      <h1>Static content</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <DynamicComponent data={data} />
      </Suspense>
    </div>
  );
}

```

--------------------------------

### React Server Project Scripts

Source: https://react-server.dev/ja/tutorials/todo-app

Defines npm scripts for managing a React Server project, including commands for development, building, and starting the server.

```json
{
  "scripts": {
    "dev": "react-server ./src/index.tsx",
    "build": "react-server build ./src/index.tsx",
    "start": "react-server start"
  }
}
```

--------------------------------

### Importing and Configuring Adapter

Source: https://react-server.dev/deploy/adapters

Imports an adapter directly from a package or file and then configures it with custom options. This allows for more dynamic adapter setup.

```javascript
import adapter from '@lazarv/react-server-adapter-vercel';

export default {
  adapter: adapter({
    // Custom options
  }),
};
```

--------------------------------

### React Server Routing Structure Example

Source: https://react-server.dev/router/define-routes

Illustrates the file structure for implementing layouts and transparent route segments in React Server.

```bash
src
- (root).layout.jsx
- (root).page.jsx
- (dashboard)
  - users
    - (users).page.jsx
    - [userId].page.jsx
```

--------------------------------

### Create a Client Component

Source: https://react-server.dev/guide/client-components

To create a client component, add the 'use client' pragma at the top of the file. This directive signals that the component should be treated as a client-side component.

```javascript
"use client";

export default function MyClientComponent() {
  return <p>This is a client component</p>;
}
```

--------------------------------

### API Route Handler Example

Source: https://react-server.dev/router/api

Example of an API route handler for GET requests to '/posts'. It exports an async function that returns a JSON response.

```javascript
// GET.posts.server.mjs

export default async function GetPosts(context) {
  return new Response(JSON.stringify({ posts: [ /* posts */ ] }), {
    headers: {
      "Content-Type": "application/json",
    },
  });
};
```

--------------------------------

### Build React Server Application

Source: https://react-server.dev/tutorials/hello-world

Command to build the React Server application for production.

```bash
pnpm react-server build ./App.jsx
```

--------------------------------

### React Server Tutorials Overview

Source: https://react-server.dev/tutorials

This section outlines the available tutorials for building React applications with server-side rendering. It includes guides on creating a first application, using server functions, and working with client components.

```markdown
# Tutorials
Learn how to build React applications with server-side rendering using React Server Components. Follow our step-by-step tutorials to create your first application, integrate server functions, and more.
#### Hello World!
##### Your first application
Create a new React application with server-side rendering in just a few steps. Start building your app with React Server Components and enjoy faster initial page loads.
[Read tutorial](https://react-server.dev/tutorials/hello-world)
#### Todo App
##### Using server functions
Build a simple Todo application with server functions. Learn how to interact with the server from your components and manage server-side operations efficiently.
[Read tutorial](https://react-server.dev/tutorials/todo-app)
#### Photos
##### Using client components
Learn how to use client components to create interactive elements in your application. Enhance your user experience with client-side rendering and dynamic content updates.
[Read tutorial](https://react-server.dev/tutorials/photos)
```

--------------------------------

### Bootstrap a New React Server Project

Source: https://react-server.dev/guide/quick-start

This snippet demonstrates how to use the @lazarv/create-react-server CLI tool to bootstrap a new project. It shows the commands for initiating the project creation process using different package managers.

```bash
pnpx @lazarv/create-react-server
```

```bash
npx @lazarv/create-react-server
```

```bash
yarn dlx @lazarv/create-react-server
```

```bash
bunx --bun @lazarv/create-react-server
```

--------------------------------

### Install react-server

Source: https://react-server.dev/integrations/vite

Installs the latest version of the @lazarv/react-server package.

```bash
pnpm add @lazarv/react-server@latest
```

--------------------------------

### Run React Server with npx (Build)

Source: https://react-server.dev/tutorials/hello-world

Command to build the React Server application for production using npx.

```bash
npx @lazarv/react-server build ./App.jsx
```

--------------------------------

### Install Vercel Adapter

Source: https://react-server.dev/deploy/vercel

Command to install the Vercel adapter for @lazarv/react-server as a development dependency.

```bash
pnpm add -D @lazarv/react-server-adapter-vercel
```

--------------------------------

### React Server Deployment Overview

Source: https://react-server.dev/deploy

Information on deploying React Server applications using adapters for various platforms or the built-in Node.js server. Details on available adapters and how to implement custom ones.

```markdown
# Deploy
When you're finished with your app, you can deploy it to the web. The framework provides a set of adapters to deploy your app to different platforms. You can also use the framework's built-in server to deploy your app to your own server using Node.js.
You will learn how to use [adapters](https://react-server.dev/deploy/adapters) to configure your app for different deployment environments.
You can also learn how to deploy your app to different platforms using the available adapters. The framework provides adapters for [Vercel](https://react-server.dev/deploy/vercel) right now, but there are more coming soon to deploy your app to Netlify, Cloudflare Pages, Cloudflare Workers, or Serverless Stack.
Find more information about how to implement deployment adapters in the [Adapter API](https://react-server.dev/deploy/api) section.
[← Router: Configuration](https://react-server.dev/router/configuration)[Deploy: Adapters →](https://react-server.dev/deploy/adapters)
```

--------------------------------

### Create React Server Component

Source: https://react-server.dev/tutorials/hello-world

Defines a simple React Server Component that renders an 'Hello, World!' heading.

```jsx
export default function App(return <h1>Hello, World!</h1>;
}
```

--------------------------------

### Running and Building the React Server Application (Bash)

Source: https://react-server.dev/ja/tutorials/photos

These bash commands demonstrate how to run the React Server application in development mode, build it for production, and start the production server. It also shows how to access the application in a browser.

```bash
pnpm dev

# Access at http://localhost:3000

pnpm build

pnpm start
```

--------------------------------

### React Server Todo App Entry Point

Source: https://react-server.dev/ja/tutorials/todo-app

Sets up the main 'Hello World!' component for a React Server application. It renders a simple heading and can be executed using the 'react-server' command.

```tsx
import React from 'react';

export default function Index() {
  return (
    <h1>Hello World!</h1>
  );
}
```

--------------------------------

### Install Tailwind CSS v4 with Vite

Source: https://react-server.dev/ja/integrations/tailwind-css

Installs Tailwind CSS v4 and the official Tailwind CSS Vite plugin as development dependencies.

```bash
pnpm add -D tailwindcss @tailwindcss/vite
```

--------------------------------

### Project Initialization and Dependency Installation

Source: https://react-server.dev/tutorials/photos

Commands to create a new React Server project directory, navigate into it, initialize a new project using pnpm, and add necessary dependencies including react-server, click-away-listener, faker, and development dependencies for TypeScript and Tailwind CSS.

```bash
mkdir photos
cd photos
pnpm init
pnpm add @lazarv/react-server react-click-away-listener @faker-js/faker
pnpm add -D @types/react @types/react-dom autoprefixer postcss tailwindcss@3 typescript typescript-plugin-css-modules
pnpx tailwindcss@3 init -p
mkdir src
mkdir src/app
mkdir src/components
```

--------------------------------

### Start MCP Inspector

Source: https://react-server.dev/framework/mcp

Command to start the MCP Inspector tool, which allows exploration and interaction with MCP handlers. The DANGEROUSLY_OMIT_AUTH flag bypasses authentication for direct access.

```bash
DANGEROUSLY_OMIT_AUTH=true npx @modelcontextprotocol/inspector
```

--------------------------------

### Add Build Script to package.json

Source: https://react-server.dev/tutorials/hello-world

Adds a 'build' script to the package.json file to easily build the React Server application for production.

```json
{
  "scripts": {
    "dev": "react-server ./App.jsx",
    "build": "react-server build ./App.jsx"
  }
}
```

--------------------------------

### Install Tailwind CSS v3 and PostCSS

Source: https://react-server.dev/integrations/tailwind-css

Installs Tailwind CSS v3, PostCSS, and Autoprefixer. Initializes Tailwind CSS with `pnpm dlx tailwindcss@3 init`.

```bash
pnpm add -D tailwindcss@3 postcss autoprefixer
pnpm dlx tailwindcss@3 init
```

--------------------------------

### Start Development Server

Source: https://react-server.dev/router/file-router

Starts the development server using the file-system based router. This command automatically utilizes the file-system router when no entry point is specified via the react-server CLI.

```bash
pnpm react-server
```

--------------------------------

### Create React Server Component

Source: https://react-server.dev/ja/tutorials/hello-world

Create an App.jsx file that exports a React Server Component rendering "Hello, World!" as an h1 element.

```jsx
export default function App() {
  return <h1>Hello, World!</h1>;
}

```

--------------------------------

### Install React Server

Source: https://react-server.dev/ja/integrations/vite

Command to install the latest version of `@lazarv/react-server` using pnpm. This replaces the need for React 18's `react` and `react-dom` packages when using React Server Components.

```bash
pnpm add @lazarv/react-server@latest
```

--------------------------------

### Create Adapter Instance

Source: https://react-server.dev/deploy/api

Demonstrates how to create an adapter instance using `createAdapter` with basic configuration including name, output directories, a handler function, and deployment command. This is the fundamental setup for a custom adapter.

```javascript
import { createAdapter } from "@lazarv/react-server-adapter-core";

export const adapter = createAdapter({
  name: "Vercel",
  outDir: ".vercel",
  outStaticDir: "static",
  handler: async ({ adapterOptions, files, copy, config, reactServerDir, reactServerOutDir, root, options }) => {
    // Your adapter handler implementation
  },
  deploy: {
    command: "vercel",
    args: ["deploy", "--prebuilt"],
  },
});

export default function defineConfig(adapterOptions) {
  return async (_, root, options) => adapter(adapterOptions, root, options);
}
```

--------------------------------

### Install Tailwind CSS v4 with Vite

Source: https://react-server.dev/integrations/tailwind-css

Installs Tailwind CSS v4 and the Vite plugin. This is the first step for integrating Tailwind CSS v4 into a React Server project using Vite.

```bash
pnpm add -D tailwindcss @tailwindcss/vite
```

--------------------------------

### Create and Run a React Server Component

Source: https://react-server.dev/guide/quick-start

This snippet shows how to create a simple React Server Component and run it using different package managers like npx, yarn dlx, and bunx. It demonstrates the basic setup for a server-side rendered React application.

```jsx
export default function App(return <h1>Hello, World!</h1>;
}
```

```bash
npx @lazarv/react-server ./App.jsx
```

```bash
yarn dlx @lazarv/react-server ./App.jsx
```

```bash
bunx --bun @lazarv/react-server ./App.jsx
```

--------------------------------

### Update npm Scripts for react-server

Source: https://react-server.dev/integrations/vite

Configures the npm scripts to use react-server for development, building, and starting the application.

```json
"scripts": {
  "dev": "react-server ./src/main.jsx",
  "build": "react-server build ./src/main.jsx",
  "lint": "eslint .",
  "start": "react-server start"
}
```

--------------------------------

### Handlers Mutation (MJS)

Source: https://react-server.dev/framework/configuration

Example of mutating the existing handlers array using a function in an MJS configuration file.

```javascript
react-server.config.mjs
export default {
  handlers: (handlers) => {
    return [...handlers, async () => { ... }];
  }
}
```

--------------------------------

### React Server CLI Help

Source: https://react-server.dev/framework/cli

Displays all available commands for the react-server CLI. This is the primary command to understand the CLI's capabilities.

```bash
pnpm react-server --help
```

--------------------------------

### Static Export Configuration

Source: https://react-server.dev/ja/framework/micro-frontends

Defines static export configurations within `react-server.config.json`. This example shows how to specify a root path ('/') to be exported remotely.

```javascript
export default {
  export(return [
      {
        path: "/",
        remote: true,
      },
    ];
  ),
};
```

--------------------------------

### Runtime Configuration (MJS)

Source: https://react-server.dev/framework/configuration

Example of configuring the runtime context using an MJS file, allowing for dynamic updates to the context.

```javascript
react-server.config.mjs
export default {
  runtime: (runtime) => {
    return {
      ...runtime,
      myEntry: "myValue",
    };
  },
};
```

--------------------------------

### Access Outlet with useOutlet()

Source: https://react-server.dev/ja/framework/http

The `useOutlet()` hook allows you to access the outlet of the current request. This is useful for getting the name of the outlet that the current request is being rendered in.

```javascript
import { useOutlet } from "@lazarv/react-server";

export default function MyComponent(const outlet = useOutlet();

  return <p>Outlet: {outlet}</p>;
}

```