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