Open6
Remix 2 handler + adapter Express, API連携 試作メモ
knaka Tech-Blog概要
Remix handler + adapter, expressで。API連携などメモになります
- POST通信で、Formタグ等使用など一般的に見えますが。
- 指定フォルダにAPI設置する方法なります。
- テストは、 stackblitz.comで確認しました。
[ 公開: 2024/06/01 ]
環境
- @remix-run/node: 2.8.1
- express
- @remix-run/express
関連
作成したコード
Stackblitz
説明など
-
上記、関連ページ参考で、adapter経由でRemix request送信できそうでした。
-
install
npm i express @remix-run/express
- nodemon使う場合、下記
npm i -D nodemon rimraf
- server
server.js
import remix from "@remix-run/express";
import express from "express";
const app = express();
app.use(express.static("public"));
//
import * as build from "./build/server/index.js";
//
app.all(
"*",
remix.createRequestHandler({
build: build,
})
);
app.listen(3000, () => {
console.log("App listening on http://localhost:3000");
});
- server実行, JS version
npx remix vite:build
#
node server.js
TS-version
- src/server.ts
- build, dev-start
- esbuild で、server部分をトランスパイルします。
- nodemon で、起動する例です。
yarn build
#
yarn dev
- tree: app/ 下
.
├── api
│ └── test.ts
├── components
│ ├── Head.tsx
│ └── LoadBox.tsx
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
├── routes
│ ├── Test.tsx
│ ├── _index.tsx
│ └── about.tsx
└── server.ts
3 directories, 10 files
- src/api/test.ts
- app/routes/Test.tsx
- fetch POST通信、express APIレスポンスを受信できました
今回までの。まとめ
- 内部API連携できる
- Formタグ無しで。server側 POST通信できる
- TSコードで全て実装できる(ツール等以外)
- Express実装で、server機能(ミドルウェアなど) おそらく追加できる。
knaka Tech-Blog外部API 連携、参考追加しました
- D1 + workes 連携です。
- CRUD一部を。追加しました
- routes/ApiTest.tsx
- app/api/commonRouter.ts: 内部API (中間API)
- server間通信です。
knaka Tech-Blogシンプル版 認証、追加しました
- .envから、User, pass 読み込み認証する方法です。
- Login画面等、追加しています。
- ユーザー追加は、できません。
作成したコード
knaka Tech-BlogPostgres 外部API 追加
- 上記の、workers API連携と、似ている構成です。
- 外部API連携で、postgres操作する例になります
- supabase使う例です
- CRUD 一部、追加しました。
作成したコード
- List, Create など
knaka Tech-BlogTurso LibSQL 外部API 追加
- 上記の、workers API連携と、似ている構成です。
- 外部 express API連携で、Turso操作する例になります
- CRUD 一部、追加しました。
作成したコード
- List, Create など
knaka Tech-Blogmermaid.js ,ER図作成を追加
- mermaid.js追加し。各種の図を表示する機能を追加しました
- mermaidデータは、D1に保存し。外部API経由で操作します
作成したコード
- MdTestShow.tsx: 詳細、mermaid 変換
- データは、一覧画面で保存可能です。
- 画像変換後の画面 (stackblitz.com の画面です)
