TypeScript x React x Firebase Hostingの環境構築&デプロイを1行で

この記事は、今すぐalias登録すべきワンライナー by ゆめみ① Advent Calendar 2018の22日目の記事です。

ワンライナー、なんかgitやらサーバやらは結構たくさん世にでている気がするので、
ちょっとひと味違うワンライナー(？)をかきました。

ワンライナー

npx create-react-app my-app --scripts-version=react-scripts-ts; cd my-app; expect -c "spawn firebase init hosting; expect \"Select a default Firebase project\"; send \"\n\"; expect \"What do you want to use as your public directory?\"; send \"build\n\"; expect \"Configure as a single-page app\"; send \"\n\"; interact;"; npm run build; firebase deploy --only hosting;

※前提、node.jsをいれてnpxが使えるようになっていること、firebase loginを済ませていること

簡単に解説

なんでこんなワンライナーを書いたかというと、
最近フロントエンドでなんかしたいな、というときに考えることが多くてめんどくさいな、
というところで。

もう、とりあえずでいいんや！ってときでも、ちょっと考えたり、選んだりしてると、やる気と時間を奪われかねないので、
とりあえずのベストプラクティスを1行で提供してみました。

やってることは、
npx(その場限りのnpm、みたいなものです)をつかって、
create-react-app(reactアプリケーションで楽にスタートさせるための環境)で環境を作って、
firebaseプロジェクト化して(firebase init hosting)、
reactのビルドをして、
firebase hostingにdeployしています。

ポイントは、expectを使っているところで、
firebase initしたときの対話をすべて自動化しています。
デプロイ対象ディレクトリを、create-react-appに合わせて、buildディレクトリに変えるくらいのことだけしてます。

いちおう、bashでのファイルにしたとき(整形したバージョン)も記載しておきます。

#!/bin/bash

npx create-react-app my-app --scripts-version=react-scripts-ts
cd my-app

expect -c "
spawn firebase init hosting

expect \"Select a default Firebase project\"
send \"\n\"

expect \"What do you want to use as your public directory?\"
send \"build\n\"

expect \"Configure as a single-page app\"
send \"\n\"

interact
"

npm run build
firebase deploy --only hosting

注意としては、firebaseはdefaultのプロジェクトを使うようにしているので、気をつけてください。

では、良いクリスマスを！！！