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 webfor the build command -
web/distfor 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.
