# Your first application

Welcome to your first application using `@lazarv/react-server`! In this tutorial, you'll learn how to create a simple application that renders a "Hello, World!" message.

## Prerequisites

Before you begin, make sure you have the following installed on your machine:

- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), or [pnpm](https://pnpm.io/)

We will use `pnpm` in this tutorial.

## Install

To initialize and create a new application, run the following command in your terminal:

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

This command creates a new directory called `my-first-application`, initializes a new `pnpm` project, and installs the `@lazarv/react-server` package. You don't need to install `react` or `react-dom` separately because `@lazarv/react-server` includes them as it's own dependencies and the runtime requires specific versions of these packages to work correctly.

## Create a React Server Component

Next, create a new file called `App.jsx` with the following content:

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

This file exports a React Server Component that renders an `h1` element with the text "Hello, World!".

## Development

To start the development server, run the following command:

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

This command starts the development server and renders the `App` component. Open [http://localhost:3000](http://localhost:3000) in your browser to see the "Hello, World!" message.

The `./App.jsx` argument specifies the entry file for the server. You can replace it with the path to your React Server Component file.

We used `pnpm` to run the `react-server` script from the `@lazarv/react-server` package. You can also add a `dev` script to your `package.json` file for convenience:

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

Now you can start the development server with the following command:

```sh
pnpm dev
```

## Build

To build your application, run the following command:

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

This command generates a production build of your application in the `.react-server` directory. You can deploy this build to a server using any Node.js hosting provider or host on your own server.

You can also add a `build` script to your `package.json` file for convenience:

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

## Production

To start the production server, run the following command:

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

This command starts the production server and serves the built `@lazarv/react-server` application. Open [http://localhost:3000](http://localhost:3000) in your browser to see the "Hello, World!" message.

You don't need to specify the entry file for the server because the build output is already configured to serve the application.

You can also add a `start` script to your `package.json` file for convenience:

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

## Using npx

When you have a small project and don't want to install `@lazarv/react-server`, you can also use `npx` to run your application, even without installing any dependencies, just which your application needs directly, but not the runtime itself or React. You can run the following command to start the development server with `npx`:

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

This mode is useful for quick prototyping or sharing your application with others. You can also use `npx` to run the `build` and `start` commands:

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

## Conclusion

Congratulations! You have created your first application using `@lazarv/react-server`. You can now build more complex applications using React Server Components, client components and server functions.