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.

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

• Node.js
• npm, Yarn, or pnpm

We will use pnpm in this tutorial.

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

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 framework requires specific versions of these packages to work correctly.

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

./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!".

To start the development server, run the following command:

pnpm exec react-server ./App.jsx

This command starts the development server and renders the App component. Open 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 the pnpm exec command 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:

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

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

pnpm dev

To build your application, run the following command:

pnpm exec 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:

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

To start the production server, run the following command:

pnpm exec react-server start

This command starts the production server and serves the built @lazarv/react-server application. Open 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:

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

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 framework itself or React. You can run the following command to start the development server with npx:

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:

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

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 actions.