DEV Community

loading...
Cover image for How to deploy a React App to Cloudflare host for free

How to deploy a React App to Cloudflare host for free

davidkou profile image XinyuStudio ・3 min read

Read the related post on How to deploy a React App to Firebase host for free


Cloudflare is an American web infrastructure and website security company that provides content delivery network services, DDoS mitigation, Internet security, and distributed domain name server services.

Cloudflare offers free host services for React SPA deployment. Below is how to do this with trivial steps!

Deploy React Apps on Cloudflare

Create react app

npx create-react-app project-name
cd project-name

yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

Create Cloudflare account

Get the API token

To get started, log into the Cloudflare Dashboard and go to User Profile -> API Tokens or simply click here. From the API Token home screen select Create Token.

Install Cloudflare CLI

npm i @cloudflare/wrangler -g
Enter fullscreen mode Exit fullscreen mode

Login Cloudflare using CLI

wrangler login
Enter fullscreen mode Exit fullscreen mode

You will be redirected to the Cloudflare login page. Input your account there.

Step I:

Step II:

Step III:

Step IV:

Run below command, input the api-key obtained as above:

 wrangler config --api-key
Enter fullscreen mode Exit fullscreen mode

Run below command to get your Account-ID

wrangler whoami
Enter fullscreen mode Exit fullscreen mode

You will see output as below:

+--------------------------+----------------------------------+
| Account Name             | Account ID                       |
+--------------------------+----------------------------------+
| xxxx@gmail.com's Account | abcdefgc13e701c1b4410ad96e3fefe8 |
+--------------------------+----------------------------------+
Enter fullscreen mode Exit fullscreen mode

Init a Cloudflare project

Run the below command to initialize a Cloudflare project.

Note: You need cd into the folder where React App is created. Follow the instructions as shown below:

cd project-name
wrangler init
Enter fullscreen mode Exit fullscreen mode

A wrangler.toml will be created. Edit the "bucket" setting and change it to "./build"

# ... other wrangler config

account_id = "somestringofyouraccoundid"    # ↫ Edit this value
...
[site]
bucket = "./build"                          # ↫ Edit this value
entry-point = "workers-site"
Enter fullscreen mode Exit fullscreen mode

Build react app locally

cd project-name
yarn build
Enter fullscreen mode Exit fullscreen mode

This will package the react app, and the output is in the build sub-folder now.

Run the below command to start the local dev environment:

wrangler dev
Enter fullscreen mode Exit fullscreen mode

You will then be able to view the app deployed locally

To preview the deployment on Cloudflare, try below command

wrangler preview
Enter fullscreen mode Exit fullscreen mode

Deploy react app to Cloudflare

wrangler publish
Enter fullscreen mode Exit fullscreen mode

if you encounter the below error:

Error: Something went wrong! Status: 403 Forbidden, Details {
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10034,
      "message": "workers.api.error.email_verification_required"
    }
  ],
  "messages": []
}
Enter fullscreen mode Exit fullscreen mode

It might be due to the fact that you need to verify your emails on https://Cloudflare.com :

Re-run the command:

wrangler publish
 Built successfully, built project size is 13 KiB.
 Using namespace for Workers Site "__cloudflare-workers_sites_assets"
 Success
 Uploading site files
 Successfully published your script to
 https://cloudflare.xyz-cloudflare.workers.dev
 Deleting stale files...
Enter fullscreen mode Exit fullscreen mode

Open a browser window, and type the url: https://cloudflare.xyz-cloudflare.workers.dev/


Now, your app is deployed to Cloudflare! Happy coding, happy deploying!

Discussion (0)

pic
Editor guide