Switch to React Router v7

.github/workflows/deploy.yml

@@ -13,6 +13,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: npm
+
       - name: Use Terraform
         uses: hashicorp/setup-terraform@v3
 
@@ -99,29 +105,41 @@ jobs:
             echo "sentry=false" >> $GITHUB_OUTPUT;
           fi
 
-      - name: Setup Sentry
-        uses: cloudflare/[email protected]
-        if: ${{ steps.sentry-check.outputs.sentry == 'true' }}
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: --version
-          secrets: |
-            SENTRY_DSN
-        env:
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+      # - name: Setup Sentry
+      #   if: ${{ steps.sentry-check.outputs.sentry == 'true' }}
+      #   uses: cloudflare/[email protected]
+      #   with:
+      #     apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      #     accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+      #     command: --version
+      #     secrets: |
+      #       SENTRY_DSN
+      #   env:
+      #     SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
 
       - name: Publish to Cloudflare Workers
         uses: cloudflare/[email protected]
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          secrets: |
-            CLOUDFLARE_API_TOKEN
-            CLOUDFLARE_ACCOUNT_ID
+        #   secrets: |
+        #     CLOUDFLARE_API_TOKEN
+        #     CLOUDFLARE_ACCOUNT_ID
+        # env:
+        #   CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        #   CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+
+      - name: Setup Cloudflare Workers
+        run: |
+          echo "$CLOUDFLARE_API_TOKEN" | npx wrangler secret put CLOUDFLARE_API_TOKEN
+          echo "$CLOUDFLARE_ACCOUNT_ID" | npx wrangler secret put CLOUDFLARE_ACCOUNT_ID
+          if [ "${{ secrets.SENTRY_DSN }}" != '' ]; then
+            echo "$SENTRY_DSN" | npx wrangler secret put SENTRY_DSN
+          fi
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
 
       - name: Create a Sentry release
         uses: getsentry/action-release@v1

.gitignore

@@ -13,3 +13,5 @@ node_modules
 
 .dev.vars
 .wrangler/
+
+.react-router/

.terraform/main.tf

@@ -75,7 +75,7 @@ resource "cloudflare_pages_project" "dispoflare_pages_project" {
   }
 }
 
-resource "cloudflare_access_application" "dispoflare_production_access" {
+resource "cloudflare_zero_trust_access_application" "dispoflare_production_access" {
   account_id                = var.cloudflare_account_id
   name                      = "Dispoflare (Production)"
   domain                    = cloudflare_pages_project.dispoflare_pages_project.subdomain
@@ -84,7 +84,7 @@ resource "cloudflare_access_application" "dispoflare_production_access" {
   auto_redirect_to_identity = false
 }
 
-resource "cloudflare_access_application" "dispoflare_preview_access" {
+resource "cloudflare_zero_trust_access_application" "dispoflare_preview_access" {
   account_id                = var.cloudflare_account_id
   name                      = "Dispoflare (Preview)"
   domain                    = "*.${cloudflare_pages_project.dispoflare_pages_project.subdomain}"

README.md

@@ -63,6 +63,7 @@ All the used Cloudflare products offer a [free plan](https://www.cloudflare.com/
 
 > [!WARNING]
 > Dispoflare has no user registration.
+> You may need to setup Access Policy in [Cloudflare's Zero Trust](https://one.dash.cloudflare.com/) dashboard.
 
 Dispoflare uses [Zero Trust Access](https://www.cloudflare.com/products/zero-trust/access/) to handle user authentication.
 It assumes that your users will register with another identity provider (Zero Trust supports [many providers](https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/) or your custom one that implements [Generic SAML 2.0](https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/generic-saml/)).

app/components/Milestone.tsx

@@ -1,4 +1,4 @@
-import { IntlDate } from '~/components/IntlDate'
+import { IntlDate } from '~/components/IntlDate.js'
 
 export const Milestone = ({
   name,

app/components/Nav.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from '@remix-run/react'
+import { NavLink } from 'react-router';
 
 export const Nav = () => {
   const activeStyle: React.CSSProperties = {
@@ -32,7 +32,7 @@ export const Nav = () => {
         </li>
         <li>
           <NavLink
-            to="manage"
+            to="/manage"
             aria-label="Manage"
             data-tooltip="Manage"
             data-placement="bottom"
@@ -43,7 +43,7 @@ export const Nav = () => {
         </li>
         <li>
           <NavLink
-            to="settings"
+            to="/settings"
             aria-label="Settings"
             data-tooltip="Settings"
             data-placement="bottom"

app/components/Setting.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, Suspense, useState } from 'react'
-import { Await, useFetcher } from '@remix-run/react'
+import { Await, useFetcher } from 'react-router'
 
 export const Setting = ({
   setting,

app/entry.client.tsx

@@ -4,7 +4,7 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from '@remix-run/react'
+import { HydratedRouter } from 'react-router/dom';
 import { startTransition, StrictMode } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
@@ -13,7 +13,7 @@ function hydrate() {
     hydrateRoot(
       document,
       <StrictMode>
-        <RemixBrowser />
+        <HydratedRouter />
       </StrictMode>,
     )
   })

app/entry.server.tsx

@@ -4,18 +4,18 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import type { EntryContext } from '@remix-run/cloudflare'
-import { RemixServer } from '@remix-run/react'
+import type { EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
 import { renderToReadableStream } from 'react-dom/server'
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
 ) {
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <ServerRouter context={reactRouterContext} url={request.url} />,
     {
       onError() {
         responseStatusCode = 500

app/env.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="vite/client" />
-/// <reference types="@remix-run/cloudflare" />
+/// <reference types="@react-router/cloudflare" />
 /// <reference types="@cloudflare/workers-types" />
 
 type Settings = Setting[]
 
-type Setting = {
+interface Setting {
   key: string
   name: string
   value: number | string
@@ -14,6 +14,6 @@ type Setting = {
   metadata?: Metadata
 }
 
-type Metadata = {
+interface Metadata {
   [key: string]: string
 }

app/models/address.server.ts

@@ -1,5 +1,5 @@
-import { AppLoadContext } from '@remix-run/cloudflare'
-import * as addresses from 'sdk/addresses'
+import { AppLoadContext } from 'react-router'
+import * as addresses from 'sdk/addresses.js'
 
 export async function getAddresses(
   context: AppLoadContext,

app/models/routing.server.ts

@@ -1,5 +1,5 @@
-import { AppLoadContext } from '@remix-run/cloudflare'
-import * as routing from 'sdk/routing'
+import { AppLoadContext } from 'react-router'
+import * as routing from 'sdk/routing.js'
 
 export async function getRoutingZones(
   zones: Zone[] | Promise<Zone[]>,

app/models/rule.server.ts

@@ -1,5 +1,5 @@
-import { AppLoadContext } from '@remix-run/cloudflare'
-import * as rules from 'sdk/rules'
+import { AppLoadContext } from 'react-router'
+import * as rules from 'sdk/rules.js'
 
 export async function getRules(
   zones: Zone[] | Promise<Zone[]>,

app/models/settings.server.ts

@@ -1,4 +1,4 @@
-import { AppLoadContext } from '@remix-run/cloudflare'
+import { AppLoadContext } from 'react-router';
 
 export async function getSetting(
   key: string,

app/models/zone.server.ts

@@ -1,5 +1,5 @@
-import { AppLoadContext } from '@remix-run/cloudflare'
-import * as zones from 'sdk/zones'
+import { AppLoadContext } from 'react-router'
+import * as zones from 'sdk/zones.js'
 
 export async function getZones(context: AppLoadContext): Promise<Array<Zone>> {
   return zones.list(context.cloudflare.env)

app/root.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/cloudflare'
+import type { MetaFunction } from 'react-router';
 
 import {
   Links,
@@ -8,7 +8,7 @@ import {
   isRouteErrorResponse,
   Scripts,
   ScrollRestoration,
-} from '@remix-run/react'
+} from 'react-router';
 
 import '@picocss/pico'
 

app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, route, index } from '@react-router/dev/routes'
+
+export default [
+  index('./routes/_index.tsx'),
+  route('manage', './routes/manage.tsx'),
+  route('settings', './routes/settings.tsx'),
+] satisfies RouteConfig

app/routes/_index.tsx

@@ -1,19 +1,16 @@
-import type {
-  ActionFunctionArgs,
-  LoaderFunctionArgs,
-} from '@remix-run/cloudflare'
+import type { Route } from './+types/_index.js'
 
 import { Suspense, useState } from 'react'
-import { redirect, defer } from '@remix-run/cloudflare'
-import { Await, Form, useLoaderData, useNavigation } from '@remix-run/react'
+import { redirect } from 'react-router'
+import { Await, Form, useLoaderData, useNavigation } from 'react-router'
 
 import { createRule } from '~/models/rule.server'
 import { getZones } from '~/models/zone.server'
 import { getRoutingZones } from '~/models/routing.server'
 import { getAddresses } from '~/models/address.server'
 import { getSetting } from '~/models/settings.server'
 
-export async function action({ request, context }: ActionFunctionArgs) {
+export async function action({ request, context }: Route.ActionArgs) {
   const formData = await request.formData()
 
   const rule = formData.get('rule')
@@ -27,12 +24,12 @@ export async function action({ request, context }: ActionFunctionArgs) {
   return redirect('/manage')
 }
 
-export async function loader({ context }: LoaderFunctionArgs) {
-  return defer({
+export async function loader({ context }: Route.LoaderArgs) {
+  return {
     routingZones: getRoutingZones(getZones(context), context),
     addresses: getAddresses(context),
     randomSize: getSetting('random-size', context),
-  })
+  }
 }
 
 export default function Index() {

app/routes/manage.tsx

@@ -1,18 +1,17 @@
-import type { LoaderFunctionArgs } from '@remix-run/cloudflare'
+import type { Route } from './+types/manage.js'
 
 import { Suspense } from 'react'
-import { defer } from '@remix-run/cloudflare'
-import { Await, useLoaderData } from '@remix-run/react'
+import { Await, useLoaderData } from 'react-router'
 
-import { getRules } from '~/models/rule.server'
-import { getZones } from '~/models/zone.server'
+import { getRules } from '~/models/rule.server.js'
+import { getZones } from '~/models/zone.server.js'
 
-import { Rule } from '~/components/Rule'
+import { Rule } from '~/components/Rule.js'
 
-export async function loader({ context }: LoaderFunctionArgs) {
-  return defer({
+export async function loader({ context }: Route.LoaderArgs) {
+  return {
     rules: getRules(getZones(context), context),
-  })
+  }
 }
 
 export default function Manage() {

app/routes/settings.tsx

@@ -1,14 +1,10 @@
-import type {
-  LoaderFunctionArgs,
-  ActionFunctionArgs,
-} from '@remix-run/cloudflare'
+import type { Route } from './+types/settings.js'
 
-import { defer } from '@remix-run/cloudflare'
-import { useLoaderData } from '@remix-run/react'
+import { useLoaderData } from 'react-router'
 
-import { getSetting, putSetting } from '~/models/settings.server'
+import { getSetting, putSetting } from '~/models/settings.server.js'
 
-import { Setting } from '~/components/Setting'
+import { Setting } from '~/components/Setting.js'
 
 const defaultSettings: Settings = [
   {
@@ -27,15 +23,15 @@ const defaultSettings: Settings = [
   },
 ]
 
-export async function loader({ context }: LoaderFunctionArgs) {
+export async function loader({ context }: Route.ActionArgs) {
   const settings: any = {}
   for (const setting of defaultSettings) {
     settings[setting.key] = getSetting(setting.key, context)
   }
-  return defer(settings)
+  return settings
 }
 
-export async function action({ request, context }: ActionFunctionArgs) {
+export async function action({ request, context }: Route.LoaderArgs) {
   const formData = await request.formData()
   return putSetting(
     formData.get('setting-key'),
@@ -52,7 +48,7 @@ export default function Settings() {
       <header>
         <strong>Settings</strong>
       </header>
-      {defaultSettings.map((setting) => (
+      {defaultSettings.map((setting: Setting) => (
         <Setting
           key={setting.key}
           setting={setting}

functions/[[path]].js

@@ -1,4 +1,4 @@
-import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages'
+import { createPagesFunctionHandler } from '@react-router/cloudflare';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - the server build file is generated by `remix vite:build`