gradleで開発サーバーを起動し、Fast Refleshを可能にする

[no-yan]

ShitforcesはKotlin, Reactをともにビルドしており、ReactのFast Refreshが無効になっています。gradleでFRが可能な開発サーバーを起動できるとReact側は即座に変更が反映されるため、フロントエンドの開発がかなりやりやすくなります。

しかし、実際にgradleからFast Refreshを有効にすると、終了時にportが開放されず、またfetchでindex.htmlが取得される謎の挙動が起こります。

可能ならgradleからホットリロードを有効にしたいですが、あまり頑張らずに修正できるでしょうか？

gradleから開発サーバーを起動すると、'Json String Error'が表示される

現状、gradleがバックエンドだけをビルドさせる場合、Fast Refreshできることは確認してます。 しかしbuild.gradle.kts から npm start で開発サーバーを起動すると、'Json String Error'が表示されます。 api/contests/latest?contest_page=0のfetchで、なぜかindex.htmlを取得してエラーが出ています。

gradleにバックエンドだけをビルドさせる場合

package.jsonにproxyを設定し、terminal でコマンドを叩くとFast Refreshできる。

// frontend/package.json
// yarn startでは同一のportで起動できないので、proxyを設定している
{ 
  "proxy": "http://localhost:8080"
}

// CLI
./gradlew bootRun -Pargs="--only-back-end"
cd frontend && PORT=4000 npm start

44

gradleでバックエンド・フロントエンドともにビルドさせる場合

buildReactを変更するとFast Refreshが有効になる。しかし、fetchでindex.htmlを取得するようになり、JSON.parse() できず、エラー文'Json String Error'を表示する。(src/functions/HttpRequest.ts の httpRequest 関数 54行目)

// build.gradle.kts
task<NpmTask>("buildReact") {
    val args = mutableListOf("run")
    val buildMode = System.getenv("BUILD_MODE") ?: "DEVELOPMENT"
    dependsOn("installNpm")
    setExecOverrides(closureOf<ExecSpec> {
        this.workingDir("./frontend")
    })
    if (buildMode == "PRODUCTION") {
        args.add("prodbuild")
    } else {
        args.add("start") // build から start に変更
    }
    setArgs(args)
}

[ShopOne]

ちょっと確認してみたいと思います〜(最近少し忙しいので遅くなってしまうかもですが)

[ShopOne]

ぬ〜〜〜〜〜ん中々上手く行かないですねぇ… build から start に変えたスクリプトの場合、npm run start が動きっぱなしという扱いになるので、NpmTaskが終わった扱いにならず、すると大本の proccesResources(Kotlinの実行等をしています)のタスクが実行できない状態になっているっぽいです。 apiとかは動かずReactだけは動いているので、上記のhtmlが取れちゃったりしているのだと思います。 npm run ほげほげ が終わらないといけないので、Gradleからfrontendを監視出来ると良さそうなんですが… 少しずつ色々見ていきます。

[no-yan]

見ていただいてありがとうございます。

フロントエンドとバックエンドは独立なので、両方とも同時に動かせるような気がしています。 今の実装ではprocessResourcesはdependsOn("buildReact")でbuildReactの完了を待っていますが、これを並行処理に変えられたりしますか？

[ShopOne]

僕も並列実行みたいなのを探してみています それぞれ別々に起動じゃ面倒くさいですしねぇ… 一発で並列実行みたいのが出来るやつが探せれば良いんですが、まだちょっと色々見てみます。

[no-yan]

ターミナルで表示してくれないと終了時にポートを開放しないっぽいのでCLIからターミナルを多重起動することを考えましたが、調べてもCLIでターミナルを複数起動する方法がよくわかりませんでした。

Makefileがあればかんたんに起動できるようになるので、これであればとりあえずgradleから起動しなくてもいいと思っています。