Deploying an app with Cloudflare Pages (and Heroku)

Hello!

The inspiration for this blog post came from my final project for the Bootcamp I attended. However, it will not be so much about code but rather the experience of deploying the app and the fun new tools I got to use!

Important to note that I built my app using React for the frontend and Ruby on Rails for the backend, and I have two separate repos.

When it came down to deciding where to deploy the frontend I wanted to use Netlify. I had heard good things about it, and most of the blog posts I could find said this was a good option.

I knew I wanted a platform that:

1. It would be easy to work with as this is the first app I was deploying.
2. Low maintenance.
3. Something I haven't used before (part of the requirements for the project).

I had already registered a domain through Cloudflare, and through suggestions, I was introduced to Cloudflare Pages (still in beta but worth requesting access to).

Once you have access, it's as simple as creating a Cloudflare account and connecting to GitHub. To deploy it, you must opt to create a project and select a repository. The second part of the setup is your build settings. It's pretty self-explanatory. You select a framework and add a build command.

The image below displays what to do:

For more details on how to set this up, you can check out their documentation on the link below.

Getting started with Workers

The whole setup takes a few minutes to complete. After the first deploy, you only have to push your changes to GitHub, and Cloudflare Pages does the rest.

Once the app is deployed, it will have a custom subdomain, but as mentioned earlier, I did have a domain to connect.

In order to be able to use my domain and send HTTP requests to both the front and backend, I set up Cloudflare Workers.
Workers let you add JavaScript in between your website's visitors and your server (in this case my backend which was deployed on Heroku).

A Worker has two parts:

1. The event listener that listens to any requests being sent to the website, such for example a request to navigate to another page.
2. An event handler, which is set up to handle the requests, which in my case are sent to either Heroku or Cloudflare Pages.

This addEventListener registers the worker:

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

The event handler finds out if the request should go to the backend or the frontend by checking the URI. In my Worker, it checks the pathname to determine it.

Once it has determined where it should go, it rewrites the hostname to send it to its destination.

/**
 * Determines if URL goes to the backend or not.
 * @param {URL} uri
 * @returns {boolean}
 */
function isBackendRoute(uri) {
  // ...
}

async function handleRequest(request) {
  try {
    const uri = new URL(request.url);
    if (isBackendRoute(uri)) {
      uri.hostname = TRAVEL_TIPS_BACKEND_HOSTNAME;
    } else {
      uri.hostname = TRAVEL_TIPS_FRONTEND_HOSTNAME;
    }
    let res = await fetch(rewriteURL(request, uri.toString()));
    return new Response(res.body, res);
  } catch (e) {
    return new Response(`ouch! hit a snag: ${e.message}`, {
      status: 500,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }
}

I suggest reading the following to better understand how Workers work.

How Workers works

For the backend, Heroku worked well with Rails. I followed the instructions from the following guide:

Getting Started on Heroku with Rails 6.x

It automatically created a PostgreSQL database.

Final thoughts on Cloudflare Pages:

1. Easy to integrate
2. Documentation is pretty straightforward
3. The UI is user-friendly

Overall just a good experience. I look forward to creating other apps and deploying them with Cloudflare Pages.

If you get a chance, definitely check it out!