lbialy / play-ng2-webpack2

Play 2.6.0 + Angular with Angular-CLI + SBT - based build
Other
55 stars 20 forks source link

Running on Windows 10? #1

Closed hanch04 closed 7 years ago

hanch04 commented 7 years ago

Hello,

I have 2 problems. I'm running on Windows 10. I have been about to get other templates working on play.

  1. I'm hitting what I think is a very basic issue. If I try activator run then it fails with: java.io.IOException: Cannot run program "npm" (in directory "C:\devsrc\play\play-ng2-webpack2-master\ui"): CreateProcess error=2, The system cannot find the file specified

Yes I do have npm installed and it is in my path.

  1. If I use the activator ui, then I can get it to compile and run but I can't get it to load in the browser. The page just loads "Loading..." and these errors from the browser: Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:9000/assets/app.js Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:9000/assets/vendor.js

Any thoughts?

Thanks, Chris.

lbialy commented 7 years ago

Sorry, I'm not using Windows :( Shouldn't happen anyway. I'll try to update this seed today and check if it builds on my pals laptop with Win 8.1.

hatemismail commented 7 years ago

For my case it was resolved by updating project/UIBuild.scala to detect windows and set run directly from npm bin location:

if(System.getProperty("os.name").toUpperCase().indexOf("WIN") >= 0){
            Process("node \"/Program Files/nodejs/node_modules/npm/bin/npm-cli.js\" install" :: Nil, base / "ui").run
          }

and all file will be:

import java.net.InetSocketAddress

  import scala.sys.process.Process

  import play.sbt.PlayRunHook
  import sbt._

  object UIBuild {
    def apply(base: File): PlayRunHook = {
      object UIBuildHook extends PlayRunHook {
        var process: Option[Process] = None

        override def beforeStarted() = {
          if (!(base / "ui" / "node_modules").exists())
            if(System.getProperty("os.name").toUpperCase().indexOf("WIN") >= 0){
              Process("node \"/Program Files/nodejs/node_modules/npm/bin/npm-cli.js\" install" :: Nil, base / "ui").run
            } else {
              Process("npm" :: "install" :: Nil, base / "ui").run
            }
        }

        override def afterStarted(addr: InetSocketAddress) = {
          if(System.getProperty("os.name").toUpperCase().indexOf("WIN") >= 0){
            Process("node ./node_modules/webpack/bin/webpack.js --watch", base / "ui/").run
          }else{
            process = Option(
              Process("node_modules/webpack/bin/webpack.js --watch", base / "ui").run
            )
          }
        }

        override def afterStopped() = {
          process.foreach(_.destroy())
          process = None
        }
      }

      UIBuildHook
    }
  }
lbialy commented 7 years ago

Sorry for long lack of activity here, got a new job and been pretty busy, but I've been reading a lot on the issues regarding play+ng2+webpack2 lately and I've prepared a plan for updates. Please see: https://github.com/lbialy/play-ng2-webpack2/issues/3. Any ideas, comments and critique are welcome of course.

lbialy commented 7 years ago

I'll try to incorporate this solution soon.

JFCote commented 7 years ago

I have the same problem as @hanch04 . The first error was fixed by the code from @hatemismail but even if everything compiles, I have the second problem with the 404... Any idea on how to fix that?

Errors are as follow in the Console:

Failed to load resource: the server responded with a status of 404 (Not Found) : inline.bundle.js (http://localhost:9000/assets/ui/inline.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found): polyfills.bundle.js
(http://localhost:9000/assets/ui/polyfills.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found): main.bundle.js 
(http://localhost:9000/assets/ui/main.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found): vendor.bundle.js 
(http://localhost:9000/assets/ui/vendor.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found) ::9000/assets/ui/styles.bundle.css
(http://localhost:9000/assets/ui/styles.bundle.css)
Failed to load resource: the server responded with a status of 404 (Not Found): polyfills.bundle.js 
(http://localhost:9000/assets/ui/polyfills.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found): vendor.bundle.js 
(http://localhost:9000/assets/ui/vendor.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found): main.bundle.js 
(http://localhost:9000/assets/ui/main.bundle.js)
Failed to load resource: the server responded with a status of 404 (Not Found): styles.bundle.css 
(http://localhost:9000/assets/ui/styles.bundle.css)

When I run npm run start in the ui folder, it serve the server without problem so I'm pretty sure everything should be there. Maybe another problem with the path in Windows 10? I'll try to find a solution and post it here if I found something

ronniegane commented 7 years ago

I'm having the same problem. After changing the path for the process called in afterStarted, I can compile. But the front-end files (JS, CSS etc) are not created at /public/ui. It seems like the npm process isn't actually running at the same time as the sbt process.

Workaround for now is just opening another command terminal in /ui subfolder and running npm run build -- --watch there directly. If you do that before you run sbt run in the root folder, the resource files will be there. I'll update if I figure out how to get it to work automatically. It'll just be some quirk of windows. The project works flawlessly on OSX, but unfortunately one of my colleagues is attached to his windows machine...

ronniegane commented 7 years ago

Okay, I think I got it! From this post where someone is using webpack and sbt in Windows, I found the magic phrase:

cmd /c which executes the string following it and then terminates.

if I prefix the script call to npm with this, then it works as expected- sbt run from root directory kicks off npm run build which does ng build to the /public/ui folder. All assets available at localhost:9000 where they should be.

I tried deleting node_modules as well to check if the cmd /c prefix works for that script as well, and it does. It doesn't provide much feedback though- so it looks like the script has frozen for a few minutes until all your node modules appear at once.

So a proper fix to make the runHooks work in a Windows environment, is to change UIBuild.scala:

      override def beforeStarted(): Unit = {
        if (!(base / "ui" / "node_modules").exists()) Process("cmd /c npm install", base / "ui").!
      }

      override def afterStarted(addr: InetSocketAddress): Unit = {
        process = Option(
          Process("cmd /c npm run build -- --watch", base / "ui").run
        )
      }

you'd probably want to use part of @hatemismail 's solution to check the OS and run these altered commands only in Windows. It's pretty late now but if you like I can make a pull request in the next few days, it's only a few lines.

lbialy commented 7 years ago

I'll look into this (and hopefully integrate your solution) during Easter, sorry for delay. If you have a working solution ready you can open a PR and I'll be happy to accept it.

ronniegane commented 7 years ago

Yeah I'll try and collate my fixes into a PR today.

lbialy commented 7 years ago

Thank you kindly!

ronniegane commented 7 years ago

Pull request made: #6