Closed2024/02/29にクローズ2

Remix で開発環境のみ表示可能なページを実装できるようにする設定

NODE_ENV === "development" の環境でのみ表示可能なページを実装するには以下のように設定します 👇

remix.config.js の場合

remix.config.js

const isDev = process.env.NODE_ENV === "development";

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  // ...

  // これによって `*._dev.tsx` ファイルは開発環境でのみ表示されます
  ignoredRouteFiles: isDev  ? [] : ["**/*._dev.tsx"],
};

vite.config.ts の場合

vite.config.js

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

const isDev = process.env.NODE_ENV === "development";

export default defineConfig({
  // ...
  plugins: [
    remix({
      // これによって `*._dev.tsx` ファイルは開発環境でのみ表示されます
      ignoredRouteFiles: isDev  ? [] : ["**/*._dev.tsx"],
    }),
  ],
});

上記の設定により、app/routes/*._dev.tsx のファイルは開発環境でのみ表示できるようになります。

uttk

注意点

Remix のルーティングはドット区切りで指定するので、ページの拡張子を *.dev.tsx のようにしてしまうと /*/dev のように必ず最後に /dev が付くようになります。

それを防ぐには *._dev.tsx のように表示したくないパスに対して _ を付けると、パスが追加されてしまうのを防ぐことができます。詳しくは公式ドキュメントを参照してください 👇

このスクラップは2024/02/29にクローズされました