# Get Started

Nothing is easier to get started with React Server Components than `@lazarv/react-server`. You can use the `react-server` CLI as you would node.js. As soon as you have a file with a server component exported as default, you can run it with `react-server`. Your application can be a single file for micro-applications or even use the file-system based router to create a full-fledged complex application.

## Prerequisites

You will only need node.js and a package manager to get started. We suggest the latest node.js runtime and pnpm as the package manager, but you can use any package manager you would like to.

- [Node.js](https://nodejs.org) v20.10.0 or higher
- [pnpm](https://pnpm.io)

or when using Bun as your JavaScript runtime, you don't need anything else, just use Bun.

- [Bun](https://bun.sh) v1.2.9 or higher

or when using Deno as your JavaScript runtime:

- [Deno](https://deno.com) v2.0 or higher

## Install

Just add `@lazarv/react-server` to your project. You will not need anything else to get started with a micro-application.

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

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

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

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

```sh
deno run -A npm:@lazarv/react-server
```

## Our first application

Just by creating an `App.jsx` file and exporting a React Server Component as default makes your application ready to run.

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

## Development mode

To start your application in development mode, you can use the `react-server` CLI simply by passing the path to your application entry file. By using the `--open` flag, your application will be opened in your default browser on http://localhost:3000.

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

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

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

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

```sh
deno run -A npm:@lazarv/react-server ./App.jsx
```

> **Note:** if you want to open the application in your default browser, you can use the `--open` flag.

## Build

After you have developed your application, you can build it for production. This will create a `.react-server` folder with all files needed to run your application in production mode. When using Bun or Deno, the corresponding adapter is automatically detected and used, producing a self-contained bundle in `.bun/` or `.deno/`. You can override the auto-detected adapter with `--adapter ` or disable it with `--no-adapter`.

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

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

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

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

```sh
deno run -A npm:@lazarv/react-server build ./App.jsx
```

## Production mode

To start your application in production, just use the `start` command. This will start your application in production mode. When using Bun or Deno, the start command runs the adapter's generated entry point directly.

```sh
pnpm react-server start
```

```sh
npx react-server start
```

```sh
yarn react-server start
```

```sh
bun --bun react-server start
```

```sh
deno run -A npm:@lazarv/react-server start
```

> **Note:** if you don't want to install the `@lazarv/react-server` package and you just want to try out something quickly, you can use `npx` to run the `react-server` CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a `.jsx` file with a React Server Component exported as default to run your application. Just run `npx @lazarv/react-server ./App.jsx` to start your application in development mode. When using Bun, you can use `bunx --bun @lazarv/react-server` to run the `react-server` CLI. When using Deno, you can use `deno run -A npm:@lazarv/react-server ./App.jsx` to start a development server.

## Next steps

Success! You have now created your first application using `@lazarv/react-server`.

Here are some recommended topics to learn more about. You can read these in any order you would like. You can even leave for now to start building your application and come back when you run into trouble or have a question.

> Don't forget that you can join a discussion on [GitHub Discussions](https://github.com/lazarv/react-server/discussions) if you have any questions or need help.

#### Integrations

##### How to integrate with other libraries

Learn how to integrate with other libraries and how `@lazarv/react-server` works together with tools like Vite, TypeScript, Tailwind CSS and more.

      Learn more

#### Features

##### Advanced features

Learn about the advanced features of `@lazarv/react-server`, like how to access the HTTP request and response objects, how to use caching, or how to build a micro-frontend application.

      Learn more

#### Router

##### File-system based router

Learn how to use the file-system based router to create a full-fledged application with nested routes, dynamic routes, and more.

      Learn more

You can also learn more about `@lazarv/react-server` by reading the following tutorials. These are not required to get started, but they can be helpful to understand some of the concepts and features.

#### 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

#### 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

#### 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