クイックスタート（5分）

このガイドでは、Remixアプリケーションを実行するために必要な基本的なプロセスをできるだけ早く理解できるようにお手伝いします。様々なランタイム、デプロイメントターゲット、データベースを持つスターターテンプレートが多数ありますが、ここでは基本的なプロジェクトを最初から作成していきます。

Remixプロジェクトを本格的に始める準備ができたら、コミュニティテンプレートから始めることを検討してください。これらには、TypeScriptのセットアップ、データベース、テストツール、認証などが含まれています。コミュニティテンプレートのリストはRemixリソースページで見つけることができます。

インストール

バッテリー内蔵のRemixプロジェクトを初期化したい場合は、create-remix CLIを使用できます：

npx create-remix@latest

ただし、このガイドではCLIがプロジェクトをセットアップするために行うすべての作業を説明し、CLIを使用する代わりに以下の手順に従うことができます。Remixを始めたばかりの場合は、Remixアプリケーションを構成するすべての異なる部分を理解するために、このガイドに従うことをお勧めします。

mkdir my-remix-app
cd my-remix-app
npm init -y

# ランタイム依存関係をインストール
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# 開発依存関係をインストール
npm i -D @remix-run/dev vite

Vite設定

touch vite.config.js

RemixはViteを使用するため、Remix Viteプラグイン用のVite設定を提供する必要があります。以下は必要な基本設定です：

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

export default defineConfig({
  plugins: [remix()],
});

ルートルート

mkdir app
touch app/root.jsx

app/root.jsxは私たちがルートルートと呼ぶものです。これはアプリケーション全体のルートレイアウトです。以下は任意のプロジェクトに必要な基本的な要素のセットです：

import {
  Links,
  Meta,
  Outlet,
  Scripts,
} from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <link
          rel="icon"
          href="data:image/x-icon;base64,AA"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <h1>Hello world!</h1>
        <Outlet />

        <Scripts />
      </body>
    </html>
  );
}

ビルドと実行

まず、プロダクションアプリケーションをビルドします：

npx remix vite:build

これでbuildフォルダが表示されるはずです。このフォルダには、serverフォルダ（アプリケーションのサーバーバージョン）とclientフォルダ（ブラウザバージョン）が含まれており、いくつかのビルドアーティファクトが含まれています。（これらはすべて設定可能です。）

👉 remix-serveを使用してアプリケーションを実行する

まず、remix-serveがアプリケーションを実行できるように、package.jsonでタイプをモジュールとして指定する必要があります。

{
  "type": "module"
  // ...
}

これで、remix-serveを使用してアプリケーションを実行できます：

# ダッシュに注意！
npx remix-serve build/server/index.js

http://localhost:3000を開いてhello worldページが表示されるはずです。

node_modules内の大量のコードを除いて、私たちのRemixアプリケーションはたった1つのファイルです：

├── app/
│   └── root.jsx
└── package.json
└── vite.config.js

独自のサーバー

remix vite:buildによって作成されたbuild/serverディレクトリは単なるモジュールで、Express、Cloudflare Workers、Netlify、Vercel、Fastly、AWS、Deno、Azure、Fastify、Firebaseなどのサーバーで実行できます。

独自のサーバーをセットアップしたくない場合は、remix-serveを使用できます。これはRemixチームによって維持されているexpressベースのシンプルなサーバーです。ただし、Remixは独自のスタックを持てるように、任意のJavaScript環境で実行できるように特別に設計されています。多くの（ほとんどの）本番アプリケーションは独自のサーバーを持つことが予想されます。詳細についてはランタイム、アダプター、スタックをご覧ください。

試しに、remix-serveの使用を停止して、expressに切り替えてみましょう。

👉 Express、Remix Expressアダプター、および本番モードで実行するためのcross-envをインストール

npm i express @remix-run/express cross-env

# これは不要になります
npm uninstall @remix-run/serve

👉 Expressサーバーを作成

touch server.js

import { createRequestHandler } from "@remix-run/express";
import express from "express";

// `remix vite:build`の結果は「単なるモジュール」であることに注意
import * as build from "./build/server/index.js";

const app = express();
app.use(express.static("build/client"));

// そしてあなたのアプリは「単なるリクエストハンドラー」です
app.all("*", createRequestHandler({ build }));

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

👉 expressを使用してアプリケーションを実行

node server.js

これで独自のサーバーを持つことができ、サーバーが持つ任意のツールを使用してアプリケーションをデバッグできます。たとえば、chrome devtoolsのNode.js検査フラグを使用してアプリケーションを検査できます：

node --inspect server.js

開発ワークフロー

サーバーを常に停止、再ビルド、再起動する必要はありません。代わりに、Viteミドルウェアモードを使用して開発中にRemixを実行できます。これにより、React Refresh（ホットモジュール置換）とRemixホットデータ再検証を使用して、アプリケーションの変更にすぐにフィードバックを得ることができます。

まず、便宜上、package.jsonにdevとstartコマンドを追加します。これらはそれぞれ開発モードと本番モードでサーバーを実行します：

👉 package.jsonにscriptsを追加

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

👉 Vite開発中間ウェアをサーバーに追加

process.env.NODE_ENVが"production"に設定されている場合、Vite中間ウェアは適用されず、代わりに通常のビルド出力を実行します。

import { createRequestHandler } from "@remix-run/express";
import express from "express";

const viteDevServer =
  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 = viteDevServer
  ? () =>
      viteDevServer.ssrLoadModule(
        "virtual:remix/server-build"
      )
  : await import("./build/server/index.js");

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

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

👉 開発サーバーを起動

npm run dev

これで、アプリケーションをすぐに使用し、変更にすぐにフィードバックを得ることができます。試してみて、root.jsx内のテキストを変更してみてください！

サーバーとブラウザーのエントリーポイントを制御する

Remixはデフォルトのマジックファイルを使用しますが、大多数のアプリケーションはこれらのファイルを処理する必要はありません。ただし、Remixのサーバーとブラウザーのエントリーポイントをカスタマイズしたい場合は、remix revealを実行してこれらのファイルをプロジェクトにダンプできます。

npx remix reveal

エントリーファイル entry.client を app/entry.client.tsx に作成しました。
エントリーファイル entry.server を app/entry.server.tsx に作成しました。

まとめ

おめでとう！Remixを自分の履歴に追加できます！まとめると、以下のことがわかりました：

Remixはアプリケーションを2つの部分にコンパイルします：

自分のJavaScriptサーバーに追加するリクエストハンドラー
ブラウザーのパブリックディレクトリ内の静的アセットのバンドル

自分のサーバーとアダプターを持ち、どこでもデプロイできます
内蔵HMRを持つ開発ワークフローを設定できます

一般に、Remixは「大胆」です。わずかな時間のボイラープレートコードですが、自分のスタックを持つことができます。

次のステップは何ですか？

チュートリアル