Erlang error on assets watcher

melissable commented 6 years ago

For feature requests, please be as descriptive as possible, providing a real use case and context of how you imagine the feature to work.

For bug reports please fill the following info:

Environment

Kitto version: 0.8.0
Elixir / Hex version (mix hex.info): Hex: 0.17.7 Elixir: 1.6.6 OTP: 20.2

Built with: Elixir 1.6.4 and OTP 19.3

Node / NPM version (node -v) (npm -v): 6.14.3 / 6.1.0
Operating system: Windows

Current behavior

Setting up my Kitto dashboard, already ran mix devs.get, npm install, etc. Problem happens in 'mix kitto.server'. The server starts, but then the asset watcher hits the following error:

$ mix kitto.server

12:44:02.409 [info]  Starting assets watcher at: 127.0.0.1:8080

12:44:02.427 [error] Process #PID<0.87.0> raised an exception
** (ErlangError) Erlang error: :eacces
    erlang.erl:2118: :erlang.open_port({:spawn_executable, 'c:/Projects/reactApps/kittodashable/node_modules/.bin/webpack-dev-server'}, [{:env, [{'KITTO_ASSETS_HOST', '127.0.0.1'}, {'KITTO_ASSETS_PORT', '8080'}]}, :use_stdio, :exit_status, :binary, :hide, {:args, ["--stdin", "--progress"]}])
    (elixir) lib/system.ex:629: System.cmd/3
Compiling 1 file (.ex)
warning: redefining module Mix.Tasks.Kitto.Server (current version loaded from c:/Users/Missa/.mix/archives/kitto-0.8.0/kitto-0.8.0/ebin/Elixir.Mix.Tasks.Kitto.Server.beam)
  lib/mix/tasks/kitto.server.ex:1

12:44:02.838 [info]  Starting Kitto server, listening on 127.0.0.1:4000

Expected behavior:

Want the dashboard assets to loader in the DOM

zorbash commented 6 years ago

@melissable Thanks for reporting this. I'll need help to debug this fast, as I don't happen to have a windows machine around.

Are you able to start c:/Projects/reactApps/kittodashable/node_modules/.bin/webpack-dev-server from your cmd without problems?

melissable commented 6 years ago

Hi @Zorbash ,

I was not to start that command. I got the following error:

Error: Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:476:15)
    at Function.Module._load (module.js:424:25)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (c:\Projects\reactApps\kittodashable\node_modules\webpack-dev-server\bin\webpack-dev-server.js:48:1)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)

Thank you for your quick response!!

melissable commented 6 years ago

Also, fyi, I ran that command from within this project directory.

zorbash commented 6 years ago

Can you also please try the following:

Run npm run start from the root of the project
Or try bumping the webpack-dev-server dependency version in package.json, start with version 2.11.1.

melissable commented 6 years ago

Opt 1: didn't work - got these errors

$ npm run start
npm ERR! Windows_NT 10.0.17134
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\**********\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
npm ERR! node v8.11.3
npm ERR! npm  v3.10.10

npm ERR! missing script: start
npm ERR!
npm ERR! If you need help, you may report this error at:
error at:                                      >
npm ERR!     <https://github.com/npm/npm/issues>                                               any support requ
npm ERR! Please include the following file withe\npm-debug.log any support request:
npm ERR!     C:\Projects\reactApps\*******/kittodashable\npm-debug.log

Opt 2 - I already had dependency version of 2.11.1 on webpack-dev-server in my package.json

Any other thoughts? I've scoured the webs trying to find a solution.

Thanks, Melissa

melissable commented 6 years ago

Hello, again-

I read somewhere that this issue might be related to Windows permissions. So I have tried running this repository on my Linux computer and seem to have gotten further, as a page is rendering (see first image) and I was able to populate the 404 page.

Here is the record of the command prompt, up the point where I attempted and received back the 404 page:

$ mix kitto.server

23:47:58.787 [info]  Starting assets watcher at: 127.0.0.1:8080
23:47:58.901 [info] Starting Kitto server, listening on 127.0.0.1:4000
23:47:59.023 [error] backend port not found: :inotifywait

 70% 2/2 build modulesevents.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1020:11)
    at exports._exceptionWithHostPort (util.js:1043:20)
    at Server._listen2 (net.js:1271:14)
    at listen (net.js:1307:10)
    at net.js:1417:9
    at _combinedTickCallback (internal/process/next_tick.js:83:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:613:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:160:9)
23:48:22.889 [info] GET /dashboards/sample
23:48:22.929 [info] Sent 200 in 39ms
23:48:23.162 [info] GET /assets/application.js
23:48:23.171 [info] Sent 301 in 8ms
23:48:23.176 [info] GET /assets/widgets.js
23:48:23.177 [info] Sent 301 in 304µs
23:48:29.174 [info] GET /dashboards
23:48:29.174 [info] Sent 301 in 60µs
23:48:29.211 [info] GET /dashboards/sample
23:48:29.215 [info] Sent 200 in 4ms
23:48:29.339 [info] GET /assets/application.js
23:48:29.339 [info] Sent 301 in 261µs
23:48:29.341 [info] GET /assets/widgets.js
23:48:29.342 [info] Sent 301 in 1ms
23:48:33.658 [info] GET /dashboars
23:48:33.660 [info] Sent 404 in 1ms

dashboardnotrendering

Your continued help with this is greatly appreciated.

Thank you, Melissa

zorbash commented 6 years ago

It's such a relief that you have a Linux computer! The screenshots you provided are actually quite useful as I can identify 2 problems:

There's some other server running on you machine, listening on 8080 (use lsof -i tcp:8080 to find the process id and if possible stop it)
I looks like you attempted to access dashboars instead of dashboards, hence the 404.

zorbash commented 6 years ago

To customise the port of the asset server see: https://github.com/kittoframework/kitto/wiki/Customizing-the-Asset-Watcher

melissable commented 6 years ago

So, when I made that screenshot, it was showing the 404 url I tested, aka dashboars because I was trying to see if a 404 page would render which it did. I've attached that screenshot. The solo dot page that I sent the screenshot yesterday is what renders on the default url localhost:4000/dashboard/sample

I've reattached the two screenshots just as clarification. Right out of the gate I get the following dashboard sample and 404 page renders.

dashboardnotrendering 404

So, I was able to manipulate error.html.eex to play with the css. Attached example. 404manipulated

I tried option 1 of your suggestions and I am new at this, but it didn't look like anything else was running on port 8080.

lsof -i tcp:8080
COMMAND  PID     USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node    9028 melissac   15u  IPv4 223913      0t0  TCP localhost:http-alt (LISTEN)

I ran mix kitto.server again and reran lsof -i tcp:8080 and got this:

mix kitto.server

12:09:33.510 [info]  Starting assets watcher at: 127.0.0.1:8080
12:09:33.607 [info] Starting Kitto server, listening on 127.0.0.1:4000
12:09:33.712 [error] backend port not found: :inotifywait

 70% 2/2 build modulesevents.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1020:11)
    at exports._exceptionWithHostPort (util.js:1043:20)
    at Server._listen2 (net.js:1271:14)
    at listen (net.js:1307:10)
    at net.js:1417:9
    at _combinedTickCallback (internal/process/next_tick.js:83:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:613:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:160:9)

12:09:47.625 [info] GET /dashboards/sample
12:09:47.662 [info] Sent 200 in 37ms
12:09:47.762 [info] GET /assets/application.js
12:09:47.764 [info] GET /assets/widgets.js
12:09:47.768 [info] Sent 301 in 6ms
12:09:47.768 [info] Sent 301 in 4ms

301 - moved permanently on application.js and widget.js ?? Sure enough, neither of those is in the assets folder. On further inspection, it looks like the new kitto installer does not provide any of the items in the priv folder, including kitto.js and helpers.js, which I know are needed to render the dashboard.

I'm pushing to a repository, if that might be helpful for you to see. But it does feel that the mix kitto.new did not install everything needed to render the sample dashboard.

Repo link to follow.

melissable commented 6 years ago

https://github.com/melissable/kittable.git

Thank you for all your help, @Zorbash !

Melissa

zorbash commented 6 years ago

@melissable Please review https://github.com/melissable/kittable/pull/1/files and let me know.

kittoframework / kitto