webpack dev serverでAPIをmock化する

webpackを使ってフロント開発をしている場合、webpack dev serverでアプリを起動しながら作業を進める事があるかと思いますが、そこにAPI呼び出しのmockも実装してしまおうという事を書いた記事になります。

結論
- 定義例
webpack使っていれば動くと思われます
サンプルソース

結論

結論から先に言いますと、webpack dev serverの設定のbeforeにmock化したいエンドポイントとレスポンスを定義すればOKです。

GETやPOSTはもちろん、ファイルの送受信やレスポンスヘッダーの変更なども可能なので、サーバー側の実装や別にmockサーバーを立てなくてもある程度のことは再現できるのではないかと思います。

定義例

module.exports = {
  devServer: {
    port: 8080,
    hot: true,
    before: function(app, server, compiler) {
      function sendResponse(req, res, status = 200, body = {}, header = {}) {
        const defaultHeader = {
          'Content-Type': 'application/json',
          'charset': 'utf-8',
        };

        const responseHeader = Object.assign(defaultHeader, header);
        
        res.writeHead(status, responseHeader).end(JSON.stringify(body));
      }


      app.get('/api', function(req, res) {
        sendResponse(req, res, 200, {aaa: 'bbb', ccc: 111});
      });

      app.post('/api/csv_upload', upload.single('file'), function(req, res) {
        const file = req.file;
        const filePath = 'uploads/' + file.filename;
        const buf = fs.readFileSync(filePath);
        const detected = encoding.detect(buf);
        const encoded = encoding.convert(buf, { from: detected, to: 'UNICODE', type: 'string'});

        fs.unlinkSync(filePath);
        sendResponse(req, res, 200, csvParse(encoded));
      });
    }
  },
}