Remixアプリの新規作成方法が変わってたので備忘録

フロントエンド開発に最近はRemixを使っているが、新規作成コマンドが変わっていたりするので、備忘録として残しておく。

Remixアプリの新規作成

とりあえずcreate-react-routerで作成する

npx create-react-router@latest <app-dir-name>

SPAモードに変更するにはssrモードをfalseに変更すればよい

react-router.config.ts

import type { Config } from "@react-router/dev/config";

export default {
  // Config options...
  // Server-side render by default, to enable SPA mode set this to `false`
  ssr: false,
} satisfies Config;

ルーティング

いちいちroutes.tsを編集したくないのでフラットルートで書けるようにする

npm i @react-router/fs-routes

routes.tsを編集する

app\routes.ts

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

// export default [index("routes/home.tsx")] satisfies RouteConfig;
export default flatRoutes() satisfies RouteConfig;

これでapp\routesにファイルを作成するだけでアクセスできるようになる。

忘れがちなあれこれ

• viteを使用しているので、環境変数はVITE_始まりにすること
  使用するときはimport.meta.env.<変数名>