Many hosting platforms allow us to deploy frontend applications in minutes. Our site will be ready publicly in minutes. Isn’t it great? Yeah, it is. Let’s learn how to deploy frontend applications on Cloudflare Pages.
Frontend Applications
Before diving into the deployment part of the application, we need to create one frontend application. How to do it? Even you know it. So, we are not going to discuss it here now. We know that there are many libraries, and frameworks out there for us to create frontend applications. But, the core part of those libraries or frameworks is JavaScript. You know all that stuff, as you are already looking for a way to deploy your frontend application. You may skip this part and jump to deployment if you are only looking for the deployment part. There is React, Vue, Angular, JavaScript, and many more. One can create applications based on their requirements. As we can see, there are a bunch of options to create frontend applications. What about the deployment? Is it the same process for all frontend applications? Yeah, the deployment process is the same for all frontend applications. But, the process which makes frontend applications ready for deployment may vary based on the libraries and frameworks. There will be a command to build for most of the front-end applications built with libraries and frameworks. You may already know about it. If you don’t know what it is, you may have to look into it based on your frontend library or framework. We need an application to deploy. Let’s set up a simple application. You may skip this part if you already have a frontend application to deploy.
Setup
Before setup, we need to be aware of one thing. The entry point must be index.html for our frontend application to deploy it to Cloudflare pages. You may find the file index.html (location may vary based on library and framework) after the build process. We are going to create a simple React and Plain JavaScript application for the demo. You may choose any other library or framework that you are familiar with. Let’s set up React application first. Run the following command to create React application. Update the app with your creativity, or leave it as it is. I will just change something to make sure it’s deployed correctly at the end. Now, let’s create a plain JavaScript application. Having index.html is mandatory for us. So, let’s create the file with the name index.html. Now, you may add more files like styles.css, script.js, images, etc.., to make it look fancy. But it’s not mandatory, though :). Our simple setup for deployment is now completed. What next? It’s deployment time. Dive into it.
Deployment
Cloudflare pages allow us to deploy our frontend application from GitHub. So, there are two parts to the deployment process.
First, we need to have our application code on GitHub.Second, deploying the application to Cloudflare pages.
Most of the time, you won’t have to worry about the first part as we maintain our code in hosting platforms from the first day of the project. You may skip the first part and head over to the deployment part. If you haven’t pushed your code to GitHub or it’s in other code hosting platforms, you may have to shift it to GitHub to deploy to Cloudflare pages. You may follow the below steps to push your code to GitHub or do it on your own.
1. Pushing Code to GitHub
Do you have a GitHub account? Yeah, I guess in most cases. In case if you don’t have one, create one here.
Go to GitHub and log into your account.Create a repository with your project name. Here, we are naming it like the demo.
A newly created repository will look as follows. It shows some git commands to fill your repository with code.
Let’s push our code to the repository that we have created just now. You may follow the below steps or do it yourself if you are familiar with it already. Let’s start by opening our project in terminal or cmd.
Initialize the git with git init command.Add all your changes to local git using the command git add ..Commit the changes with git commit -m “message” command. Replace the message with a suitable message for the commit.Now, we have to connect our remote repository to the local project.Command to connect it is git remote add origin ‘your_repo_path’. Replace your_repo_path with your remote repository. The repository path will be as follows git@github.com:username/repo_name. My repository path for the demo is git@github.com:hafeezulkareem/demo.The final step is to push the code to our remote repository. We can do it using the command git push -u origin main.
Let’s see the snaps of code in the GitHub repository. We are done with pushing our code to Github. Our next task is to deploy it to the Cloudflare Pages. Without further ado, let’s start deploying.
2. Deploying to Cloudflare Pages
Let’s deploy the site to Cloudflare pages. Before going to further, we have to create a Cloudflare account. If you already don’t have an account in Cloudflare, then create one here. After the completion of creating the Cloudflare account, you are ready to deploy your site.
Go to the Cloudflare Pages site.Login to your account. You will see the dashboard as follows.
If you have logged into the Cloudflare website, then you may not see your pages’ dashboard.Navigate to the pages’ dashboard by clicking on the Pages button on the right side of your Cloudflare dashboard. Refer to the below image.
Click on the Create a project button from the page’s dashboard.
You will navigate to the following page.
Click on the Connect GitHub account to get our application repository from GitHub.You will be redirected to the GitHub apps page to authorize Cloudflare Pages.
We can give access to all repositories or selected ones. It’s better to give access to the repositories that we are deploying to Cloudflare Pages. You may give access to all the repositories if you want to.Select one of the two options.If you have selected All repositories, there is no need to select the repositories’ specific repository. Click the button Install & Authorize.If you have selected Only select repositories, then you have to select repositories from the dropdown. Click on the Select repositories dropdown that appears after selecting the Only select repositories option.
Enter your repository name as follows.
Your repository will be shown once you enter the name. Select the repository. You can see the selected repository at the top of the list as follows.
Click on the Install & Authorize button. You will be redirected to the Cloudflare Pages deployment page.You will see all authorized repositories on the page.
Select the repository that you want to deploy.
After selecting the repository to deploy, click on the Begin setup button.
It will take you to the next steps in the deployment process, i.e.., Set up builds and deployments.
When you scroll down, you will find a section called Build settings. We have to select the appropriate build process for our frontend application.We have to select the build process based on the framework or library we are using.Click the Framework preset to see all options.
Here, we are deploying React and Plain JavaScript applications.If you are deploying a React application, then select Create React App from the dropdown.For a Plain JavaScript application without any packages, then select None.
If you are deploying some other frontend application, then select the appropriate Framework preset build option.We can select None and enter the custom build command as well. Based on your application, select it.After the build config setup, click on the Save and Deploy button to finish our deployment process.Once you click the Save and Deploy button, the deploy process will start as follows.
The process will take a few minutes to deploy our site. Wait and enjoy.After the completion of the deployment process, it shows you the site URL with a success message.
Visit the site with the given URL.
We can update the settings of the site from the project page.
Cloudflare pages will automatically deploy the updates whenever we push new code to the repository.
That’s it. We are done with deploying our frontend application to Cloudflare pages.
Conclusion
Hurray! we have deployed our frontend application to the Cloudflare Pages. After deploying the frontend application, you may have to change settings, update things, etc..; refer to the Cloudflare documentation here. If you want to see the steps to deploy a specific framework guide, you may head over to the framework guides section in the documentation. Next, how about deploying the frontend to Netlify? Note: The demo sites shown in the article may not be available publicly after some time. Happy Deploying 🙂
