こんな感じのものを作る話。
[バージョン情報]
$ yarn -v 1.22.4 $ create-react-app --version 3.4.1
yarnを使うとcreate-react-appは自動的に最新バージョンになるのであまり気にしなくてよい。
準備として、任意のディレクトリで下記のコマンドを実行し、新たにプロジェクトを作成する。
yarn create react-app sample-app --template typescript
[環境変数を利用する]
シンプルに<div>Version 0.1.0</div>という記述を追加してもアプリのバージョンを表示することはできる。しかしせっかくなので、package.jsonに記載されているバージョン情報を利用したい。
react package.json versionで検索すると、次のページにたどり着いた。
var pjson = require('./package.json');のようにすれば、package.jsonの情報をなんでも利用できるが、セキュリティ上問題があるからやるべきではないと言われている。なるほど。
コメントを読み進めると、$npm_package_versionをnode上で環境変数として利用できるとある。
しかし、App.tsxに<p>{process.env.npm_package_version}</p>を追加してサーバーを起動しても画面に反映されない。
create-react-appのサイトを調べると、React側で利用できる環境変数は、NODE_ENVという特別な環境変数と、REACT_APP_ではじまる環境変数しか利用できないらしい。
環境変数はプロジェクトのルートディレクトリに配置した.envファイルに定義することもできる。これを利用して、下記のような.envファイルを作成する。
REACT_APP_VERSION=$npm_package_version
同様に、App.tsxファイルにも追記する。
<div>Version {process.env.REACT_APP_VERSION}</div>
これで無事バージョン情報をブラウザで確認できた。
（画像では.env.localファイルを追加して、その中でREACT_APP_VERSION=$npm_package_version.localと指定しているので、バージョンの末尾に.localとついている）
[productionビルドを試す]
yarn buildコマンドを実行するとbuildディレクトリ以下にminifyされたjsファイル（とcssファイル）が出力される。
念のためこちらの中身を確認しておくと、ちゃんとpackage.jsonに記載されているバージョンがjsファイル上にハードコーディングされていた。
.env.localファイルが存在しても、productionビルド時にはちゃんと.envファイルを参照してビルドしてくれていることが分かった。
yarn global add serveコマンドを実行してserveコマンドをインストールし、server -s buildコマンドを実行してビルド結果のディレクトリをWebサーバー経由で公開することができる。
ブラウザからhttp://localhost:5000を開いて動作確認すると、こちらも問題なく動作した。
[まとめ]
package.jsonのバージョン情報を.envファイル経由で環境変数に設定し、tsxファイル側で利用する方法をまとめた.envファイルにREACT_APP_で始まる任意の環境変数を設定すると、process.env.REACT_APP_XXXXの形でtsxファイルから利用できる（それ以外はNODE_ENV環境変数のみ利用可）.env.localファイルでローカル用に環境変数を設定していても、yarn buildした結果のproductionビルド時には.envファイルの情報が反映される
