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, configuring wrangler files for asset routing, and managing SP...
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, configuring wrangler files for asset routing, and managing SP...
When To Use
Use when you need to adapt a Vite project to deploy a React SPA with integrated API Workers on Cloudflare using the Cloudflare Vite plugin.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/workers-vite-plugin-index-tutorial-react-spa-with-an-api-workflow-guide.md | A step-by-step guide for adapting a Vite project to use the Cloudflare Vite plugin to host a React SPA with an API. | Questions about a step-by-step guide for adapting a Vite project to use the Cloudflare Vite plugin to host a React SPA with an API. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work.text | The npm command used to initialize a new Vite project with the React TypeScript template for the Cloudflare Workers tutorial. | Exact payloads, commands, or snippets shown in The npm command used to initialize a new Vite project with the React TypeScript template for the Cloudflare Workers t... |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-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-index-tutorial-react-spa-with-an-api-cloudflare-work-3.text | The shell command used to initialize a new React TypeScript project using Vite for the Cloudflare Workers tutorial. | Exact payloads, commands, or snippets shown in The shell command used to initialize a new React TypeScript project using Vite for the Cloudflare Workers tutorial. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-4.text | The shell commands required to install the Cloudflare Vite plugin and Wrangler for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The shell commands required to install the Cloudflare Vite plugin and Wrangler for the React SPA tutorial. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-5.text | The shell command to install the Cloudflare Vite plugin and Wrangler development tools for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The shell command to install the Cloudflare Vite plugin and Wrangler development tools for the React SPA tutorial. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-6.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-index-tutorial-react-spa-with-an-api-cloudflare-work-7.text | The shell commands required to install the Cloudflare Vite plugin and Wrangler using the Bun package manager for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The shell commands required to install the Cloudflare Vite plugin and Wrangler using the Bun package manager for the... |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-8.text | A vite configuration file using the cloudflare plugin to set up a React single page application for Workers. | Exact payloads, commands, or snippets shown in A vite configuration file using the cloudflare plugin to set up a React single page application for Workers. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-9.text | A wrangler configuration file for a Cloudflare Workers Vite tutorial configured for single-page application asset handling. | Exact payloads, commands, or snippets shown in A wrangler configuration file for a Cloudflare Workers Vite tutorial configured for single-page application asset han... |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-10.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-index-tutorial-react-spa-with-an-api-cloudflare-work-11.text | A .dev.vars file containing environment variable definitions for the local Cloudflare Workers development environment. | Exact payloads, commands, or snippets shown in A .dev.vars file containing environment variable definitions for the local Cloudflare Workers development environment. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-12.text | The npm command to install @cloudflare/workers-types as a development dependency for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The npm command to install @cloudflare/workers-types as a development dependency for the React SPA tutorial. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-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-index-tutorial-react-spa-with-an-api-cloudflare-work-14.text | The pnpm command used to add @cloudflare/workers-types as a development dependency for the React SPA tutorial. | Exact payloads, commands, or snippets shown in The pnpm command used to add @cloudflare/workers-types as a development dependency for the React SPA tutorial. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-15.text | The terminal command to add @cloudflare/workers-types as a development dependency using the bun package manager. | Exact payloads, commands, or snippets shown in The terminal command to add @cloudflare/workers-types as a development dependency using the bun package manager. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-16.text | A TypeScript configuration file for the Cloudflare Workers environment including specific types and build settings. | Exact payloads, commands, or snippets shown in A TypeScript configuration file for the Cloudflare Workers environment including specific types and build settings. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-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-index-tutorial-react-spa-with-an-api-cloudflare-work-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-index-tutorial-react-spa-with-an-api-cloudflare-work-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-index-tutorial-react-spa-with-an-api-cloudflare-work-20.text | A Cloudflare Workers script implementing a fetch handler that routes requests between a React SPA and an API endpoint. | Exact payloads, commands, or snippets shown in A Cloudflare Workers script implementing a fetch handler that routes requests between a React SPA and an API endpoint. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-21.text | A wrangler configuration file for a Cloudflare Workers project using the Vite plugin to support a single-page application with an API. | Exact payloads, commands, or snippets shown in A wrangler configuration file for a Cloudflare Workers project using the Vite plugin to support a single-page applica... |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-22.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-index-tutorial-react-spa-with-an-api-cloudflare-work-23.text | A React functional component using useState to manage local state and fetch data from a local API endpoint. | Exact payloads, commands, or snippets shown in A React functional component using useState to manage local state and fetch data from a local API endpoint. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-24.text | The terminal command used to build the React single-page application within the Cloudflare Workers Vite plugin tutorial. | Exact payloads, commands, or snippets shown in The terminal command used to build the React single-page application within the Cloudflare Workers Vite plugin tutorial. |
examples/workers-vite-plugin-index-tutorial-react-spa-with-an-api-cloudflare-work-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-index-tutorial-react-spa-with-an-api-cloudflare-work-26.text | The terminal command used to deploy the React SPA and API using wrangler. | Exact payloads, commands, or snippets shown in The terminal command used to deploy the React SPA and API using wrangler. |
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/index.md