React App on Cloudflare Pages

You have a React app already pushed to a GitHub repository but have no idea where to deploy it. Then you can use Cloudflare pages as your deployment choice for frontend applications built with react, next-js, preact and so on. I am using this demo repository with React for this tutorial.

https://github.com/amanmagar/vite-cf-pages

This tutorial will be focused on the Cloudflare platform and how we can simply deploy and create a CI/CD pipeline along with it on this simple tutorial.

1. Firstly you need a Cloudflare account and once you have created an account, you are greeted with a home page.

2. You need to navigate to the Workers & Pages tab on the left of the screen. You can directly upload the static files or connect it to GitHub which I will be doing here.

   

3. Then you will be redirected to Github where you can authenticate to your Github Profile so that Cloudflare can import the repositories from GitHub to their platform. You can choose which repositories to provide access to. Once everything is done, you will be redirected to the Cloudflare Pages again.

   

4. Now the process on the Cloudflare Platform starts. You need to start from here.

   

5. After this, the application needs to be configured for its deployment. You need to check your application requirements and configure it accordingly.
   The main settings to look at here are:

   • Project name: name of the cf pages project. You can leave it at default

   • Production branch: The branch where the production code stays

   • Framework preset: Cf pages provide default configuration for different frameworks available if not we can manually define our build command and build output directory

   • build command: define the project build command to generate the static assets for deployment. In my case, it is "yarn build"

   • build output directory: the directory where the static assets reside after the build command has been completed. Here it is "dist/"

   • environment variables: This will contain all the environment variables that are defined in the application during the build. I don't have any so I am not using it.

     NOTE: always define NODE_VERSION and YARN_VERSION/NPM_VERSION as what you are using for the application requirements as a dev environment else it has given you issues during building the application.

     

6. If everything goes right, you will get this screen. A good thing about Cloudflare pages is that it will provide a sub-domain where you can see your deployments.

   

7. Now the deployment is automatic which will trigger on the push to the production branch on Git Hub.

8. You want to run this project on your domain like I can with amansamalmagar.com.np. Then we can do so if we have other DNS already being run on Cloudflare.

   • Go to the custom domain settings on Cloudflare Pages and provide the sub-domain that you want the project to run on.

     

   • Press on Activate Domain on the right

     

   • Once it's done and activated, This is shown on the screen. Now you can access the application on vite.amansamalmagar.com.np

     

I hope that this small tutorial will help you to configure a basic hosting platform for your frontend requirements in Cloudflare Pages with its inbuilt CI/CD and different functionalities that you can use through their free plan.

Feel free to contact me on my LinkedIn or create an issue on the Github.

Thank You and Stay Safe.