hot reloadを自前のexpressサーバーに組み込む

こんにちは。明治大学総合数理学部現象数理学科の鈴木です。2016年度からWeb Engineerはじめて、現在はPlaid, incでインターン中です！明治大学総合数理アドベントカレンダーを@ryunryunryunを巻き込んで作ってみたのですが、カレンダーはスッカスカです！（ネタも思いつかないし）

最近のwebpackだと、webpack-dev-serverをインストールすれば、簡単にhot reload開発ができるようになります。しかし、既にサーバー側のコードを書いていて、そちらにhot reloadを組み込みたい場合もあると思います。今回は、Expressサーバーにhot reloadを組み込む方法を記事にしてみました。

Hot reloadとは

Hot reloadとはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれることを言います。ただ単にブラウザで開いているページをリロードするのではなく、VueやReactであれば、そのコンポーネントの状態をリロードしてくれるという代物です。

ここを読んでみてください！

• Vue hot reload

Getting Started

必要なモジュールのインストール

hot reloadに必要なモジュール

npm i --save-dev express webpack webpack-dev-middleware webpack-hot-middleware

なんとなくpugがほしいので

npm i --save-dev pug

webpackの設定を書く

• entrypointの設定は配列の形式すること
• output先のフォルダをoutput.publicPathにも設定すること
• HotModuleReplacementPluginをpluginsに入れること
• 開発時にのみhot reloadを設定すること

./webpack.config.js

const path = require('path')
const webpack = require('webpack')
const isProd = process.env.NODE_ENV === 'production'

const webpackConfig = {
  // webpack config
  entry: {
    app: [path.resolve(__dirname, 'client.js')]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  plugins: []
  // ...
}

if (isProd) {
  // ...
} else {
  // dev
  webpackConfig.entry.app.unshift('webpack-hot-middleware/client')
  webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin()
  )
}

module.exports = webpackConfig

Express Server

これをserverに追加するだけで終わりです。

const webpack = require('webpack')
const webpackConfig = require('./webpack.config.js')
const compiler = webpack(webpackConfig)
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true, publicPath: webpackConfig.output.publicPath
}))
app.use(require("webpack-hot-middleware")(compiler))

例

例では、開発時のみhot reloadを有効にするようにしています。また、リクエストが来たらhot reload付きで./index.pugをrenderするようにしています。

./server.js

const express = require('express')
const app = express()
const isProd = process.env.NODE_ENV === 'production'

if (!isProd) {
  const webpack = require('webpack')
  const webpackConfig = require('./webpack.config.js')
  const compiler = webpack(webpackConfig)
  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
  }))
  app.use(require("webpack-hot-middleware")(compiler))
  }
}

app.set('view engine', 'pug')

app.use((req, res, next) => {
  res.render('index')
})

const server = setup(app)

server.listen(8080)

Client Side

./client.js

// any js code. eg vue/react/...

./index.pug

html
  header
    title hot reload
  body
    #app
    script(src="/dist/app.js")

DONE

これで終わりです。後は、server.jsを実行するだけです。また、server.js内でwebpackのcompileをしているため、webpack watchをする必要はありません。コードを書いたら直ぐにブラウザ上に反映されるはずです！最後に、webpackにvue-loaderなりなんなりを入れてSPAをhot reloadで開発してみましょう！

ただ、大規模開発のときはどうなるんでしょうか？？ 重そう。