普段からTypeScriptを書いているとフロントエンドだけではなく、バックエンドもTypeScriptで書きたくなってきます。 なので、TypeScriptとExpressとViteを用いてボイラーテンプレートを作成してみました。
リンクは以下になります。
使い方
以下のツールがインストール済みなことが前提条件です。
githubのREADMEにも記載しましたが、リポジトリ右上の「Use this template」からリポジトリを作成して使用します。
リポジトリを作成してクローンしたら、 yarn install でパッケージを取得します。
パッケージの取得が終わったら 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 アプリをビルド、実行出来るテンプレートを作成してみました。
よく使う、特殊な構成のアプリケーションはテンプレート化しておくと後で開発効率が上がるので今後も必要に応じてボイラーテンプレートを作ってみようと思います。
今回作ったものは割と深夜テンションで一気に作ったので粗があるかもしれません。
また、時間を見て見直したいと思います。
