cloudflare · Cloudflare Workers Docs
Workers Tutorial - React SPA with an API
A step-by-step guide to configuring a Vite-based React single-page application to work with the Cloudflare Vite plugin, including setting up an API Worker and configuring asset routing for deployment.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Workers Tutorial - React SPA with an API
A step-by-step guide to configuring a Vite-based React single-page application to work with the Cloudflare Vite plugin, including setting up an API Worker and configuring asset routing for deployment.
When To Use
Use when you need to scaffold a Vite project that integrates a React frontend with a Cloudflare Worker API and requires proper SPA routing configuration for deployment.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/workers-vite-plugin-tutorial-react-spa-with-an-api-workflow-guide.md | A tutorial guide for adapting a Vite project to use the Cloudflare Vite plugin to build a React single-page application with an API. | Questions about a tutorial guide for adapting a Vite project to use the Cloudflare Vite plugin to build a React single-page applicati... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi.text | The shell commands required to initialize a new React TypeScript project using the cloudflare-vite-plugin template. | Exact payloads, commands, or snippets shown in The shell commands required to initialize a new React TypeScript project using the cloudflare-vite-plugin template. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-2.text | The shell command used to initialize a new React TypeScript project using the Vite template for the Cloudflare Workers Vite plugin tutorial. | Exact payloads, commands, or snippets shown in The shell command used to initialize a new React TypeScript project using the Vite template for the Cloudflare Worker... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-3.text | The pnpm command used to initialize a new Vite project with a React TypeScript template for the Cloudflare Workers tutorial. | Exact payloads, commands, or snippets shown in The pnpm command used to initialize a new Vite project with a React TypeScript template for the Cloudflare Workers tu... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-4.text | The npm installation commands required to set up the Cloudflare Vite plugin and Wrangler for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The npm installation commands required to set up the Cloudflare Vite plugin and Wrangler for the React SPA tutorial. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-5.text | The shell commands required to install the Cloudflare Vite plugin and Wrangler dependency for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The shell commands required to install the Cloudflare Vite plugin and Wrangler dependency for the React SPA tutorial. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-6.text | The shell commands required to install the Cloudflare Vite plugin and Wrangler using pnpm. | Exact payloads, commands, or snippets shown in The shell commands required to install the Cloudflare Vite plugin and Wrangler using pnpm. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-7.text | The terminal commands required to install the Cloudflare Vite plugin and Wrangler using the Bun package manager. | Exact payloads, commands, or snippets shown in The terminal commands required to install the Cloudflare Vite plugin and Wrangler using the Bun package manager. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-8.text | A vite configuration file demonstrating the integration of the cloudflare plugin for a React single-page application. | Exact payloads, commands, or snippets shown in A vite configuration file demonstrating the integration of the cloudflare plugin for a React single-page application. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-9.text | A wrangler configuration file setting the notfoundhandling property to single-page-application for a React SPA deployment. | Exact payloads, commands, or snippets shown in A wrangler configuration file setting the notfoundhandling property to single-page-application for a React SPA deploy... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-10.text | A wrangler configuration file for a Cloudflare Workers project using the Vite plugin with single-page application asset handling. | Exact payloads, commands, or snippets shown in A wrangler configuration file for a Cloudflare Workers project using the Vite plugin with single-page application ass... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-11.text | A sample .dev.vars file containing environment variable definitions for a Cloudflare Workers Vite plugin development environment. | Exact payloads, commands, or snippets shown in A sample .dev.vars file containing environment variable definitions for a Cloudflare Workers Vite plugin development... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-12.text | The npm installation command for adding cloudflare-workers-types as a development dependency. | Exact payloads, commands, or snippets shown in The npm installation command for adding cloudflare-workers-types as a development dependency. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-13.text | The terminal command to add @cloudflare/workers-types as a development dependency using yarn. | Exact payloads, commands, or snippets shown in The terminal command to add @cloudflare/workers-types as a development dependency using yarn. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-14.text | The command to install @cloudflare/workers-types as a development dependency using pnpm. | Exact payloads, commands, or snippets shown in The command to install @cloudflare/workers-types as a development dependency using pnpm. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-15.text | The terminal command to add cloudflare-workers-types as a development dependency using bun. | Exact payloads, commands, or snippets shown in The terminal command to add cloudflare-workers-types as a development dependency using bun. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-16.text | The tsconfig configuration file for the Cloudflare Workers environment within a Vite-based React SPA project. | Exact payloads, commands, or snippets shown in The tsconfig configuration file for the Cloudflare Workers environment within a Vite-based React SPA project. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-17.text | The tsconfig.app.json configuration file for the React application within the Cloudflare Workers Vite plugin tutorial. | Exact payloads, commands, or snippets shown in The tsconfig.app.json configuration file for the React application within the Cloudflare Workers Vite plugin tutorial. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-18.text | A wrangler configuration file setting up a single-page application with assets and a worker entry point for a Vite-based React tutorial. | Exact payloads, commands, or snippets shown in A wrangler configuration file setting up a single-page application with assets and a worker entry point for a Vite-ba... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-19.text | A wrangler.toml configuration file for a Cloudflare Workers project using the Vite plugin with single-page application asset handling. | Exact payloads, commands, or snippets shown in A wrangler.toml configuration file for a Cloudflare Workers project using the Vite plugin with single-page applicatio... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-20.text | A Cloudflare Workers script implementing a basic API route and a fallback response for a React single-page application. | Exact payloads, commands, or snippets shown in A Cloudflare Workers script implementing a basic API route and a fallback response for a React single-page application. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-21.text | A wrangler configuration file for a React SPA using the Cloudflare Workers Vite plugin with single-page application asset handling. | Exact payloads, commands, or snippets shown in A wrangler configuration file for a React SPA using the Cloudflare Workers Vite plugin with single-page application a... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-22.text | A wrangler configuration file for a Cloudflare Workers project using the Vite plugin with single-page application asset handling. | Exact payloads, commands, or snippets shown in A wrangler configuration file for a Cloudflare Workers project using the Vite plugin with single-page application ass... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-23.text | The React App.tsx component code for a single-page application that fetches data from a local API endpoint. | Exact payloads, commands, or snippets shown in The React App.tsx component code for a single-page application that fetches data from a local API endpoint. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-24.text | The npm build command used to compile the React SPA within the Cloudflare Workers Vite plugin tutorial. | Exact payloads, commands, or snippets shown in The npm build command used to compile the React SPA within the Cloudflare Workers Vite plugin tutorial. |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-25.text | The terminal command used to preview the React SPA development server within the Cloudflare Workers Vite plugin tutorial. | Exact payloads, commands, or snippets shown in The terminal command used to preview the React SPA development server within the Cloudflare Workers Vite plugin tutor... |
examples/workers-vite-plugin-tutorial-react-spa-with-an-api-cloudflare-workers-vi-26.text | The terminal command used to deploy a React SPA built with the Cloudflare Workers Vite plugin. | Exact payloads, commands, or snippets shown in The terminal command used to deploy a React SPA built with the Cloudflare Workers Vite plugin. |
What This Skill Covers
- This tutorial takes you through the steps needed to adapt a Vite project to use the Cloudflare Vite plugin. Much of the content can also be applied to adapti...
- Main sections:
Introduction,Set up and configure the React SPA,Scaffold a Vite project,Add the Cloudflare dependencies,Add the plugin to your Vite config.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://developers.cloudflare.com/workers/vite-plugin/tutorial