https://github.com/cloudflare/workers-react-pwa-example

https://github.com/cloudflare/workers-react-pwa-example

cloudflare-workers progressive-web-apps pwa react server-side-rendering ssr worker-script

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/cloudflare/workers-react-pwa-example
• Owner: cloudflare
• License: bsd-3-clause
• Created: 2018-11-23T13:00:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-21T12:44:13.000Z (over 1 year ago)
• Last Synced: 2024-04-14T22:17:16.033Z (3 months ago)
• Topics: cloudflare-workers, progressive-web-apps, pwa, react, server-side-rendering, ssr, worker-script
• Language: JavaScript
• Size: 354 KB
• Stars: 84
• Watchers: 33
• Forks: 9
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-cloudflare-workers - Serverless PWA using React - pwa-react-cloudflare-workers/)) - Terraform deploy srcipt included. (Article)

README

        
![Cloudflare GraphQL Gateway](/img/workers-react.png)

Workers React Example

====

Combining the power of Cloudflare Workers and React will allow you to render the

same React code you would on the browser on Cloudflare Workers.

### Dependencies

- [npm](https://www.npmjs.com/get-npm) or [yarn](https://yarnpkg.com/en/docs/install#debian-stable)

### Instructions

- `yarn preview`

#### Static hosting

In order for this application to work, you'll have to be able to serve `/worker.js` from your own origin. 

This example uses terraform to upload the worker script to Google Cloud Storage, but you are welcome to 

use any other origin.

- https://cloud.google.com/storage/docs/hosting-static-website

#### Terraform

If you'd like to use terraform to upload your worker scripts, you'll need a

vars file with the following variables

```hcl

# Cloudflare variables

variable "cloudflare_email" {

  default = "[email protected]"

}

variable "cloudflare_token" {

  default = "00000000000000000000000000"

}

# GCP exmaple variables

variable "project" {

  default = "my-project"

}

variable "zone" {

  default = "buzzwords.app"

}

variable "bucket" {

  default = "buzzwords"

}

```

after adding this file as `vars.tf` (terraform will pickup any `.tf` extension file) do

`terraform init` and `terraform apply`

### About

[Cloudflare Workers](http://developers.cloudflare.com/workers/) allow you to write JavaScript which runs on all of Cloudflare's

150+ global data centers.

[React](https://reactjs.org) makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.