---
description: Create a React application and deploy it to Cloudflare Workers with Workers Assets.
title: React + Vite
image: https://developers.cloudflare.com/og-docs.png
---
[Skip to content](#main-content)
> Documentation Index
> Fetch the complete documentation index at: https://developers.cloudflare.com/workers/llms.txt
> Use this file to discover all available pages before exploring further.
# React + Vite
Last updated Sep 1, 2026|Copy as Markdown| [View as Markdown](https://0285ca83.previews.developers.cloudflare.com/workers/framework-guides/web-apps/react/index.md)| [Agent setup](https://0285ca83.previews.developers.cloudflare.com/agent-setup/)
**Start from CLI** - scaffold a full-stack app with a React SPA, Cloudflare Workers API, and the [Cloudflare Vite plugin](https://0285ca83.previews.developers.cloudflare.com/workers/vite-plugin/) for lightning-fast development.
npmyarnpnpm
```
npm create cloudflare@latest -- my-react-app --framework=react
```
```
yarn create cloudflare my-react-app --framework=react
```
```
pnpm create cloudflare@latest my-react-app --framework=react
```
---
**Or just deploy** - create a full-stack app using React, a Workers API, and Vite, with CI/CD and previews all set up for you.
[](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/main/react-starter-template)
## What is React?
[React ↗](https://react.dev/) is a framework for building user interfaces. It allows you to create reusable UI components and manage the state of your application efficiently. You can use React to build a single-page application (SPA), and combine it with a backend API running on Cloudflare Workers to create a full-stack application.
## Creating a full-stack app with React
1. **Create a new project with the create-cloudflare CLI (C3)**npmyarnpnpm
```
npm create cloudflare@latest -- my-react-app --framework=react
```
```
yarn create cloudflare my-react-app --framework=react
```
```
pnpm create cloudflare@latest my-react-app --framework=react
```
How is this project set up?
Below is a simplified file tree of the project.
- my-react-app
- src/
- App.tsx
- worker/
- index.ts
- index.html
- vite.config.ts
- wrangler.jsonc
wrangler.jsonc is your Wrangler configuration file. In this file:
- main points to worker/index.ts. This is your Worker, which is going to act as your backend API.
- assets.not_found_handling is set to single-page-application, which means that routes that are handled by your React SPA do not go to the Worker, and are thus free.
- If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about bindings.
vite.config.ts is set up to use the Cloudflare Vite plugin. This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible.
worker/index.ts is your backend API, which contains a single endpoint, /api/, that returns a text response. At src/App.tsx, your React app calls this endpoint to get a message back and displays this.
What's happening in local development?
This project uses Vite for local development and build, and thus comes with all of Vite's features, including hot module replacement (HMR).
In addition, vite.config.ts is set up to use the Cloudflare Vite plugin. This runs your application in the Cloudflare Workers runtime, just like in production, and enables access to local emulations of bindings.