browser-syncでmiddlewareを設定してAPIモックサーバーとしても機能させる

2018-03-15

マークアップ時に、JSONを返してくれるモックサーバーがあると便利な時があります。
json-serverなどもありますが、browser-syncを利用しているのであれば簡単にモックサーバーとしても機能させることができるので紹介です。

準備

HTML

ボタンがクリックされたらAPIを叩いて、返ってきた内容をリストに追加する仕組みを準備しました。

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="button">/api</button>
    <ul id="list"></ul>
    <script>
        var list = document.getElementById('list');
        var button = document.getElementById('button');
        button.addEventListener('click', function() {
            handleClick();
        });
        function handleClick() {
            fetch('/api').then(function(res) {
                return res.json();
            }).then(function(json) {
                list.appendChild(createElement(json.text));
            });
        }
        function createElement(text) {
            var li = document.createElement('li');
            li.textContent = text;
            return li;
        }
    </script>
</body>
</html>

browser-sync

普段はwebpackなどと組み合わせて使っているのですが、単体で進めてみます。

# "browser-sync": "^2.23.6"
yarn add -D browser-sync

# configファイル出力
npx browser-sync init

// package.json
"scripts": {
    "start": "browser-sync start --config bs-config.js"
}

config設定

bs-config.jsのserverオプションをpublicディレクトにします。
"server": "public"
ここまでくればyarn startでブラウザが起動してindex.htmlが表示されるはずです。

そしてここからが今回の記事の本題になります。
middlewareのオプションを追加して/apiを叩くとJSONが返ってくるようにします。
https://browsersync.io/docs/options/#option-middleware

// bs-middleware.js
module.exports = [{
    route: '/api',
    handle: (req, res) => {
        res.setHeader('Content-Type', 'application/json');
        res.end(JSON.stringify({
            status: 200,
            text: 'hi'
        }));
    }
}];

// bs-config.js
const middleware = require('./bs-middleware');

module.exports = {
    ...
    "middleware": middleware,
    ...
};

再起動

browser-syncを再起動しなおして、ボタンを押した時にテキストが追加されれば完成です。
http://localhost:3000/api でも確認できます。
簡単なモックから凝ったことまでできるので是非試してみてください。

サンプル

一応サンプルコードを残しておきました。
https://github.com/nao5151/browser-sync-api-sample

普段のマークアップでもお世話になってます。browser-syncさまさまです。 https://github.com/Browsersync/browser-sync