Getting a blank page after starting the app for the first time on Windows

[joshiwawa]

I followed the instructions from http://meanjs.org/docs.html to get started.

But after I started the app in development mode with gulp, the app was started succesfully

But when I connect to localhost:3000, I get a blank page

From the sniffer, I found out that all the query to modules/* returned 404 Not Found

Is there anything I missed?

[mleanos]

Is this happening with a fresh clone of the latest master branch?

Have you added any client-side libraries? Are there additional errors in the browser console?

Generally, when I see this happen it's due to one of the client-side libraries not installing. Can you confirm that bower install installs all front-end libraries?

[joshiwawa]

Yes, this is happening with a fresh clone of the latest master branch.

No, I haven't add any client-side libraries. There isn't any additional error in the browser console except all the file queries to modules/* returned 404 not found.

And Yes, I have confirmed that bower install installs all the front end libraries.

Note: It seems that the blank page is caused by file queries to modules/* returned 404 not found.

[joshiwawa]

Further discovery lead me to this line in modules/core/server/routes/core.server.route.js

I tried changing it to:

Now, the files is returned successfully by the server.
However, the page still remain blank because the "content-type" header returned is "text/html"

As a result of MIME type error, the page is still blank

Can anyone help me to get this thing to work. Much appreciated.

[sedkis]

It's weird because those are configured correctly in Master branch.

[joshiwawa]

Is this just me or is this really an issue?
Can anyone simulate what I am facing right now?
Can someone try the steps below?

1. cloning a fresh copy from the master branch
2. install dependencies and run the app

[sedkis]

@joshiwawa It's just you -- I cloned the master branch July 19th and it hasn't changed since.. see my profile's "myMeanApp" if you wish

[simison]

Works fine for me (on OSX, npm 3 and NodeJS 6):

git clone https://github.com/meanjs/mean.git mean-test
cd mean-test
npm install && npm start

Travis runs these on Ubuntu Linux, CentOS, OSX and Windows so master branch is always tested to work on all these.

Maybe check file permissions?

What's your Node version?

Docs are a bit outdated in that they still instruct using gulp and bower commands directly (which requires them globally installed), but you should really just do npm install and npm start. Should make no big difference tho.

[joshiwawa]

Here's my environment

• Windows 10
• Node version: v8.1.4
• NPM version: v5.3.0
• Bower version: 1.8.0

@simison @sabousha , I tried

git clone https://github.com/meanjs/mean.git mean-test
cd mean-test
npm install && npm start

same result, blank page

here's the message in the cli

D:\[Documents]\[nodejs]>git clone https://github.com/meanjs/mean.git mean-test
Cloning into 'mean-test'...
remote: Counting objects: 10183, done.
remote: Compressing objects: 100% (18/18), done.
remote: Total 10183 (delta 7), reused 15 (delta 4), pack-reused 10161
Receiving objects: 100% (10183/10183), 3.15 MiB | 1.12 MiB/s, done.
Resolving deltas: 100% (5229/5229), done.

D:\[Documents]\[nodejs]>cd mean-test

D:\[Documents]\[nodejs]\mean-test>npm install && npm start
npm WARN deprecated bower@1.8.0: ..psst! While Bower is maintained, we recommend Yarn and Webpack for *new* front-end projects! Yarn's advantage is security and reliability, and Webpack's is support for both CommonJS and AMD projects. Currently there's no migration path, but please help to create it: https://github.com/bower/bower/issues/2467
npm WARN deprecated ignore@2.2.19: several bugs fixed in v3.2.1
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha1-Yi4y6CSItJJ5EUpPns9F581rulU= integrity checksum failed when using sha1: wanted sha1-Yi4y6CSItJJ5EUpPns9F581rulU= but got sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==. (6052 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.

> uws@0.14.5 install D:\[Documents]\[nodejs]\mean-test\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> node-sass@4.5.3 install D:\[Documents]\[nodejs]\mean-test\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\JYNG\AppData\Roaming\npm-cache\node-sass\4.5.3\win32-x64-57_binding.node

> node-sass@4.5.3 postinstall D:\[Documents]\[nodejs]\mean-test\node_modules\node-sass
> node scripts/build.js

Binary found at D:\[Documents]\[nodejs]\mean-test\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine

> gifsicle@3.0.4 postinstall D:\[Documents]\[nodejs]\mean-test\node_modules\gifsicle
> node lib/install.js

  √ gifsicle pre-build test passed successfully

> jpegtran-bin@3.2.0 postinstall D:\[Documents]\[nodejs]\mean-test\node_modules\jpegtran-bin
> node lib/install.js

  √ jpegtran pre-build test passed successfully

> optipng-bin@3.1.4 postinstall D:\[Documents]\[nodejs]\mean-test\node_modules\optipng-bin
> node lib/install.js

  √ optipng pre-build test passed successfully

> pngquant-bin@3.1.1 postinstall D:\[Documents]\[nodejs]\mean-test\node_modules\pngquant-bin
> node lib/install.js

  √ pngquant pre-build test passed successfully

> meanjs@0.5.0 postinstall D:\[Documents]\[nodejs]\mean-test
> npm run bower


> meanjs@0.5.0 bower D:\[Documents]\[nodejs]\mean-test
> bower install --allow-root && bower prune --allow-root

bower cached        https://github.com/angular/bower-angular-messages.git#1.5.11
bower validate      1.5.11 against https://github.com/angular/bower-angular-messages.git#~1.5.0
bower cached        https://github.com/angular/bower-angular.git#1.5.11
bower validate      1.5.11 against https://github.com/angular/bower-angular.git#~1.5.0
bower cached        https://github.com/angular/bower-angular-animate.git#1.5.11
bower validate      1.5.11 against https://github.com/angular/bower-angular-animate.git#~1.5.0
bower cached        https://github.com/alexcrack/angular-ui-notification.git#0.2.0
bower validate      0.2.0 against https://github.com/alexcrack/angular-ui-notification.git#~0.2.0
bower cached        https://github.com/angular-ui/bootstrap-bower.git#1.2.5
bower validate      1.2.5 against https://github.com/angular-ui/bootstrap-bower.git#~1.2.1
bower cached        https://github.com/angular/bower-angular-mocks.git#1.5.11
bower validate      1.5.11 against https://github.com/angular/bower-angular-mocks.git#~1.5.0
bower cached        https://github.com/angular/bower-angular-resource.git#1.5.11
bower validate      1.5.11 against https://github.com/angular/bower-angular-resource.git#~1.5.0
bower cached        https://github.com/angular-ui/angular-ui-router-bower.git#0.2.18
bower validate      0.2.18 against https://github.com/angular-ui/angular-ui-router-bower.git#~0.2.18
bower cached        https://github.com/twbs/bootstrap.git#3.3.7
bower validate      3.3.7 against https://github.com/twbs/bootstrap.git#~3.3.6
bower cached        https://github.com/viaforensics/owasp-password-strength-test.git#1.3.0
bower validate      1.3.0 against https://github.com/viaforensics/owasp-password-strength-test.git#~1.3.0
bower cached        https://github.com/danialfarid/angular-file-upload-bower.git#12.1.0
bower validate      12.1.0 against https://github.com/danialfarid/angular-file-upload-bower.git#~12.1.0
bower cached        https://github.com/angular/bower-angular.git#1.6.5
bower validate      1.6.5 against https://github.com/angular/bower-angular.git#>=1.4.0
bower cached        https://github.com/jquery/jquery-dist.git#3.2.1
bower validate      3.2.1 against https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower install       angular-bootstrap#1.2.5
bower install       angular-ui-notification#0.2.0
bower install       angular-messages#1.5.11
bower install       angular-animate#1.5.11
bower install       angular#1.5.11
bower install       angular-ui-router#0.2.18
bower install       owasp-password-strength-test#1.3.0
bower install       angular-resource#1.5.11
bower install       angular-mocks#1.5.11
bower install       bootstrap#3.3.7
bower install       ng-file-upload#12.1.0
bower install       jquery#3.2.1

angular-bootstrap#1.2.5 public\lib\angular-bootstrap
└── angular#1.5.11

angular-ui-notification#0.2.0 public\lib\angular-ui-notification

angular-messages#1.5.11 public\lib\angular-messages
└── angular#1.5.11

angular-animate#1.5.11 public\lib\angular-animate
└── angular#1.5.11

angular#1.5.11 public\lib\angular

angular-ui-router#0.2.18 public\lib\angular-ui-router
└── angular#1.5.11

owasp-password-strength-test#1.3.0 public\lib\owasp-password-strength-test

angular-resource#1.5.11 public\lib\angular-resource
└── angular#1.5.11

angular-mocks#1.5.11 public\lib\angular-mocks
└── angular#1.5.11

bootstrap#3.3.7 public\lib\bootstrap
└── jquery#3.2.1

ng-file-upload#12.1.0 public\lib\ng-file-upload
└── angular#1.5.11

jquery#3.2.1 public\lib\jquery
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN eslint-config-airbnb@6.0.2 requires a peer of eslint-plugin-react@^4.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1414 packages and updated 1 package in 372.119s

> meanjs@0.5.0 start D:\[Documents]\[nodejs]\mean-test
> gulp

[20:29:15] Using gulpfile D:\[Documents]\[nodejs]\mean-test\gulpfile.js
[20:29:15] Starting 'default'...
[20:29:15] Starting 'env:dev'...
[20:29:15] Finished 'env:dev' after 536 μs
[20:29:15] Starting 'copyLocalEnvConfig'...
[20:29:15] Starting 'makeUploadsDir'...
[20:29:15] Finished 'makeUploadsDir' after 371 μs
[20:29:15] Finished 'copyLocalEnvConfig' after 69 ms
[20:29:15] Starting 'lint'...
[20:29:15] Starting 'less'...
[20:29:21] Finished 'less' after 6.26 s
[20:29:21] Starting 'sass'...
[20:29:21] Finished 'sass' after 74 ms
[20:29:21] Starting 'csslint'...
[20:29:22] Starting 'eslint'...
[20:29:26] Finished 'csslint' after 4.29 s
[20:29:26] Finished 'eslint' after 3.62 s
[20:29:26] Finished 'lint' after 11 s
[20:29:26] Starting 'nodemon'...
[20:29:26] Finished 'nodemon' after 663 ms
[20:29:26] Starting 'watch'...
[20:29:28] Finished 'watch' after 2.02 s
[20:29:28] Finished 'default' after 13 s
[20:29:28] [nodemon] 1.11.0
[20:29:28] [nodemon] to restart at any time, enter `rs`
[20:29:28] [nodemon] ignoring: D:\[Documents]\[nodejs]\mean-test\.git/**/* .nyc_output .sass-cache bower_components coverage D:\[Documents]\[nodejs]\mean-test\node_modules/**/*
[20:29:28] [nodemon] watching: modules/*/server/views/*.html server.js config/**/*.js modules/*/server/**/*.js modules/*/server/config/*.js
[20:29:28] [nodemon] watching extensions: js,html
[20:29:28] [nodemon] starting `node --inspect server.js`
[20:29:28] [nodemon] child pid: 5304
Debugger listening on ws://127.0.0.1:9229/0963af0d-4358-4a0c-997b-7a0519e4b94c
For help see https://nodejs.org/en/docs/inspector


+ Important warning: config.domain is empty. It should be set to the fully qualified domain of the app.
--
MEAN.JS - Development Environment

Environment:     development
Server:          http://0.0.0.0:3000
Database:        mongodb://localhost/mean-dev
App version:     0.5.0
MEAN.JS version: 0.5.0
--

I can see there's some NPM warning during the npm install phase.
Should I worry about that?

[simison]

Warnings look normal, I get those as well (apart from "WARN registry Unexpected warning", I don't get that):

$npm install && npm start
npm WARN deprecated bower@1.8.0: ..psst! While Bower is maintained, we recommend Yarn and Webpack for *new* front-end projects! Yarn's advantage is security and reliability, and Webpack's is support for both CommonJS and AMD projects. Currently there's no migration path, but please help to create it: https://github.com/bower/bower/issues/2467
npm WARN deprecated ignore@2.2.19: several bugs fixed in v3.2.1
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN prefer global node-gyp@3.6.2 should be installed with -g

I would next up try with Node v6 and NPM v3. I have Windows in virtual machine so I could dig more into this but would be great if you can help figuring this out. :-)

It might be just some package which doesn't work well either with Node 8 (although we do test for that in Travis as well) or Windows.

You could also try running npm run start:prod and see if that works (it minifies all the files into one js file).

[joshiwawa]

@simison , thank you for the advice.

But I'm afraid Node v6 and NPM v3 doesn't help either, it does, however avoid the "Unexpected Warning" during dependencies installation.

My Environment:

• OS: Windows 10 64x
• node: v.6.11.1
• npm: v3.10.10

[simison]

@sabousha AFAIK Mean.js doesn't depend on Java?

[simison]

@josephrace thanks for testing that out!

I'm out of ideas for debugging but update us here if you find out something and I might give this a spin on virtualbox if I have more time.

Sorry it doesn't work out of the box for you!