Building a React app is fast—deploying it should be too. Whether you're testing a prototype or launching a production app, Choreo simplifies the process of getting your React app live with built-in CI/CD, infrastructure abstraction, and a powerful developer console.

In this guide, I’ll show you how to deploy a Hotel Booking React app using Choreo in just five minutes—no Docker, no YAML. Just code, connect, and deploy. The sample app lets you search for rooms based on type, number of guests, price, room size, and additional filters like breakfast included or pet-friendly.

What is Choreo?

Choreo is an AI-native Internal Developer Platform (IDP) that simplifies the development, deployment, and management of cloud-native applications. It abstracts away infrastructure complexity so developers can focus on writing code. Choreo supports your entire app lifecycle—from code to production.

Why Use Choreo to Deploy Your React App?

• Fast Setup: Choreo’s React Buildpack handles builds and dependencies—no manual configuration needed.
• One-Click Deployments: Deploy in minutes, not hours.
• Effortless Backend Integration: Connect securely to backend APIs.
• Built-in Auth: Easily integrate OAuth2/OIDC for secure authentication.
• Simple DB Provisioning: Set up and manage databases quickly.
• Real-Time Monitoring: Get insights into performance, errors, and app behavior.

Pre-requisites

1) Choreo user account.
2) Fork this sample repository.

Deploy Your App

1) Sign up or login to Choreo.

2) Select the Developer persona and click Next.

3) A default project will be created for you. If you require to create a new project you can do so by navigating to the organization view and click the +Create Project button.

A project in Choreo is a logical group of related components that typically represent a single cloud native application. A project consists of one or more components.

Let's go ahead with the default project.

4) We will now create a Web Application component.

In Choreo, a component within your project signifies a singular unit of work in a cloud-native application. This can take the form of a microservice, API, web application, or job/task. Each component is linked to a specific directory path in a Git repository, housing the source code for the program.

i) Click the Web Application card.

ii) The next step is to connect the Github repository. Click Authorize with GitHub to connect Choreo to your GitHub account. If you haven't connected your GitHub repository to Choreo, enter your credentials and select the repository you forked earlier to install the Choreo GitHub App.

iii) Provide the following details
Organization: (your GitHub account)
Repository: React-Project-Hotel-Room-Booking
Branch: main
Project Directory : Click Edit and select the react-beach-resort-dev directory
Display Name: Hotel Booking
Buil Preset: React
Build Command: npm run build
Build Path: /build
Node Version: 16.8.0

iv) Click Create and Deploy. This will create your web application component and automatically build and deploy it as well.

5) You will be directed to the component overview page which will show you the status of your component. Once your component is successfully build and deployed you will see the following view.

6) Click on the Web App URL to tryout and see if your app is working as expected.

If your app is working as expected you can now promote it to the development environment.

7) Navigate to the Deploy tab and click on the Promote button in the Development card.

i) Select the Use Development configurations option and click Next.

ii) Click Next in the configurations tab since we dont have any configurations and finally click Promote.

8) Your have successfully promoted your web app to the production environment. Click the Web App URL to view your web app.

You have successfully deployed a React web application effortlessly with Choreo with just a few clicks!

Sign up for free today and see how Choreo can help you easily deploy your web app.