なぽろぐ

気ままに感じたことを記事にまとめます。

トップ > NestJSでwebpack-dev-middlewreを使って気持ちよくなった

NestJSでwebpack-dev-middlewreを使って気持ちよくなった

NestJSでReactを動かしたい

あること・ないこと

書いてあること

  • 必要なライブラリ
  • NestJSでやるべきこと
  • つまづいたこと

書いてないこと

はじめに

別にSSRとかする話じゃないです。

ディレクトリ構成はこんな感じです。頑張って綺麗にしてるつもりですが、もっといい方法があると思うので教えてください :bow:

  • clientにReactで作っているコンポーネントたち
  • serverにNestJSのnewした時に生成させたものたち

が入っています

.
├── README.md
├── client
├── dist
├── nest-cli.json
├── node_modules
├── package.json
├── public
├── server
├── static
├── test
├── tsconfig.build.json
├── tsconfig.json
├── webpack
├── yarn-error.log
└── yarn.lock

webpack-dev-middlewareなんですけどこいつが何者かっていうと webpack-dev-serverで起動するサーバーをexpressに載せ替えることができる奴なんですね

github.com

api使いたいだけなら普通にdevServerでプロキシすればいいじゃんって話なんですけど、バックエンド起動したらdevServerも起動してくれた方がかっこいいじゃないですか・・・・・・

webpack-dev-middlewareを組み込む

必要なライブラリ yarnなら

yarn add @nestjs/platform-express path
yarn add -D webpack webpack-cli merge @types/webpack @types/webpack-dev-middleware @types/webpack-hot-middleware webpack-dev-middleware webpack-dev-server webpack-hot-middleware

npmなら

npm -i -s @nestjs/platform-express path
npm -i -s --dev webpack webpack-cli merge @types/webpack @types/webpack-dev-middleware @types/webpack-hot-middleware webpack-dev-middleware webpack-dev-server webpack-hot-middleware

やるべきことは簡単で

  1. NestFactory.createのときにNestExpressApplicationを指定する

    • NestのオブジェクトにExpressのuseメソッドを生やすことができます
    • github.com

  2. app.use(webpackMiddleware(....))する

  3. ServerStaticModuleを導入する

くらいでしょうか。あとはnestのサーバ起動して、http://localhost:portに接続すれば、いい感じになるんじゃないですかね。

つまづいたところ

最後に

決していいディレクトリ構造でも、プログラムではないと思います。

ただいい感じにまとまったので個人的には満足しています。

最近の悩み