• Get application security done the right way! Detect, Protect, Monitor, Accelerate, and more…
  • Deploying frontend applications is one of the big problems a time ago. But today, it’s a piece of cake. Even a fresher can deploy applications with the help of super hosting services.

    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 no going to discuss it here now.

    We know that there are many libraries, 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.

    npx create-react-app demo

    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.

    GitHub Repository

    • A newly created repository will look as follows. It shows some git commands to fill your repository with code.

    GitHub Repository

    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 [email protected]:username/repo_name. My repository path for the demo is [email protected]: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.

    GitHub Repository Code

    JavaScript Repository Code

    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.

    Cloudflare Pages Dashboard

    • If you have logged into the Cloudflare website, then you may not see your pages’ dashboard.
    • Navigate to the pages’ dashboard by click on the Pages button on the right side of your Cloudflare dashboard. Refer to the below image.
    Cloudflare Dashboard
    Cloudflare Dashboard
    • Click on the Create a project button from the pages’ dashboard.
    Create Project
    Create Project
    • You will navigate to the following page.
    Project - First Step
    Project – First Step
    • 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.
    GitHub Cloudflare Pages Authorization
    GitHub Cloudflare Pages Authorization
    • 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.
    Repositories Dropdown
    Repositories Dropdown
    • Enter your repository name as follows.
    Search Repository
    Search Repository
    • 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.
    Selected Repository
    Selected Repository
    • 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.
    Authorized Repositories
    Authorized Repositories
    • Select the repository that you want to deploy.
    Selecting the Repository to Deploy
    Selecting the Repository to Deploy
    • After selecting the repository to deploy, click on the Begin setup button.
    Begin setup
    Begin setup
    • It will take you to the next steps in the deployment process, i.e.., Set up builds and deployments.
    Set up builds and deployments
    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.
    Build - Framework Preset Options
    Build – Framework Preset 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.
    React App Build Config
    React App Build Config
    Plain JavaScript Build Config
    Plain JavaScript Build Config
    • 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.
    Deploying Process
    Deploying Process
    • The process will take 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.
    Deployment Success
    Deployment Success
    • Visit the site with the given URL.
    Demo Live
    Demo Live
    Demo Live
    Demo Live
    • We can update the settings of the site from the project page.
    Site Settings
    Site Settings
    • 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 🙂