はじめに
参照：https://ralacode.com/blog/post/create-nodejs-react-app-with-typescript/
下記の環境を構築する
- バックエンドをExpress
- フロントエンドをReact(vite)
- バックエンドとフロントエンドはTypescriptを使用する
node.jsの環境構築
node.jsインストール
node.jsのバージョン管理をするためにnvmを使用したい
下記の記事を参考にインストール
https://qiita.com/akipon0821/items/eaeffe79221cfcd4d258
メモ
nvm version ：バージョン確認
nvm list :インストールしてあるnodeのリスト確認
nvm install バージョン番号 :指定したバージョンのインストール
nvm use バージョン番号 :指定したバージョンを使用可能にする
node -v ：node.jsのバージョン確認
プロジェクトフォルダを作成
任意の場所にプロジェクトフォルダを作成する
その配下にバックエンド用とフロントエンド用のフォルダも作成する
バックエンドのpackage.json作成
cmdでバックエンドフォルダに移動して以下のコマンドを実施する
npm init -y
Typescriptを使用するための準備
次にTypeScriptを使う準備をします。
2つのパッケージをインストールします。
- typescript
- @types/node
バックエンドフォルダで下記コマンドを実行
npm install -D typescript @types/node
npx tsc --init
実行後、「backend」の中に「tsconfig.json」が作られます。
「tsconfig.json」はTypeScriptに関する設定を書くところです。
tsconfig.jsonの内容を書き換える
"target": "es2022"
コメントアウトされているmoduleResolutionを有効化し下記ような設定にする
"moduleResolution": "node"
node.jsのバージョンで記載する内容が変わるため調べる
以下を参照
https://gist.github.com/azu/56a0411d69e2fc333d545bfe57933d07
Expressを使用する準備
ReactとNode.jsが接続をするのに必要
Expressをインストール
ターミナルで以下のコマンドを実行
npm install express
npm install -D @types/express
バックエンドフォルダに「server.ts」というファイルを作る
※名前はなんでもいい
/* server.ts */
import express from "express";
const app: express.Express = express();
app.listen(3000);
package.jsonのmainの部分に「server.js」と記載
cmdで下記コマンドを実行する
tsファイルの変更を監視し、jsファイルを更新する
npx tsc -w
上記とは違うcmdを立ち上げ下記コマンドを実行する
node --watch-path=./dist server.js
nodemonを使用しないでnode --watchを使用する
https://zenn.dev/morinokami/articles/npm-uninstall