Skip to content

Commit

Permalink
📝 Update docs from remix → react-router
Browse files Browse the repository at this point in the history
  • Loading branch information
acusti committed Jan 21, 2025
1 parent 3db6560 commit aa1075e
Show file tree
Hide file tree
Showing 6 changed files with 10 additions and 10 deletions.
2 changes: 1 addition & 1 deletion packages/superflare/docs/file-storage.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ You can import this utility in a route handler and pass it the current pathname
```ts
// app/routes/storage.$.ts

import { type LoaderFunctionArgs } from "@remix-run/cloudflare";
import { type LoaderFunctionArgs } from "react-router";
import { servePublicPathFromStorage } from "superflare";

export async function loader({ request }: LoaderFunctionArgs) {
Expand Down
10 changes: 5 additions & 5 deletions packages/superflare/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ npm install @superflare/remix
Then, in your `worker.ts` file, import the `handleFetch` function from `@superflare/remix`, and import your local `superflare.config.ts` as `config`. Superflare handles building and providing the load context, so you’ll be able to delete a lot of the code required with the [default Remix adapter](https://github.com/remix-run/remix/blob/main/templates/cloudflare-workers/server.ts):

```ts
import { createRequestHandler, type ServerBuild } from "@remix-run/cloudflare";
import { createRequestHandler, type ServerBuild } from "react-router";
import { handleFetch } from "@superflare/remix";
import config from "./superflare.config";
import * as build from "./build/server";
Expand Down Expand Up @@ -83,20 +83,20 @@ export default {
} satisfies ExportedHandler<Env>;
```
For local development, Remix uses Vite’s dev server with a [Cloudflare Proxy Vite plugin](https://remix.run/docs/en/main/guides/vite#cloudflare-proxy) that invokes [`getPlatformProxy`](https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy) to provide [bindings](https://developers.cloudflare.com/workers/wrangler/api/#supported-bindings) to your application from outside of the deployed `workersd` environment. Superflare has an additional entry point, `@superflare/remix/dev`, that exports `superflareDevProxyVitePlugin`, which adds Superflare support and can be used in place of Remix’s proxy plugin in your Vite config:
For local development, React Router uses Vite’s dev server with a [Cloudflare Proxy Vite plugin](https://github.com/remix-run/react-router/blob/main/packages/react-router-dev/vite/cloudflare-dev-proxy.ts#L32-L37) that invokes [`getPlatformProxy`](https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy) to provide [bindings](https://developers.cloudflare.com/workers/wrangler/api/#supported-bindings) to your application from outside of the deployed `workersd` environment. Superflare has an additional entry point, `@superflare/remix/dev`, that exports `superflareDevProxyVitePlugin`, which adds Superflare support and can be used in place of React Router’s proxy plugin in your Vite config:
```ts
// vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { reactRouter } from "@react-router/dev/vite"";
import { superflareDevProxyVitePlugin } from "@superflare/remix/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
plugins: [
superflareDevProxyVitePlugin<Env>(),
remix(),
reactRouter(),
tsconfigPaths(),
],
ssr: {
Expand All @@ -114,7 +114,7 @@ export default defineConfig({
**Do not** use `build: { minify: true }` in your Vite config. This will mangle the variable names of the `workerd` (SSR) build and change the names of your [models](/models), which will in turn break the mapping between those models and their corresponding DB tables. Vite’s [default minify behavior](https://vite.dev/config/build-options.html#build-minify) is to minify the client build and leave the SSR build untouched, which is what we want.
{% /callout %}

The Superflare Remix integration creates a [cookie-based session storage](https://remix.run/docs/en/main/utils/sessions#createcookiesessionstorage) and injects `auth`, `session`, and `cloudflare` objects into your load context (the `AppContext` type), which is provided to your loaders and actions. The `cloudflare` object matches the return value of [Wrangler’s `getPlatformProxy`](https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy).
The Superflare React Router integration creates a [cookie-based session storage](https://reactrouter.com/explanation/sessions-and-cookies) and injects `auth`, `session`, and `cloudflare` objects into your load context (the `AppContext` type), which is provided to your loaders and actions. The `cloudflare` object matches the return value of [Wrangler’s `getPlatformProxy`](https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy).

{% callout title="Cookie Monster" %}
Superflare automatically commits your session data to the outgoing response's `set-cookie` header, so you don't need to worry about that like you do in a standard Remix app.
Expand Down
2 changes: 1 addition & 1 deletion packages/superflare/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: A new way to build full-stack applications on Cloudflare Workers

[Superflare](https://superflare.dev) is an experimental full-stack toolkit for Cloudflare Workers. It features a relational ORM for [D1 databases](/models), utilities for [R2 storage](/file-storage), and lots more.

Superflare is _not_ a full-stack framework. In fact, Superflare works best when combined with [Remix](https://remix.run), [Next.js](https://nextjs.org) (soon!) or [Nuxt.js](https://nuxtjs.com) (soon!).
Superflare is _not_ a full-stack framework. In fact, Superflare works best when combined with [React Router](https://reactrouter.com)/[Remix](https://remix.run), [Next.js](https://nextjs.org) (soon!) or [Nuxt.js](https://nuxtjs.com) (soon!).

Check out various Superflare [example apps](https://github.com/jplhomer/superflare/tree/main/examples/) to get a feel for what you can build next, or [get started](/getting-started) with a new Superflare application.

Expand Down
2 changes: 1 addition & 1 deletion packages/superflare/docs/reference/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ npx wrangler d1 migrations apply DB --remote

## `superflare dev`

The `dev` command starts a local development server for your Superflare app. It’s a wrapper around two commands: `remix vite:dev` (starts the main Vite dev server) and `wrangler dev --no-bundle` (enables working with [Durable Object bindings](https://developers.cloudflare.com/workers/wrangler/api/#supported-bindings)). You can use it directly or put it in your `package.json`’s scripts: `"dev": "superflare dev"`.
The `dev` command starts a local development server for your Superflare app. It’s a wrapper around two commands: `react-router dev` (starts the main Vite dev server) and `wrangler dev --no-bundle` (enables working with [Durable Object bindings](https://developers.cloudflare.com/workers/wrangler/api/#supported-bindings)). You can use it directly or put it in your `package.json`’s scripts: `"dev": "superflare dev"`.

## `superflare generate`

Expand Down
2 changes: 1 addition & 1 deletion packages/superflare/docs/security/authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ If you've created a Superflare app with `npx superflare new`, you should already

## Register and Login pages

The [Superflare Remix template](https://github.com/jplhomer/superflare/tree/main/templates/remix) provides basic `/register` and `/login` routes and forms for you to use. You can use these as-is, or you can copy the code and modify it to your liking.
The [Superflare React Router template](https://github.com/jplhomer/superflare/tree/main/templates/remix) provides basic `/register` and `/login` routes and forms for you to use. You can use these as-is, or you can copy the code and modify it to your liking.

## Protecting routes

Expand Down
2 changes: 1 addition & 1 deletion packages/superflare/docs/sessions.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ The `SuperflareSession` instance keeps track of any changes to the session, and

## Creating sessions

_The following instructions assume you are using Remix. They will be updated when Superflare supports other frameworks._
_The following instructions assume you are using React Router. They will be updated when Superflare supports other frameworks._

The `@superflare/remix` package exports `handleFetch`, which takes care of session creation and makes the session available on your Remix `AppContext` in deployed workers. There is an additional entry point, `@superflare/remix/dev`, that exports `superflareDevProxyVitePlugin` to provide the same automatic session handling in local dev when using the Vite dev server. See the [Getting Started](/getting-started) guide for details.

Expand Down

0 comments on commit aa1075e

Please sign in to comment.