DEV Community

loading...
Cover image for deploy redwoodJS web side with cloudflare pages

deploy redwoodJS web side with cloudflare pages

anthony-campolo
full stack web dev
Originally published at community.redwoodjs.com Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

Delete api directory

rm -rf api
Enter fullscreen mode Exit fullscreen mode

Generate home page

yarn rw g page home /
Enter fullscreen mode Exit fullscreen mode

Include the following in HomePage.js.

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

export default HomePage
Enter fullscreen mode Exit fullscreen mode

Start development server

yarn rw dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Push to main

git push -u origin main
Enter fullscreen mode Exit fullscreen mode

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:

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

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

Discussion (0)