Choreo by WSO2 is an AI-Native internal developer platform (IDP) that simplifies and accelerates the development, deployment, and management of cloud native applications. It provides a unified platform for both platform engineers and software developers, offering a range of services through a single interface.
In this article, I'll guide you through deploying a React (Vite) application in Choreo, from start to finish. This is one way to deploy your React (Vite) application in Choreo. You can start with your own Vite project or just use this sample project. First, clone the Project and run it locally. When we deploy a React application choreo, we should specially configure something instead of taking the environments from envs. Specially In choreo, we can't import things directly from envs like in the below when we move with this approach.
❌ const apiUrl = import.meta.env.VITE_API_URL
We should configure all these variables from the window config. This window config is a custom global object that developers (or a framework/platform) inject into the browser at runtime to expose configuration values to client-side code. So when you build the project, make sure to access the service/API URLs through window configs, like in the example below.
This is how you can access it at the code level in your project. (where you use the configs)
This is how you can access it at the code level in your project. (where you use the configs)
const apiUrl: window?.configs?.apiUrl ? window.configs.apiUrl : "//localhost:8081"
So this uses the apiUrl from the window configs if you provided, otherwise it redirects to the localhost:8081, where you run your local service.
Once you're done with the above step, you should create a config.js file inside the public directory in the React(Vite) project and link that inside the script tags in the index.html file. Then, choreo will identify the config.js file inside the public folder. When you link it in the config file no need to put 'public/config.js' because Choreo can identify the config file inside the public folder. So just put 'config.js'
<script src="config.js"></script>
Now your project is ready to deploy. If you're done with your work. Try 'npm run build' and see how the build works. When you run the build command, it creates another directory called 'dist' inside the root and creates all the static pages of your site. There, you can see the index.html file where the actual web page starts. All other components and other stuff in your application can also be seen in static types. If everything is done, then let's move to the deployment step in Choreo.
There, you can create a project by giving a name.
After that, you can see the component type you can select. In our case, we should choose a Web Application since we are going to deploy a React(Vite) application. After that, you will have an option to continue with a repository. You have a few options, like continue with GitHub, use a public repository, try a different Git Provider such as Git lab, Bitbucket, or connect with a Docker image.
Since our plan is to use static deployment without Docker, you can connect your repository directly.
After that, you will get some options to select the Branch, Component Directory, Names, and Build Details & Commands.
Choreo selects the main branch as the default branch that we want to build, but you can change it as you wish. Make sure to select React in the Build Preset, and the Build command should be "npm i && npm run build". What this command does is it installs all the packages that are needed to run our application (it takes the package details from package.json in the repository) and builds the project. So then we will have a dist folder in the root of the project inside the container. Then we can add 'dist' as the build path to map the container with the folder, where all our static files are stored after a successful build process. Set the Node version to 20 for now, but it can be changed based on the packages you're using because some packages require a higher Node version.
✅ Then create & deploy
Then go to the Build tab, and you can see the build process. If you want, you can configure the container to auto-build the latest commit, so it will take the newly merged changes from the current selected branch in the repository and rebuild the project. Meaning all the newly changed will be available immediately on the webpage after a successful build.
This is how it shows after a successful build. Now you're done with everything, just a few steps to complete this 😁
Now, click on the Deploy button under Actions, then it redirects to the deploy page. There you can see three stages, as Set Up / Development and Production. So, your web application is already live, and you should configure the Service URLs/API URLs if your application uses separate backend services. I mentioned above, you can access the variables through the window configs.
So click on the down arrow and select "Configure and Deploy" in the Set Up panel.
Then it shows a small configuration. For authentication, you can disable that authentication service for now. After that, you will get the option to select the config.js file which is already identified by Choreo from the public directory in the repository.
After that, there is a text box to configure the service URLs and other stuffs. There you can set the values like I show in the below.
This is how you can add your configurations.
window.configs = {
apiUrlOne: "<paste your first service url here>",
apiUrlSecond: "<paste your second service url here>
}
If you have more things to configure here, you can do, but make sure you access those in the same way you did earlier.
If you are getting an error, some like in the below, mostly its related to the config error.
Uncaught SyntaxError: Unexpected token '<' (at config.js:1:1)
✅ If you follow all the steps. Hurray!!! Your React(Vite) Application is live now!
Additional: If you're still in the development phase, just keep the changes in the development panel; otherwise, you can promote it into production :)
Thank you for reading! Feel free to drop your comments below! Have a nice day!
