Deploy Your React App with Choreo in Just 5 Minutes
In today’s fast-paced development world, efficiency and speed are paramount. Every developer dreams of a streamlined process that takes their applications from code to production rapidly without compromising on quality or performance. This is where Choreo, an innovative Internal Developer Platform, steps in.
This article will guide you through deploying a Hotel Booking React app using Choreo in as little as five minutes. The Hotel Booking app will let you search for rooms based on room type, number of guests, price, room size, with breakfast included and pets allowed.
Introduction to Choreo
Choreo is a comprehensive platform designed to simplify and accelerate the development lifecycle of applications. By integrating development, operations, and observability into a unified platform, Choreo stands out as a powerful platform for developers and helps deploy applications effortlessly.
Why Choose Choreo for Your React App?
Before we dive into the deployment process, let’s explore why Choreo is an excellent choice for React developers:
- Simplicity: Choreo’s intuitive interface and straightforward processes eliminate complexity, making deployment a breeze.
- Speed: Deploy your applications in minutes, not hours or days, with Choreo.
- Scalability: As your application grows, Choreo grows with you, ensuring your app remains fast and reliable.
- Integrated Tools: From source control to CI/CD, Choreo provides all the tools you need in one place.
- Security and Reliability: Choreo’s robust infrastructure ensures your application is secure and available when your users need it.
Pre requisites
- Choreo User Account.
- Fork this sample repository.
Deploy Your React App in 5 Minutes
- Sign up or login to Choreo.
2. Create a Project by clicking 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.
i) Add the following details,
Name: Luxury Travels
Repository: Multi-Repo
ii) Click Create.
3. 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 and provide Hotel Booking as the component name and provide a description if necessary.
ii) Click Authorize with Github to authorize your GitHub account.
iii) Provide the following details
Organization: <your GitHub account>
Repository: React-Project-Hotel-Room-Booking
Branch: main
Buildpack: React
Project Directory : Click Edit and select the react-beach-resort-dev directory
Build Command: npm run build
Build Path: /build
Node Version: 16.8.0
iv) Click Create to create the component.
4. Navigate to the Build tab from the left navigation menu. Click the Build Latest button. It will build the latest GitHub commit in your repository.
Once your build is successful you will see the following.
5. Navigate to the Deploy tab from the left navigation menu. Click on the drop down in the set up card and select Deploy. Then click Deploy.
Once your app has successfully deployed to the Development environment you will see the following.
Click on the Web App URL and see if your app is working as expected.
6. Click the Promote button in the Development card to promote your app to production.
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.
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.
