Deploying Remix application to Cloudflare Pages

Cloudflare Pages is a solution for hosting our static web applications. Static in a sense, but made dynamic through pulling in data at build time and further layering a dynamic experience in the browser.

In December 2021, Cloudflare announced the beta of Cloudflare Pages: a fast, secure, and free way for frontend developers to build, host, and collaborate on Jamstack sites.

By making requests to APIs, whether self-hosted or through the number of services from content management or Headless CMS for authorization, we can give just as dynamic of an experience as one would expect from a server rendered approach.

When we are in need to deploy your JAMstack application with limited workflow setup and configuration, Cloudflare is a excellent choice that will have our application up and running within minutes.

Let's dive into how ca we deploy a Remix application with Cloudflare Pages. Not only that we will also take a look into branching and preview branch deployments. This is one of a supercool 😎 feature of Cloudflare Pages features.

I assume you have an account created in Cloudflare Pages. If you don't have please head to the dashboard.

Creating a Remix Application

We will first begin creating our project fullstack app with Remix, with the command below

npx create-remix@latest

Select Cloudflare Pages for our deployment target.

Lets go ahead and run the Remix application with the command

npm run dev

This should spin up a local server with a port running(probably 8788).

Pushing to Github

We can do the needful changes and push our progress to Github. Where we will push our code repository there.

So create an new empty project in Github. And use the commands to push changes into Github.

One by one you needed to the add the commands. The commands are also listed below for your convenience

echo "# remix-cloudflare-deploy" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/***your_username***/remix-cloudflare-deploy.git
git push -u origin main


git add .
git commit -m 'second commit'
git push origin main

After all the commands you should see our application is inside of github.

Creating a project in Cloudflare Pages

Inside your logged in Cloudflare dashboard. You can navigate into Pages and create a new project from there.

After you have connected to Github through Cloudflare you must see the interface below. With active Begin setup button.

Deployment (main)

Please note you might need to give Cloudflare permission to access your file or access all files.

You can select Remix from the Framework of choice and everything will be fine as a default. After we deploy we should be presented with a screen of URL of deployment.

Deployment (branch)

Let's add a preview branch deployment to our projects. We will run the following command to checkout into a new branch and deploy a preview branch.

We will name our branch preview

git checkout -b 'preview'   
git commit -m 'preview test branch'
git push origin preview

We can click on the orange dot to see the deployment in progress. We will create this into a Pull Request (PR). After a successful PR is created for a desired target branch we can head to our Dashboard.

We can now see there are two URL that are being served in the dashboard. And both have their own URL.

This is really handy if we want to test some features in a experimental mode, sync with other team members, share a link and more benefits included.

Conclusion

Cloudflare full-stack Pages are a great choice for developers looking to deploy applications via a single git commit.

Even we have a preview links which is really helpful.

In this article, we covered how to deploy Remix application into Cloudflare Pages from GitHub.

I hope this is helpful. Happy Coding!