Deploying React Apps with Choreo and Managed Databases
In today’s rapidly evolving digital landscape, creating a scalable, efficient, and responsive web application is a fundamental requirement for businesses and developers alike. Every developer dreams of an easy process to build a robust application and take their code to production smoothly.
In this article , we will walk you through how we can use the power of Choreo to deploy a React application and connect it effortlessly to a managed database.
We will be using the example project ‘CareConnect: Medical Appointment Booking System’ a medical appointment booking system designed to make scheduling healthcare visits easy. It features a user-friendly web interface for patients and a backend that manages appointments. CareConnect uses the Backend for Frontend (BFF) pattern to ensure smooth communication between the frontend web application and the backend services. The system is divided into two main parts: the Web Portal, which handles user interactions and provides a responsive interface for managing appointments, and the Appointment Management backend, which coordinates appointment scheduling and database operations.
Let us now explore how we can use the features in Choreo to deploy this application and connect a database seamlessly.
Pre requisites
- A Choreo user account.
- Fork and clone this repository to your local machine.
Now let’s create our application and deploy it in Choreo.
Step 1 — Create a Database
From the left menu of the Organization home page select Dependencies → Databases and provide the following information.
Storage type — My SQL
Service Name — appointmentsdb
Select Cloud Provider — Digital Ocean
Select Region — United States
Select Service Plan — Hobbyist
and then click ‘Create’.
Step 2 — Create Components
From the Organization home page , create two projects ‘Web Portal’ and ‘Appointment Management’ by clicking the + Create Project button.
Then navigate to the ‘Appointment Management’ project.
Step 2.1 — Appointment Service
Create a Service by providing the following information :
Component Name — Appointment Service
Authorize with GitHub and Connect Your Repository -<YOUR_FORKED_REPO>
Branch — Main
Buildpack — NodeJS
Project Directory — /appointment-management/appointment-service
Language Version — 20.x.x
Once the component is created, navigate to the ‘Build’ page from the left menu. Click on ‘Build latest’ to build the component from the latest commit.
Once the build is successful , navigate to the ‘Deploy’ page from the left menu. Click on ‘Configure & Deploy’ in the Set Up card.
Add the following key-value pairs in the Environment Configurations’ section.
DB_HOST : <your_db_host>
DB_PORT : <your_db_port>
DB_NAME : <your_db_name>
DB_USER : <your_db_user>
DB_PASSWORD : <your_db_password>
Navigate to Organization → Dependencies → Databases → appointmentdb to find the corresponding values from the database we created earlier. Complete the wizard and click ‘Deploy’.
To promote your app to the production environment, click ‘Promote’ and select the ‘Use Development configuration’ option from the right drawer. This will use the same configurations that were provided to the development environment.
Step 2.2 — Web Portal Backend
Let’s now create another component with the backend of the WebPortal . Navigate to the ‘Web Portal’ project from the organization home and create a component for the Backend for Frontend(BFF) service by providing the following details :
Component Name — BFF
Authorize with GitHub and Connect Your Repository — <YOUR_FORKED_REPO>
Branch — Main
Buildpack — NodeJS
Project Directory — /web-portal/backend
Language Version- 20.x.x
We will now create a connection to the appointment service. Navigate to the newly created component then go to Dependencies → Connections from the left menu and click ‘Create’. Select ‘Appoinment Service’.
Provide a name for the connection and click ‘Create’. Once the connection is created, copy and paste the connection configuration snippet into the component-config file to integrate the connection into our application.
Now, open the cloned repository in your preferred IDE and add the connection configuration snippet to the <YOUR_REPO>/web-portal/backend/.choreo/component-config.yaml file and push the changes to the remote repository. Once the connection config is added to the config.yaml file, the changed file will look like this :
Once the changes are pushed, navigate to the Build page inside the component and build the latest commit.
Once the build is successful, navigate to the Deploy page and select ‘Configure and Deploy’. Once the deployment to the dev environment is completed, promote it to the production environment.
Step 2.3 — Web Portal Frontend
Let’s now create a component for the Web Portal Frontend. Navigate to the ‘Web Portal’ project and create a ‘Web Application’ component by providing the following details :
Component Name — Webportal Frontend
Authorize with GitHub & Connect Your Repository — <YOUR_FORKED_REPO>
Branch — Main
Buildpack- React
Project Directory — /web-portal/frontend
Build Command — npm run build
Build Path — /build
Node Version — 20
Navigate to the newly created component then go to Dependencies → Connections from the left menu and click ‘Create’. Select the service ‘BFF’.
Once the connection is created, copy the code snippet under the ‘Add Connection Configuration’ section. This config will be required during deployment as this application uses Choreo-managed authentication to authenticate the backend.
Navigate to the Build page and build the latest commit.
Once the build is successful, navigate to the Deploy page and select the ‘Configure & Deploy’ option. In the wizard , add the copied configuration as shown below and deploy the component.
Step 3 — Configuring Choreo Built-in Identity Provider
For the last step, let’s configure the Choreo IDP. For this, navigate to the ‘Application Security’ section of the Organization settings page.
Click on ‘Manage’. Under the ‘Manage IDP’ section , for the development environment, select the <YOUR_FORKED_REPO>/web-portal/frontend/userstore.csv file to create a user store and click on Upload.
Once the user store is created, usernames and groups will be visible under the Users section that you could use when trying out the application.
Navigate back to the Deploy page of the Webportal Frontend component and click on the WebApp URL to try out the application. Enter the following credentials to login to the portal :
Username — john
Password — user@1234
We have successfully deployed an application in Choreo with just a few clicks.
Visit Choreo to explore everything you need to build apps on the cloud.
