普段からTypeScriptを書いているとフロントエンドだけではなく、バックエンドもTypeScriptで書きたくなってきます。 なので、TypeScriptとExpressとViteを用いてボイラーテンプレートを作成してみました。
リンクは以下になります。
使い方
以下のツールがインストール済みなことが前提条件です。
githubのREADMEにも記載しましたが、以下のコマンドを実行するとテンプレートが作成されます。
yarn init && yarn add express cors express-validator && yarn add --dev typescript vite vite-plugin-node @types/node @types/express @types/cors && mkdir ./routes && curl -fsSL https://raw.githubusercontent.com/neko3cs/neko3cs-lab/main/template/express-web-api/src/tsconfig.json -o ./tsconfig.json && curl -fsSL https://raw.githubusercontent.com/neko3cs/neko3cs-lab/main/template/express-web-api/src/vite.config.ts -o ./vite.config.ts && curl -fsSL https://raw.githubusercontent.com/neko3cs/neko3cs-lab/main/template/express-web-api/src/main.ts -o ./main.ts && curl -fsSL https://raw.githubusercontent.com/neko3cs/neko3cs-lab/main/template/express-web-api/src/routes/coffee.ts -o ./routes/coffee.ts
注意点として、事前にソースコードを配置するフォルダを作成し、その中で実行するといいと思います。
また、あまり重要ではないですが、 yarn init で途中聞かれる entry point(index.js): は main.ts としておくとソースコードと整合性が取れます。
上記の処理が終わったら yarn vite dev などして動作確認してみてください。
内容について
デフォルトのソースコード
デフォルトで一応動くアプリが展開される様にしています。
アプリは http://{host_name}:3000/ で「Hello Express with TypeScript!」というメッセージを取得するAPIを用意しています。
また、 http://{host_name}:3000/coffee/all で JSON 形式でデータを取得するAPIを用意しています。
適宜、 main.ts と routes/coffee.ts を修正、削除するなりして使ってください。
デフォルトで追加しているパッケージ
以下のパッケージが追加されています。
| パッケージ名 | 目的 |
|---|---|
| express | Webアプリケーションフレームワークとして利用するため |
| cors | CORS対策のため |
| express-validator | バリデーションチェックのため |
| node-fetch | サンプルAPI呼出のため |
| typescript | 開発言語として利用するため |
| vite | ビルドツールとして利用するため |
| vite-plugin-node | viteを用いてNode.jsアプリケーションをホストするため |
また、その他型情報（ @types/* ）も追加しています。
作ってみた感想など
Viteはフロントエンド向けのビルドツールだからかデフォルトではExpressはサポートされていない様です。
なので、今回は axe-me/vite-plugin-node というライブラリを用いて、Vite で Express アプリをビルド、実行出来るテンプレートを作成してみました。
よく使う、特殊な構成のアプリケーションはテンプレート化しておくと後で開発効率が上がるので今後も必要に応じてボイラーテンプレートを作ってみようと思います。
今回作ったものは割と深夜テンションで一気に作ったので粗があるかもしれません。
また、時間を見て見直したいと思います。