LimeGreenJSの使い方
概要
Reactの環境構築は初心者には難しい場合があります。 導入時はCRA (create-react-app)を使うと簡単にできますが、 実際にそのアプリを公開する場合には様々な技術を使うことになります。
LimeGreenJSは、React/GraphQLで開発したアプリを 公開できるようにするサービスです。 GitHubと連携しており、コードをpushするだけでアプリを公開できます。 LimeGreenJSはGraphQLのバックエンドを内包せず、 既存のバックエンドサービスを使うことを前提にしています。
LimeGreenJSはビルドとWebサーバの機能を提供します。 標準的なApolloのパッケージやwebpackの設定が含まれています。 現在はカスタマイズできませんが、将来的にはできるようになる見込みです。
LimeGreenJSへのアクセス
下記のLimeGreenJSのサイトにアクセスします。
https://limegreenjs.axlight.com/
このサイトを使うには GitHubアカウントでログインして使用の許可をする必要があります。
Hello Worldの実行
最も簡単なHello Worldのアプリを実行してみましょう。
OFFICIALのHello Worldを見つけて、"RUN APP"ボタンを押すと アプリを実行することができます。 新しいウインドウが開いてHelloが表示されることを確認しましょう。
"SHOW CODE"ボタンを押すとGitHubのページが開いてソースコードを見ることができます。 ファイルを開いてソースコードを確認しましょう。
Hello Worldの変更
LimeGreenJSの使い方を学ぶためにHello Worldを変更してみましょう。
- SHOW CODEで表示したGitHubのページでforkする(右上のボタン)
- forkされた自分のリポジトリでjsファイルを開く
- Editボタンを押して編集画面に入る
- ソースコードの"World"の文字を別のものに置き換えてみる
- 保存する(commit)
- LimeGreenJSのサイトに行き、リロードする
- Mineタブから自分のHello Worldを探してRUN APPする
変更されたアプリが表示されれば成功です。
ローカル開発
上記のGitHubでのソースコード編集は、ローカル開発に慣れている場合は むしろ不便なことがあります。 普段のエディタとgitコマンドを使う場合を練習してみましょう。
- LimeGreenJSでOFFICIALのhot module replacementを探す
- SHOW CODEしてforkする
- forkしたリポジトリをローカルにcloneする
- cloneしたリポジトリのディレクトリに入り、npx limegreenjs devを実行する
- http://localhost:8080 にアクセスして動作を確認する
- 4のlimegreenjsを起動したまま、jsファイルを編集する
- jsファイルを保存するとすぐにアプリの画面が更新されることを確認する
- commitしてpushする
- LimeGreenJSのサイトに行き、リロードする
- Mineタブから該当アプリを探してRUN APPする
課題
- LimeGreenJSにアクセスする
- hello-worldをいじる
- hot-module-replacementをいじる