React+Redux+TypeScriptでPWA 01~ReactAppのbuild&localDeploy~

はいこんにちは、saikiです。

ちょっとWebアプリケーションが作りたくなったもののWeb開発の全てを忘れたので、Reactでサンプルアプリを作ってみたいと思います。

で、ナウさを求めるならPWAやろってことでついでにPWAです。

以下の記事を参考に進めていき、必要な部分だけかいつまんで書いていきたいと思います。

今回はビルドして動かすとこまで。

コード書かないのでまだタイプスクリプトはでてきません。

最終的にbitCoinの値段がリアルタイムに更新されるアプリができるらしいです。素敵。

追記:思った以上に重そうだったのでもうちょい軽いアプリを作ることにします。できればreduxもついでに勉強したいのでその方向で考え中。

環境構築

必要なtoolを入れます。これだけで全て入るらしい。いいね。

npmがない人はnpmを入れる必要があります。

参考記事どうぞ。

これで終わり。

プロジェクト作成

アプリの雛形を作成しましょう。コマンドです。

pushercoinsはプロジェクト名なので好きに変えても問題ありません。

ServiceWorkerが動くようにコード書き換え

参考ページではこの記述がなくてハマりましたが、ServiceWorkerを動かすためにはindex.jsを編集する必要があるようです。

確かにserviceWorker.jsonにデフォルトでは動かないって書いてありました。

index.jsの最後の行の

に変えます。これだけ。

buildしてみる

参考ページではここでServiceWorkerについての説明がでてきてめちゃくちゃタメになりそうですが今回は割愛。

とりあえずServiceWorkerはブラウザとは別に裏で動くjavaScript環境です。

こちらの記事がとてもわかりやすいので気になる方はぜひ。

さておき、ビルドのコマンドを叩きます。

サーバールートに置かれるのを前提にビルドしてるからそうじゃない時はpackage.jsonを編集してくれよな!

みたいなことを言ってくれるし、deployのコマンドも教えてくれます。懇切丁寧。

deployしてみる

ローカルサーバーにdeployしてみましょう。

これで「http://localhost:5000 」とか開くとこんな感じ

簡単おしゃれか。

ServiceWorkerの確認

クロームの右上の丸三つアイコンからデベロッパーツールを開いて

アプリケーションタブでこんな感じにlocalhostと緑の丸ポチが表示されて入れば動いています。

良さそう。

まとめ

長くなりそうなので一旦ここで切ります。

最初っからPWA対応を考えて作れば意外と簡単なのではないかと思ってしまうくらいにはここまでは簡単でしたね。

次回は実際のアプリケーションを作っていきます。楽しみ。

ではまた。

自己紹介
Android開発エンジニアです。
kotlinがお気に入り。

 

おすすめ

Udemyのビデオ講座は本当に捗るので学習にとてもおすすめです。まじで。


スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください