browser-syncでmiddlewareを設定してAPIモックサーバーとしても機能させる
目次
マークアップ時に、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