DEV Community

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

Posted on

How to deploy a React App to Cloudflare host for free

#react #deploy #cloudflare #howto

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!

Top comments (0)