Webpack dev server problems 5.0.0-rc.1

[albert-92]

• I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	5.0.0-rc.1
Node	8.10.0
npm	5.7.1
Operating System	Windows 10

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	Sass
Client Tests	Mocha
DB	MongoDB
Auth	Y

There are two problems with webpack dev server.

1. generator-angular-fullstack/templates/app/webpack.server.js line 51 needs to be
   server.listen(appConfig.clientPort, 'localhost', resolve);
   or the resolve callback does not get called (see https://github.com/webpack/docs/wiki/webpack-dev-server#api).

2. fix(seed): CRSF and token issues #2613 is now causing problems with webpack dev server. http://localhost:3000/ only returns an error Cannot GET / due to the fact that webpack dev server expects an index.html (see https://github.com/webpack/docs/wiki/webpack-dev-server#content-base).

[Awk34]

For # 2, you should be viewing the dev server at http://localhost:8080/. Webpack tells you this when you run the dev server.

[albert-92]

When running gulp serve it does not say anything about http://localhost:8080/ and there is nothing listening on port 8080.

I could fix that problem by changing historyApiFallback: true in generator-angular-fullstack/templates/app/webpack.server.js` to

historyApiFallback: {
        index: 'app.html'
    },

http://localhost:3000/ works just fine then.

[albert-92]

If you mean the line publicPath: BUILD || DEV ? '/' : 'http://localhost:${8080}/' in webpack.make.js, since webpack.server.js calls const config = require('./webpack.make')({DEV: true}); DEV is true and therefore publicPath is '/'.

On the other hand, at the bottom of webpack.make.js config.devServer is defined, however for some reason it doesn't seem to get recognized correctly by WebpackDevServer(compiler, {...}) in webpack.server.js. Even if you remove the options in WebpackDevServer(compiler, {...}) in case they overwrite the passed config it doesn't seem to have any effect on the webpack dev server.

[Awk34]

Ah, I see the disconnect. In 5.0.0 gulp serve is deprecated. We instead use two separate npm commands. See the doc page here: https://angular-fullstack.github.io/get-started/running/#running-your-new-app. We can probably do better to highlight this change for the new version.

[albert-92]

Oh sorry that was my bad then. I'm still used to gulp serve 😅

[albert-92]

npm run start:server and npm run start:client seem to work both as supposed to.

I guess i can close this issue then.

[Awk34]

Does your concern # 1 still apply?

[albert-92]

Im not sure.

In gulpfile.babal.js

gulp.task('start:client', cb => {
    return require('./webpack.server').start(config.clientPort).then(() => {
        open(`http://localhost:${config.clientPort}`);
        cb();
    });
});

relies on the promise to be resolved.

If 'start:client' is used by another task than gulp serve, then # 1 applies, otherwise it can be ignored i guess.

[Awk34]

It seems like it's an invalid use of the listen function anyway, so it should be fixed regardless.

[Awk34]

To reiterate,

generator-angular-fullstack/templates/app/webpack.server.js

Line 51 in ccea1f3

server.listen(appConfig.clientPort, resolve);

should be changed to the following:

server.listen(appConfig.clientPort, 'localhost', resolve);

[albert-92]

Correctly!

[Awk34]

Did you want to fix this?

[albert-92]

Yes, i just need to figure out how to do a pull request first, since i've never done a pull request before.

[Awk34]

Awesome, let me know if you need any help :)

[albert-92]

Okay thanks ;)

[albert-92]

Ok i finally created a pull request!
Had some trouble getting my local branch up-to-date.

[Awk34]

Thanks!