Project starter for deploying a statically-rendered React application from a Cloudflare worker.
Web performance hinges on how quickly your HTML page and assets can be served to visitor's browser clients. Anything that blocks the HTML page from arriving at a visitor's browser has the highest impact on degrading performance.
Your application probably does not need to be server-rendered. Dynamic content can be fetched and rendered into the page as the rest of the page loads. This is probably the most efficient way to load a web page into a browser.
Therefore, why not make your entire client static? This allows the entire application payload to be cached in the cloud, drastically improving performance. Now you just need to worry about the performance of APIs that provide the dynamic data.
Why not incrementally build dynamic pages? It's complicated, expensive, and not necessarily any better an experience than otherwise.
On top of all of the above, by using a Cloudflare worker you get CDN delivery and HTTPS out-of-the-box.
| Directory | Description |
|---|---|
src | A TypeScript React application generated using react-static. |
worker | A Cloudflare worker generated by wrangler |
cloudflare | A directory containing make targets and templates for deploying the Cloudflare worker |
s3 | A directory containing make targets for syncing the static output of the React application to s3 |
Develop your app as you would any other application built using react-static:
yarn start $ react-static start Starting Development Server... {...} [✓] Application Bundled (2.7s) [✓] App serving at http://localhost:3000 You can now develop as usual.
First, duplicate the secrets file in your project:
cp secrets.mk.example secrets.mk - Create an AWS account
- Install
awscli(available via brew) - Create access credentials for your account and add access credentials to
secrets.mk(AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY) - Decide on your bucket name and add to
BUCKETvariable in yoursecrets.mk
- Create a Cloudflare account.
- Grab account and zone ID and add to
secrets.mk - Install
wranglerglobally. - Authenticate wrangler to access your Cloudflare account using
wrangler login. - Update the
DOMAINvariable insecrets.mkto equal your domain in Cloudflare.
The first time you wish to deploy, we need to create the S3 bucket and configure it to be accessed as a website.
To do this, simply run:
make deploy-infra Whenever you want to push your application you can simply run:
make deploy This will statically render you React application, upload it to the s3 bucket specified in secrets.mk, and deploy the Cloudflare worker to serve the application on your domain.
Now open your application:
make browse If everything was successful, you should see your deployed application.