Remixiの新規プロジェクト作成

下記で新規プロジェクトを作成します。プロジェクト名はhogeとします。

npx create-remix@latest
cd hoge

サーバをexpressにする

expressを入れて、server.tsを追加します。

npm i express @remix-run/express cross-env @types/express
touch server.ts

server.tsを下記にします。

import { createRequestHandler } from "@remix-run/express";
import express from "express";
import type { ViteDevServer } from "vite";
import type { ServerBuild } from "@remix-run/node";

const viteDevServer: ViteDevServer | null =
  process.env.NODE_ENV === "production"
    ? null
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        })
      );

const app = express();
app.use(
  viteDevServer
    ? viteDevServer.middlewares
    : express.static("build/client")
);

const build: ServerBuild | (() => Promise<ServerBuild>) = viteDevServer
  ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build") as Promise<ServerBuild>
  : (await import("./build/server/index.js")) as ServerBuild;

app.all("*", createRequestHandler({ build }));

app.listen(3000, () => {
  console.log(process.env.NODE_ENV);
  console.log("App listening on http://localhost:3000");
});

上記のserver.tsの、./build/server/index.jsというパスの部分でエディタでエラーが出るので、一度ビルドしておきます。

npm run build

vite.config.tsを下記にします。

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig, loadEnv } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(({ mode }) => {
  // 環境変数をロード
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [
      remix({
        future: {
          v3_fetcherPersist: true,
          v3_relativeSplatPath: true,
          v3_throwAbortReason: true,
        },
      }),
      tsconfigPaths(),
    ],
    define: {
      'process.env': env
    }
  };
});

package.jsonのscriptを下記にします。下記2つ以外は変更する必要はありません。

"scripts": {
  "dev": "tsx ./server.ts",
  "start": "cross-env NODE_ENV=production node ./server.ts"
},

tsxをインストールします。

npm i -D tsx

これでサーバがexpressになって、開発環境だとHot Reloadされるようになりました。

フォーマッターを入れる

次はBiomeを入れてみたいと思います。

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

VSCodeの設定をやってみます。とりあえず、ワークスペースのsettings.jsonに下記を追加しました。

{
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

うまくいかない。下記のようなエラーが出る。

biome.jsonの初期状態じゃだめなのかな。よく分からないからprettierにしよう。

npm i -D prettier eslint-config-prettier
touch .prettierrc

.prettierrcを下記にします。

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "printWidth": 100
}

daisyUIを入れる

次はdaisyUIを入れます。

npm i -D daisyui@latest

tailwind.config.tsを修正します。puginにdaisyuiを追加します。 darkModeがデフォルトでONになるので、OFFになるようにしてオリジナルの色を設定してみます。

import type { Config } from 'tailwindcss';

export default {
  content: ['./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
  darkMode: 'class',
  daisyui: {
    themes: [
      {
        logicky: {
          primary: '#663399',
          secondary: '#F000B8',
          accent: '#37CDBE',
          neutral: '#3D4451',
          info: '#3ABFF8',
          success: '#36D399',
          warning: '#FBBD23',
          error: '#F87272',
          'base-100': '#FFFFFF',
          'base-200': '#fcf6ff',
          'base-300': '#f6f0f9',
        },
      },
    ],
    darkTheme: 'logicky',
  },
} satisfies Config;