Edited at

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のプロジェクトを使うようにしているので、気をつけてください。

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