You've done it, you've finally created your React application but you can't let it sit on your local machine forever can you? Are you looking to effortlessly deploy your React applications? Cloudflare Pages might just be the solution you've been searching for.
With its user-friendly interface and seamless integration, Cloudflare Pages stands out as a top choice among the various options available for hosting static websites.
Out of a lot of options that are available to host static websites like Vercel, Netlify, etc, Cloudflare Pages seems like it offers one of the most fluid and easy-to-use interfaces to deploy your React applications.
Stay Tuned to learn how you can deploy a React App using Cloudflare Pages!
Deploying Using Cloudflare Pages
Step 1. Run the below command to create a React App.
npx create-react-app my-app
Once the App is ready, create a new Public Repository on Github and push your React app onto it.
Step 2. Once your React app is ready, go to the Cloudflare Pages website.
• Create an account and sign in to it.
• After signing in, click on the Pages button as shown below,
• Click on Create a Project and click on connect your Github account.
• Choose your Github Account and select one of the two below options
• All Repositories
Once you select this option, you only need to click the button
Install & Authorize
• Only select Repositories
Once you select this option, then you can choose the repository
where your React application is present in. Finally, Click on the
Install & Authorize button
• Next, Make sure that the repository you clicked is selected, and then click on the Begin setup button
• After this, you will be taken to the Set up builds and deployments page.
• On scrolling down, you will find a section called Build settings. We can select the appropriate build process for our application in this section.
• Click on the Framework preset dropdown and select Create React App
• You should notice that the build command has already been auto-filled.
• You can also choose where you want the build folder to reside inside your project in the Build output directory input field.
Note: Make sure that the folder where you want the build directory to go in already exists in your project as Cloudflare won't be creating it on its own.
• Make sure to add in any environment variables that are being used and just in case your React App exists inside of a subdirectory, please mention the root of the application like /subdirectoryname under the Root directory option.
• Once all this is done, Click on the Save and Deploy option.
• Wait for Cloudflare to deploy your project which generally takes a few minutes.
• And, Voila! Your application is successfully deployed. Cloudflare gives you an URL and upon clicking on the URL you can have a look at your deployed application.
That's it! You have managed to successfully deploy your React application on Cloudflare Pages very quickly. I hope you guys enjoyed reading this blog.
That's it from my side. Hope you folks have a great day!
Note: Cloudflare Pages also supports continuous deployment which means that whatever changes you make on the website through Github automatically show up on the deployed application. How cool is that?