Deploy RedwoodJS Web Side with Cloudflare Pages

Cloudflare Pages is a Jamstack platform for frontend developers to collaborate and deploy websites. It’s a lot like {{ insert_favorite_Jamstack_host }}. Simply connect to a GitHub repo, supply the necessary build commands and publish directories, and deploy your site to the world with just git push.

At this time it is not yet possible to deploy the Redwood api with Cloudflare Workers. However, we can simply delete the api directory and deploy just the web side.

Create a Redwood App

The code for this article can be found on my GitHub.

yarn create redwood-app redwood-cloudflare-pages
cd redwood-cloudflare-pages

Delete api directory

rm -rf api

Generate home page

yarn rw g page home /

Include the following in HomePage.js.

const HomePage = () => {
  return (
    <>
      <h1>Redwood+Cloudflare Pages 🚀</h1>
      <p>Woot!</p>
    </>
  )
}

export default HomePage

Start development server

yarn rw dev

Create GitHub Repo

Create a blank repository on GitHub with the same name as your Redwood project.

Initialize repository

Initialize a git repo in your newly created Redwood project.

git init
git add .
git commit -m "Nailed it"
git branch -M main

Add remote to project

Make sure to use your own repo when setting the remote.

git remote add origin https://github.com/ajcwebdev/redwood-cloudflare-pages.git

Push to main

git push -u origin main

Connect GitHub repo to Cloudflare Pages

Sign up for Cloudflare Pages.

Click “Create a project.”

Select your Redwood project and click the “Begin setup” button at the bottom.

Your project name and production branch will be set automatically.

The build settings are blank. Enter:

  • yarn rw build web for the build command
  • web/dist for the build output directory

Click “Save and deploy.”

Go take a nice long walk around the block, grab some coffee, take out your dry cleaning, file your taxes, complete that 10,000 piece puzzle you’ve been putting off, and then come back and your website build should be done.

Once the build finishes you will see the build and deployment settings at the bottom and a link to your site at the top.

Click the link to redwood-cloudflare-pages.pages.dev and you should see the following page.

2 Likes