-
Notifications
You must be signed in to change notification settings - Fork 10.2k
Replace Remix framework guide with new React Router framework guide #21471
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
76e8a99
Create React Router framework page
jamesopstad dd7d0ae
Update React Router framework page
jamesopstad 5a0055b
Add frameworks-bindings partial
jamesopstad 3db32c5
Remove Remix guide
jamesopstad a584849
Tweaks
jamesopstad 4e4d491
Add links to React Router framework guide from Vite plugin docs
jamesopstad 36aec7f
Vite docs tweaks
jamesopstad e2fe565
Add file names to .env file examples
jamesopstad 0eb04f3
Remove unused components
jamesopstad 6738c5b
Add redirect
jamesopstad 65eb81f
Update src/content/docs/workers/frameworks/framework-guides/react-rou…
korinne 9c3818f
Update src/content/docs/workers/frameworks/framework-guides/react-rou…
korinne 54919cc
Update src/content/docs/workers/frameworks/framework-guides/react-rou…
korinne a54de20
Retrigger CI
kodster28 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
src/content/docs/workers/frameworks/framework-guides/react-router.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| --- | ||
| pcx_content_type: how-to | ||
| title: React Router (formerly Remix) | ||
| description: Create a React Router application and deploy it to Cloudflare Workers | ||
| --- | ||
|
|
||
| import { | ||
| Render, | ||
| PackageManagers, | ||
| Steps, | ||
| Details, | ||
| FileTree, | ||
| } from "~/components"; | ||
|
|
||
| **Start from CLI** - scaffold a full-stack app with [React Router v7](https://reactrouter.com/) and the [Cloudflare Vite plugin](/workers/vite-plugin/) for lightning-fast development. | ||
|
|
||
| <PackageManagers | ||
| type="create" | ||
| pkg="cloudflare@latest my-react-router-app" | ||
| args="--framework=react-router" | ||
| /> | ||
|
|
||
| **Or just deploy** - create a full-stack app using React Router v7, with CI/CD and previews all set up for you. | ||
kodster28 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| [](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/templates/tree/main/react-router-starter-template) | ||
|
|
||
| ## What is React Router? | ||
|
|
||
| [React Router v7](https://reactrouter.com/) is a full-stack React framework for building web applications. | ||
| It combines with the [Cloudflare Vite plugin](/workers/vite-plugin/) to provide a first-class experience for developing, building and deploying your apps on Cloudflare. | ||
|
|
||
| ## Creating a full-stack React Router app | ||
|
|
||
| <Steps> | ||
| 1. **Create a new project with the create-cloudflare CLI (C3)** | ||
|
|
||
| <PackageManagers | ||
| type="create" | ||
| pkg="cloudflare@latest my-react-router-app" | ||
| args="--framework=react-router" | ||
| /> | ||
| <Details header="How is this project set up?"> | ||
| Below is a simplified file tree of the project. | ||
| <FileTree> | ||
| - my-react-router-app | ||
| - app | ||
| - routes | ||
| - ... | ||
| - entry.server.ts | ||
| - root.tsx | ||
| - routes.ts | ||
| - workers | ||
| - app.ts | ||
| - react-router.config.ts | ||
| - vite.config.ts | ||
| - wrangler.jsonc | ||
| </FileTree> | ||
|
|
||
| `react-router.config.ts` is your [React Router config file](https://reactrouter.com/explanation/special-files#react-routerconfigts). | ||
| In this file: | ||
| - `ssr` is set to `true`, meaning that your application will use server-side rendering. | ||
| - `future.unstable_viteEnvironmentApi` is set to `true` to enable compatibility with the [Cloudflare Vite plugin](/workers/vite-plugin/). | ||
|
|
||
| :::note | ||
| SPA mode and prerendering are not currently supported when using the [Cloudflare Vite plugin](/workers/vite-plugin/). | ||
| If you wish to use React Router in an SPA then we recommend starting with the [React template](/workers/frameworks/framework-guides/react/) and using React Router [as a library](https://reactrouter.com/start/data/installation). | ||
| ::: | ||
|
|
||
| `vite.config.ts` is your [Vite config file](https://vite.dev/config/). | ||
| The React Router and Cloudflare plugins are included in the `plugins` array. | ||
| The [Cloudflare Vite plugin](/workers/vite-plugin/) runs your server code in the Workers runtime, ensuring your local development environment is as close to production as possible. | ||
|
|
||
| `wrangler.jsonc` is your [Worker config file](/workers/wrangler/configuration/). | ||
| In this file: | ||
| - `main` points to `./workers/app.ts`. | ||
| This is the entry file for your Worker. | ||
| The default export includes a [`fetch` handler](/workers/runtime-apis/fetch/), which delegates the request to React Router. | ||
| - If you want to add [bindings](/workers/runtime-apis/bindings/) to resources on Cloudflare's developer platform, you configure them here. | ||
| </Details> | ||
|
|
||
| 2. **Develop locally** | ||
|
|
||
| After creating your project, run the following command in your project directory to start a local development server. | ||
| <PackageManagers type="run" args="dev" /> | ||
| <Details header="What's happening in local development?"> | ||
| This project uses React Router in combination with the [Cloudflare Vite plugin](/workers/vite-plugin/). | ||
| This means that your application runs in the Cloudflare Workers runtime, just like in production, and enables access to local emulations of bindings. | ||
| </Details> | ||
|
|
||
| 3. **Deploy your project** | ||
|
|
||
| Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/) from your own machine or from any CI/CD system, including Cloudflare's own [Workers Builds](/workers/ci-cd/builds/). | ||
|
|
||
| The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. | ||
|
|
||
| <PackageManagers type="run" args={"deploy"} /> | ||
|
|
||
| </Steps> | ||
|
|
||
| ## Use bindings with React Router | ||
|
|
||
| With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more. | ||
| As you have direct access to your Worker entry file (`workers/app.ts`), you can also add additional exports such as [Durable Objects](/durable-objects/) and [Workflows](/workflows/). | ||
|
|
||
| <Render file="frameworks-bindings" /> | ||
57 changes: 0 additions & 57 deletions
57
src/content/docs/workers/frameworks/framework-guides/remix.mdx
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.