ajcwebdev

deploy redwoodJS web side with cloudflare pages

redwoodjscloudflaregithubjamstack

Cloudflare Pages is a Jamstack platform for frontend developers to collaborate and deploy websites. It's a lot like ``. 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

01-home-page

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.

01-cloudflare-pages-dashboard

Click "Create a project."

02-connect-git-repository

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

03-setup-build-and-deploy

Your project name and production branch will be set automatically.

04-blank-build-settings

The build settings are blank. Enter:

05-redwood-build-commands

Click "Save and deploy."

06-initializing-build

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.

07-build-and-deployment-settings

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

08-success-site-built-and-deployed

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

09-redwood-cloudflare-pages-deployed