create-react-kotlin-app & GitHub Pages

目的

Kotlin/JS ＋ React アプリを Github Pages へ公開したい

参考：GitHub Pages について - GitHub Docs

準備

参考： MacにNode.jsをインストール - Qiita

1. Nodeのインストール
2. 動作確認

$ node -v
v14.7.0

サンプルアプリの公開

公式：JetBrains/create-react-kotlin-app： Create React apps using Kotlin with no build configuration

1. 「Create React Kotlin App」 コマンドを使えるようにする

$ npm install -g create-react-kotlin-app

2. アプリの作成

$ create-react-kotlin-app Githubのユーザ名.github.io

3. お試しにビルド

$ cd Githubのユーザ名.github.io
$ npm run build

※そうすると下記の説明が出る。serveはお手軽httpサーバのこと。詳しくはこちら

The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed. You may serve it with a static server:

serve -s build

4. package.json にHomePage設定を追加

{
    "name": "Githubのユーザ名.github.io",
    //略
    "scripts": {
    //略
    },
    //↓これを追加
    "homepage" : "https://Githubのユーザ名.github.io/"
}

5. もう一度ビルドする

$ npm run build

※そうするとさらに下記の説明が出る。

The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json.

The build folder is ready to be deployed. To publish it at https://Githubのユーザ名.github.io/ , run:

npm install --save-dev gh-pages

Add the following script in your package.json.

// ...
"scripts": {
  // ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Then run:

npm run deploy

6. package.json にエイリアス設定を追加

{
    "name": "Githubのユーザ名.github.io",
    //略
    "scripts": {
    //略
    "get-types": "react-scripts-kotlin get-types --dest=src/types",
    "postinstall": "npm run gen-idea-libs"
    //↓この２つを追加
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    },
    "homepage" : "https://Githubのユーザ名.github.io/"
}

7. 専用ブランチ(gh-pages)へ自動公開してくれるパッケージをインストールする。

詳しくはこちら

$ npm install --save-dev gh-pages

8. Githubにリポジトリを作成する

※リポジトリ名は「Githubのユーザ名.github.io」にすること

Githubリポジトリ作成画面

9. リポジトリへソースコードを上げる

$ git init
$ git add .
$ git commit -m "add: create react-kotlin-app"
$ git remote add origin https://github.com/Githubのユーザ名/Githubのユーザ名.github.io.git
$ git push origin master

10. GithubPagesへデプロイする

## package.jsonで設定した
## "deploy": "gh-pages -d build"
## を実行する
$ npm run deploy

11. https://Githubのユーザ名.github.io/ へアクセスする

※この時点だとREADMEが表示される

GithubPagesにホストされたREADME

12. リポジトリの設定を、Reactアプリが表示されるように変更する

※ GitHub Pages > Source > Branch が gh-pages になればOK

GithubPagesのためのリポジトリ設定

13. 再度、https://Githubのユーザ名.github.io/ へアクセスする

※反映までに少し時間がかかる

14. おしまい!!

GithubPagesにホストされたサンプルアプリ

その他参考

• GitHub PagesにReactアプリをデプロイする方法 - Qiita
• npm run deploy で GitHub Pages にお手軽デプロイ - Qiita
• Kotlin for JavaScript - Kotlin Programming Language