nコマンド導入

Remixのインストールをインストール行う

mkdir my-remix-app
cd my-remix-app
npm init -y
npm i @remix-run/node @remix-run/react @remix-run/serve isbot react react-dom
npm i -D @remix-run/dev
mkdir app
vim app/root.jsx

import {
Links,
Meta,
Outlet,
Scripts,
} from "@remix-run/react"
export default function App() {
return (

Hello world!

)
}

npx remix build
vim package.json

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

npx remix-serve build/index.js
⇒ブラウザで http://localhost:3000 にアクセスする

開発中の自動更新が便利なので remix-serve を Express サーバに変更する

npm i express @remix-run/express
npm uninstall @remix-run/serve

vim server.mjs

import { createRequestHandler } from "@remix-run/express"
import express from "express"
import * as build from "./build/index.js"
const app = express()
app.use(express.static("public"))
app.all("*", createRequestHandler({ build }))
app.listen(3000, () => {
console.log("App listening on http://localhost:3000")
})

node server.mjs

vim package.json

{
"scripts": {
// ...
"dev": "remix dev -c \"node server.mjs\""
}
}

vim server.mjs

import { createRequestHandler } from "@remix-run/express"
+ import { broadcastDevReady } from "@remix-run/node"
import express from "express"
import * as build from "./build/index.js"
const app = express()
app.use(express.static("public"))
app.all("*", createRequestHandler({ build }))
app.listen(3000, () => {
+ if (process.env.NODE_ENV === "development") {
+ broadcastDevReady(build)
+ }
console.log("App listening on http://localhost:3000")
})

vim app/root.jsx

import {
Links,
+ LiveReload,
Meta,
Outlet,
Scripts,
} from "@remix-run/react"
export default function App() {
return (

Hello world!

+


)
}

npm run dev

別ターミナルを起動させて文字列を編集してみる

vim app/root.jsx

自動で書き換わる

参考 https://qiita.com/RuruCun/items/2d48e58864a923555df2