My app is a React application built with Vite, which means it generates static assets (.html, .js, .css) and is a great fit for Cloudflare Pages. My project is also using Supabase for database CRUD, and since this will be a client-side dynamic app, which is supported for free on Cloudflare Pages.
I'll deploy my project to CloudFlare Pages and as a bonus at the end connect it to a subdomain as well. My primary domain is already in Cloudflare.
To build my ReactJS + Vite project I did vite build and it created a dist folder that has the output of my web-app.
Login to your Cloudflare dashboard and go to Compute (Workers) and you'll see something similar to this:
Go to Pages and click on the Get started next to Import an existing Git repository option:
Make sure your github is connected. Select a repository and click on Begin Setup
Next you need to add Project Name, Select a branch to which when you'll commit the code to will auto-build and deploy the project.
For me my output directory is dist and path is / however the EVN that were production related in my app I have added them in Environment variables as well. The Framework preset as my project is a ReactJS project created using Vite.
Finally click on Save & Deploy and it should start deploying.
It should take a few minutes and then deploy your app to a pages.dev route.
Bonus: Making a free sub-domain on Cloudflare
I already have my paid .com domain so I'm going to create a sub-domain and will open the above deployed website to it. To do it just go to Custom domains in your Worker & Pages project and follow the instruction. It'll ask you to add a CNAME record and that's it.
Top comments (0)