How to Build and Deploy a Vite + React App on Choreo
Now let’s build and deploy this on Choreo
First, go to console.choreo.dev, where you will see your organization’s homepage
On the home page click + Create Project, enter the project name, and click Create a new project, this will create a new project
After creating the project, click on the Web application card under the Create a single component section and enter the name and description for the component
To connect your GitHub repository to this component, click Authorize with Github and select the repository you created for this.
After connecting your Github repo, select the Buildpack and enter the necessary information related to this demo.
Buildpack : React
Project directory : /
Build command : npm run build
Build path : /dist
Node version : 20(or your version)
Now click the Create button and this will create our component successfully.
After the component is created successfully go to the build section on the left sidebar on the dashboard and click build latest,
Once the build process is complete, you can proceed to deploy your application
So for that, go to the deploy section and in the setup card, click ‘Configure and Deploy’
After this, a sheet will open on the left side where you can add file mounts and authentication settings. In this demo, I will not add any file mounts or authentication, so you can skip that part (remember to turn off ‘Choreo Manage Authentication’ in the authentication pane).
Now you can click the deploy button, and this will deploy the application to the development environment. After a few minutes, you can see that the deployment status is successful.
To verify that you have successfully hosted the web application, click the Web App URL on the Development card
Now we have successfully deployed our Vite + React app to Choreo
If you want, you can promote this to the production environment by clicking the ‘Promote’ button on the development card. Additionally, you have the option to set up a short URL prefix for your application on the production environment
you can check my Github repo for this demo here:
https://github.com/chamals3n4/vite-choreo
In short, today we learned how to build and deploy a Vite + React app on Choreo. W/ Choreo, deploying cloud-native apps is a breeze
You can find more information and advanced concepts about Choreo in their documentation
Thank you for reading this article. Happy coding !!
