React Router Cloudflare Boilerplate | 構築メモ

npx create-react-router@latest react-router-cloudflare-boilerplate --template remix-run/react-router-templates/cloudflare-d1

npx wrangler d1 create d1-app-test-db

✅ Successfully created DB 'd1-app-test-db' in region APAC
Created your new D1 database.

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "d1-app-test-db",
      "database_id": "***************"
    }
  ]
}

  ...
  "d1_databases": [
    {
      "binding": "DB",
+     "database_name": "d1-app-test-db",
+     "database_id": "***************",
      "migrations_dir": "drizzle"
    }
  ]
}

CLOUDFLARE_D1_ID="******"
CLOUDFLARE_ACCOUNT_ID="******"
CLOUDFLARE_TOKEN="******"

import type { Config } from "drizzle-kit";

export default {
  out: "./drizzle",
  schema: "./database/schema.ts",
  dialect: "sqlite",
  driver: "d1-http",
  dbCredentials: {
+   databaseId: process.env.CLOUDFLARE_D1_ID!,
    accountId: process.env.CLOUDFLARE_ACCOUNT_ID!,
    token: process.env.CLOUDFLARE_TOKEN!,
  },
} satisfies Config;

npm run db:migrate-production

npm run deploy

npm run db:migrate

npm run dev

npm install --save-dev --save-exact @biomejs/biome

npx @biomejs/biome init

{
  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "includes": [
      "app/**/*.ts",
      "!worker-configuration.d.ts",
      "!.react-router/**/*"
    ],
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

npm i -D vitest

import { cloudflare } from "@cloudflare/vite-plugin";
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig(({ mode }) => ({
  plugins: [
    cloudflare({ viteEnvironment: { name: 'ssr' } }),
    tailwindcss(),
    ...(mode === 'test' ? [] : [reactRouter()]),
    tsconfigPaths(),
  ],
  test: {
    globals: true,
    setupFiles: ['./test/setup.ts'],    
  },
}));

{
  ...
  "compilerOptions": {
    "composite": true,
    "strict": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2022"
    ],
    "types": [
      "node",
      "vite/client",
+     "vitest/globals"
    ],
}

npm i @react-router/fs-routes

import type { RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

const routes: RouteConfig = flatRoutes();
export default routes;

{
  ...
  "compilerOptions": {
    "checkJs": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
+   "paths": {
+     "~/database/*": [
+       "./database/*"
+     ],
+     "~/*": [
+       "./app/*"
+     ]
+   }
  }
}

npx shadcn@latest init

npm i -D husky

npx husky init

npx biome check --staged --fix --no-errors-on-unmatched
git update-index --again

npm install -g task-master-ai

{
  "mcpServers": {
    "taskmaster-ai": {
      "command": "npx",
      "args": [
        "-y",
        "--package=task-master-ai",
        "task-master-ai"
      ],
      "env": {
        "ANTHROPIC_API_KEY": "YOUR_ANTHROPIC_API_KEY_HERE",
        "PERPLEXITY_API_KEY": "YOUR_PERPLEXITY_API_KEY_HERE",
        "OPENAI_API_KEY": "YOUR_OPENAI_KEY_HERE",
        "GOOGLE_API_KEY": "YOUR_GOOGLE_KEY_HERE",
        "MISTRAL_API_KEY": "YOUR_MISTRAL_KEY_HERE",
        "OPENROUTER_API_KEY": "YOUR_OPENROUTER_KEY_HERE",
        "XAI_API_KEY": "YOUR_XAI_KEY_HERE",
        "AZURE_OPENAI_API_KEY": "YOUR_AZURE_KEY_HERE"
      },
      "type": "stdio"
    }
  }
}

Can you please initialize taskmaster-ai into my project?