node - mecablog

Cloud Firestore エミュレータを concurrently と一緒に使う

概要 Cloud Firestore エミュレータをコマンドの並列実行支援モジュール concurrently と一緒に使う場合、コマンドを少し工夫しないと期待通りに動作しない。以下を行う必要がある。エミュレータの起動の際、firebase serve --only firestore < /dev/null とし、標準入力を /dev/null から取るようにする。 concurrently の--success (-s) オプションを適切に設定する。期待通りに動作する npm script の例を以下に示す。 "scripts": { "test": "concurrently --success=first --kill-others -n 'emulator,

development

Firebase Hosting のルーティングを噛ませて webpack-dev-server などの静的コンテンツホストを使うためのプロキシ

2019/1/14 午前5:57 (JST) provider のコードを修正。概要 Firebase Hosting 用に設定したURL書き換えを利用しつつ、webpack-dev-server などの他の開発サーバーからコンテンツの取得をしたい。この問題に対して、Firebase Hosting の開発サーバー (firebase serve) が内部的に利用している superstatic を使い、URLを書き換えた上で別のサーバーからコンテンツを取得するようなプロキシを作ることで解決した。完全なコードは https://gist.github.com/mecab/9890416390e8c5a2c42547823d252e20 で参照できる。 (adsbygoogle = window.adsbygoogle || []).push({}); 背景と問題 Firebase Hosting は Google が提供する静的コンテンツのホスティングサービスだ。コンテンツを用意して適切な設定を書けば、そのコンテンツをHTTPで取得できるように

node

Node.jsでconnect-assetsを使ったアセットのビルドと配信をする＋bourbon, neat, bittersを使ってみる

概要本記事では、Node.jsでconnect-assetsを使ってアセットをビルドする方法を説明し、またこの仕組みの上でbourbon、neatおよびbittersを使ったWebページを提供する方法を一例として説明する。connect-assetsはRailsのSprocketsのようなものだ。なお、本記事によって作成される最終的な成果物の例は、https://github.com/mecab/blog-20151228-connect-assets に公開されている。背景最近はフロントエンドのJSをずっと書いているものの、CSSもJSも生のそれらをベタ書きして静的に垂れ流しているだけで、ちゃんとビルドしたりminifyしたりということをしていなかった。これはさすがにフロントエンド力が足りなさすぎるのでは...と不安になったのでようやくこの辺りの環境を作ってみることにした。主な目標は1)JSとCSSといったアセットをビルドすること。特にCSSはSASS/SCSSからビルドすること。 2)開発中は元のアセットに変更を加えたら即時に反映されるようにする一方、本番運用時は事前にすべてのアセットをビルドして、静的に提供できる状況を作ること。である。上記の環境を試すにあたって、適当にSCSSを書いても良いのだが、最近bourbon、neat、bittersというCSSフレームワークがいい感じらしいという記事を見て、またこれらはSCSSで書かれているので、ついでにこれらを使ったSCSSをビルドしてみることにした。今回はGruntやGulpで変更を監視してビルドするスクリプトを書く方法は取らなかった。ちょっとしたプロジェクトには大掛かりすぎるなと思ったこと（一度スクリプトを書いてしまえば使いまわせるのだろうけれど、それはそれでコピペしまくることになって、後から変更するときによくわからないことになりそうだし）と、ビルドツールが乱立していて、