It should be possible to start the front end and back end with a single command

[OldManLink]

This is a description of how the project works for me under Mac OS X Catalina, along with a suggestion of how I think it should work.

• From the root directory, I start the back end with the command sbt run

• After everything is built and the server has started, the following output appears in the console:

> scala-play-react-seed@1.0.0 start /Users/peter/CodeRoot/other/scala-play-react-seed/ui
> react-scripts start

ℹ ｢wds｣: Project is running at http://10.0.0.69/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /Users/peter/CodeRoot/other/scala-play-react-seed/ui/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

• The browser now opens at the url http://localhost:3000/. This page is blank, and the error message in Chrome is as follows:

This site can’t be reached
localhost refused to connect.

• I open a new console and execute the following:

cd ui
npm start

The output in the new console is as follows:

Compiled successfully!

You can now view hivetest in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.69:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

• The browser automatically reloads http://localhost:3000/ and displays the React application as expected.

I would have expected the last stage to happen automatically, making the manual step unnecessary.

[yohangz]

Yes, sbt run should load the frontend application properly.

It clearly runs the same command via the run hook and your issue summary confirms it. Could you please share the full log dump to investigate further. It works perfectly fine in my environment.

I hope you had the port 3000 free at the time of the initial run.

[OldManLink]

Thanks! I can confirm that port 3000 was free before the initial run.

I have copied the console output to a new file called logs/console.log, and logs/application.log is untouched by me. Here is the zip file of the logs directory:
logs.zip

[OldManLink]

Note: The above was based on a fresh install from the downloaded zip file, and it also worked fine once I invoked cd ui ; npm start in a secondary console. I have annotated the point when this occurred.

[yohangz]

I did some debugging and found that there is an issue when invoking react-scripts through a process initiated from a different directory outside of React project root. This used to work well with older react versions but the latest react updates broke the functionality. I might have to debug further.

[OldManLink]

I see that the issue about this has been closed, so it doesn't look as if there are plans to fix it. Shall I take a look in FrontendRunHook and see if the suggested cwd can be done in there?

[OldManLink]

I have not had any luck with that, but I can confirm that this change makes everything work again:

18:24 $ git diff
diff --git a/ui/package.json b/ui/package.json
index 94301df..b981ff6 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,7 +14,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "^3.0.1"
+    "react-scripts": "2.1.8"
   },
   "devDependencies": {
     "ncp": "^2.0.0",
✔ ~/CodeRoot/other/scala-play-react-seed [master|✚ 1]

So this confirms that the problem is caused by react-scripts version 3.0.1

For my part, this change is sufficient for now, and I am no longer stuck. If you wish to close the issue that is fine by me, but should you find a better solution I'd still like to know.

[yohangz]

Thanks for the confirmation. My goal is to support the latest version of React. I will debug further and see whether there is a workaround.

[Suedo]

I am facing a similar situation. This project has javascript react, and since I would prefer Typescript, i rm -rfd the ui folder, and created a new one using create-react-app with the typescript flag.

Everything else is the same, and I have modified the package.json with ncp and rimraf, as mentioned in your medium article.

But, when I do sbt run in the root localtion, the browser opens up at localhost:3000 but then gives the error that OP mentioned.

To bring the UI up in localhost:3000, I need to manually go into the ui folder in terminal, and do yarn start.

If you could help in understanding why this is happening, would be great!

Link to my 'fork' : https://github.com/Suedo/PlayScalaReact

I am also on OSX catalina

[AlexTo]

subscribed ;)

[pedrorijo91]

+1 here. I don't have a lot of experience in react, but let me/us know if there's some way we can help with this issue :)

[nelsonblaha]

+1, Ubuntu 18.04

[KevinThoriya]

same problem,
have to start manually both servers.
Ubuntu 18.04

[theilig]

heh I should have looked here before I ratholed trying to fix this.

It's weird because I can execute the same line in a standalone scala script and it works, but it doesn't seem to work in the sbt hook, so I really struggled to isolate exactly what caused the problem.

import sys.process._

object TestNpm extends App {
  val p = Process("npm start --prefix /Users/theilig/code/Test/ui").!
}

works from a totally different project/directory

however changing the hook to execute the same line at sbt run-time doesn't work

I suspect it's happening somewhere in the compile step, but even with verbose logging I couldn't see any errors

[theilig]

ok, starting to nail it down, it does not happen with react-scripts 3.2, unclear with 3.3 because that was broken. However I expect it has to do with

facebook/create-react-app@1cbc6f7

The timing lines up, and we seem to be dying around when the public url slice is happening

[theilig]

Actually
facebook/create-react-app@7e6d6cd

Looks like the change, verified that react 3.4.0 is fine, and 3.4.1 is not.

This change landed between them, and is almost certainly closing webpack because we are not interactive

[AlexTo]

the above fix by @theilig works, thanks 👍

[ptrdom]

Maybe it would make sense to downgrade to react-scripts 3.4.0 in master branch? I bet that everyone is bothered by this issue.

[ptrdom]

Closed by #30.