firebase clound functionsをTypeScript + webpackでalias(絶対パス)付きでビルドしてみる的なお話

firebaseが昨今注目されまくってて色々と情報があるわけで。
まぁAWSでいうlambdaみたいなものなんだけどこれがまた便利だったりするわけで。
ということでcron的な感じでts-nodeを使って色々と回してたTypeScript製のやつをfirebaseに載せちゃおうと思ったりなんだり。

tscでビルドするなりfirebase deployするなり色々と面倒な工程が増えたわけだけどもそれでも十分得るものは大きいなぁと。
けどその中で特に面倒だったのがtsconfig.jsonで絶対パスとしてファイルを読み込むために設定していたpathsがビルドされると自動で変換されないっていう。

ということで今日は絶対パスで記述していたtsファイルをビルドしてfirebase serveするまで的なお話をば。

Reactでビルドしたファイルのサイズが大き過ぎるのを少しでも小さくしたい的なお話

wordpressのサイトをあえてのReact + WP Rest APIで書いているんだけど、
React + Webpackでビルドした際に、ファイルサイズがすごく大きくなってしまうことがある。
いくつか原因があるので、今日はそれらを解決して少しでもファイルサイズを小さくするには的なお話をば。

lessをgulpじゃなくてwebpackでコンパイルしつつ、minimizeしたりautoprefixerつけたり的なお話

cssをそのまま書くのもいいけど、色を頻繁に変えたいとかそういうことってよくあるわけで。
そういうときには大体LESSかSCSSを使うことが多いわけで。
これらをビルドするには大体gulpとかになってしまうんだけど、
Reactを使うとなるとwebpackになるからそれに合わせてビルドしたいというのが本音。

ということで今日はwebpackでlessをコンパイルするには的なお話をば。

React-Reduxを使ったWebアプリをサーバサイドレンダリング(SSR)するには、こういう風にしたらいいんじゃないか的なお話

React-Reduxを使った開発でのディレクトリ構成をどうしたらいいのか的なことから、こうやって組んだらいいんじゃないか的なお話ということで、前回つらつらと書いたわけだけど。
これはクライアント側のjs単体で動くわけだから細かいことを気にする必要がなかったからよかったが、SNSにシェアしたときにOGPが設定されないと困るわけで。
というのもfacebookやtwitterのbotがjsをレンダリングすることができないから。
ちなみにgoogleはちゃんとjsをレンダリングしてクローリングしてくれるからSEOとかは問題ないわけだけど、たまにSEOのためにSSRをしないとって言っている人がいるのは個人的に謎。

ということで今日はOGPに対応するためのサーバサイドレンダリング(SSR)をするにはこういう感じがいいよ的なお話をば。

Reactで開発してるときに、require(import)を相対パスで書くのが面倒だから絶対パスで書くには的なお話

Reactを使ってるとrequire(import)を多用するわけで。
ただ面倒なのが相対パスで書くっていう感じのこと。
これをやるとComponentが深いところにあるとかそういうときに、../../../とかかなり書かないといけないっていう。

ということで今日はこの相対パスを絶対パスで書くには的なお話をば。
ちなみに前提としてwebpackを使っていることが条件。

React-Reduxを使った開発でのディレクトリ構成をどうしたらいいのか的なことから、こうやって組んだらいいんじゃないか的なお話

React-Reduxを使うとすっごく便利なわけで。
ただ問題となるのがディレクトリ構成をどうしようかと。
もちろん公式での書き方とかあったりするけれども、github上で他の人がアップしているexampleとか見ると若干違うような気がするとか。

人それぞれいろんな書き方があるのはわかるけれども、なんていうか気持ち悪いというかなんというか。
ってことで今回はどこらへんに注目しつつ、自分としてはこうやって構成した方が気持ちいいんじゃないかというお話をば。