Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

Commit

Permalink
Clean up dev-server options (#1175)
Browse files Browse the repository at this point in the history
* (BREAKING) Stops setting `host` / `public`, since they are only needed
  in a minority of use-cases (such as running inside a Docker container
  or having a proxy in front of webpack-dev-server), and the current
  implementation for them in `@neutrinojs/dev-server` is buggy.
* (BREAKING) Stops supporting the `@neutrinojs/web` shorthand of setting
  `devServer.proxy` to a string, since it could only be used if the
  options it set were exactly what were required - which was often not
  the case given that proxy configuration is very project-specific.
* Stops setting a `host` header on *responses* to the client, since
  it makes no sense (particularly it was set to the public host).
  It's possible that this was set thinking they would be set for
  *requests* to a proxy target, but that's not the case (and for that,
  `changeOrigin: true` would be more appropriate anyway).
* Changes `output.publicPath` from `'./'` to `''` since the latter is
  equivalent (and is also the webpack default), however it correctly
  allows webpack-dev-server to fall back to `'/'` when needed:
  https://github.com/webpack/webpack-dev-server/blob/v3.1.9/lib/Server.js#L176
* Stops setting `devServer.publicPath` explicitly since it inherits from
  `output.publicPath` so should not normally need to be overridden:
  https://github.com/webpack/webpack-dev-server/blob/v3.1.9/bin/webpack-dev-server.js#L142-L152
* Stops setting `https: false`, since that's the default.

Fixes #1169.
  • Loading branch information
edmorley authored Oct 15, 2018
1 parent 6bef97a commit 64a373b
Show file tree
Hide file tree
Showing 10 changed files with 79 additions and 140 deletions.
14 changes: 13 additions & 1 deletion docs/migration-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,11 +177,20 @@ to RHL v4 while installing it into your project also.
- **BREAKING CHANGE** `@neutrinojs/web`, `@neutrinojs/node`, and their dependent presets no longer configure
defaults for copying static files at build time [#814](https://github.com/neutrinojs/neutrino/pull/814).
Use the `@neutrinojs/copy` middleware to configure this for v9.
- **BREAKING CHANGE** `@neutrinojs/dev-server` (used by `@neutrinojs/web`) no longer sets `contentBase`
- **BREAKING CHANGE** `@neutrinojs/dev-server` (used by `@neutrinojs/web`) no longer sets
[contentBase](https://webpack.js.org/configuration/dev-server/#devserver-contentbase)
by default, meaning that in development any files that are not part of the webpack build need to be
explicitly included (such as by importing from JS or using `@neutrinojs/copy`) or they will not be
accessible from the dev server [#1165](https://github.com/neutrinojs/neutrino/pull/1165).
This prevents missing files from only being discovered once in production.
- **BREAKING CHANGE** `@neutrinojs/dev-server` no longer sets
[public](https://webpack.js.org/configuration/dev-server/#devserver-public) or
[host](https://webpack.js.org/configuration/dev-server/#devserver-host), meaning that
for certain workflows (such as running webpack-dev-server behind a proxy) you may need to set
them yourself. In particular, due to a bug in the previous implementation, the dev server
used to be accessible on all network interfaces, whereas it is now correctly only available
over localhost. As such if running webpack-dev-server from within a Docker container or VM,
you will now need to set `host` to `0.0.0.0` to allow connections from the host machine.
- **BREAKING CHANGE** When using `@neutrinojs/web` and presets that depend on it,
source maps must now be configured using the preset's `devtool` option rather than
manually in a later middleware, to ensure that `terser-webpack-plugin` is configured
Expand Down Expand Up @@ -266,6 +275,9 @@ for setting these properties as strings is still supported. This also introduces
entry point property on `neutrino.options.mains` now returns a normalized object, even when using string options.
- **BREAKING CHANGE** When configuring webpack with a target of `node` the `@neutrinojs/jest` preset will default its
`testEnvironment` to also be `node` instead of `jsdom` [#1030](https://github.com/neutrinojs/neutrino/pull/1030).
- **BREAKING CHANGE** `@neutrinojs/web` no longer supports the shorthand of `devServer.proxy`
being set to a string [#1175](https://github.com/neutrinojs/neutrino/pull/1175). Instead pass an
object using the [options here](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
- **BREAKING CHANGE** `@neutrinojs/web` and its dependent middleware no longer have the `options.hotEntries` option
[#902](https://github.com/neutrinojs/neutrino/pull/902).
- **BREAKING CHANGE** `@neutrinojs/web` and its dependent middleware no longer include `worker-loader` for automatically
Expand Down
44 changes: 9 additions & 35 deletions packages/dev-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Yarn v1.2.1+, or npm v5.4+
- Neutrino 9
- webpack 4
- webpack-dev-server 3

## Installation

Expand Down Expand Up @@ -42,27 +43,15 @@ neutrino.use(devServer);

// Usage with custom options (default options are shown)
neutrino.use(devServer, {
https: false,
port: 5000,
host: 'localhost',
public: 'localhost:5000',
hot: true,
// Redirect 404s to index.html, so that apps that use the HTML 5 History API work.
historyApiFallback: true,
publicPath: '/',
headers: {
host: 'localhost:5000'
},
// Only display compile duration and errors/warnings, to reduce noise when rebuilding.
stats: {
assets: false,
children: false,
chunks: false,
colors: true,
all: false,
errors: true,
hash: false,
modules: false,
publicPath: false,
timings: false,
version: false,
timings: true,
warnings: true
}
});
Expand All @@ -80,27 +69,15 @@ module.exports = {
module.exports = {
use: [
['@neutrinojs/dev-server', {
https: false,
port: 5000,
host: 'localhost',
public: 'localhost:5000',
hot: true,
// Redirect 404s to index.html, so that apps that use the HTML 5 History API work.
historyApiFallback: true,
publicPath: '/',
headers: {
host: 'localhost'
},
// Only display compile duration and errors/warnings, to reduce noise when rebuilding.
stats: {
assets: false,
children: false,
chunks: false,
colors: true,
all: false,
errors: true,
hash: false,
modules: false,
publicPath: false,
timings: false,
version: false,
timings: true,
warnings: true
}
}]
Expand All @@ -112,9 +89,6 @@ By default this middleware will start a development server with Hot Module Repla
`http://localhost:5000`. To enable HMR with your application, read the documentation of corresponding Neutrino
preset or middleware.

It is recommended to call this middleware only in development mode when `process.env.NODE_ENV === 'development'`.
More information about usage of Neutrino middleware can be found in the [documentation](https://neutrinojs.org/middleware/).

## Middleware options

`@neutrinojs/dev-server` optionally accepts an object with several options to override the default behavior.
Expand Down
60 changes: 14 additions & 46 deletions packages/dev-server/index.js
Original file line number Diff line number Diff line change
@@ -1,48 +1,16 @@
const merge = require('deepmerge');

const isLocal = host => host === 'localhost' || host === '127.0.0.1';
const getHost = publicHost => (isLocal(publicHost) ? 'localhost' : '0.0.0.0');
const getPort = opts => opts.port || 5000;
const getPublic = options => {
const port = getPort(options);

if (options.public) {
const normalizedPath = options.public.split(':');

return normalizedPath.length === 2
? options.public
: `${normalizedPath[0]}:${port}`;
}

return !options.host || isLocal(options.host)
? `localhost:${port}`
: `${options.host}:${port}`;
};

module.exports = (neutrino, opts = {}) => {
const port = getPort(opts);
const publicHost = getPublic(opts);
const host = getHost(publicHost);

neutrino.config.devServer.merge(merge.all([
{
port,
https: false,
hot: true,
historyApiFallback: true,
publicPath: '/',
headers: {
host: publicHost
},
// Only display compile duration and errors/warnings, to reduce noise when rebuilding.
stats: {
all: false,
errors: true,
timings: true,
warnings: true
}
module.exports = (neutrino, options = {}) => {
neutrino.config.devServer.merge({
port: 5000,
hot: true,
// Redirect 404s to index.html, so that apps that use the HTML 5 History API work.
historyApiFallback: true,
// Only display compile duration and errors/warnings, to reduce noise when rebuilding.
stats: {
all: false,
errors: true,
timings: true,
warnings: true
},
opts,
{ host, public: publicHost }
]));
...options
});
};
6 changes: 2 additions & 4 deletions packages/dev-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,9 @@
"npm": ">=5.4.0",
"yarn": ">=1.2.1"
},
"dependencies": {
"deepmerge": "^1.5.2"
},
"peerDependencies": {
"neutrino": "^9.0.0-0",
"webpack": "^4.0.0"
"webpack": "^4.0.0",
"webpack-dev-server": "^3.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/preact/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ use the [@neutrinojs/copy](https://neutrinojs.org/packages/copy/) preset alongsi
## Paths

The `@neutrinojs/preact` preset loads assets relative to the path of your application by setting webpack's
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `./`. If you wish to load
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `''`. If you wish to load
assets instead from a CDN, or if you wish to change to an absolute path for your application, customize your build to
override `output.publicPath`. See the [Customizing](#customizing) section below.

Expand Down
2 changes: 1 addition & 1 deletion packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ use the [@neutrinojs/copy](https://neutrinojs.org/packages/copy/) preset alongsi
## Paths

The `@neutrinojs/web` preset loads assets relative to the path of your application by setting webpack's
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `./`. If you wish to load
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `''`. If you wish to load
assets instead from a CDN, or if you wish to change to an absolute path for your application, customize your build to
override `output.publicPath`. See the [Customizing](#customizing) section below.

Expand Down
2 changes: 1 addition & 1 deletion packages/vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ use the [@neutrinojs/copy](https://neutrinojs.org/packages/copy/) preset alongsi
## Paths

The `@neutrinojs/web` preset loads assets relative to the path of your application by setting webpack's
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `./`. If you wish to load
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `''`. If you wish to load
assets instead from a CDN, or if you wish to change to an absolute path for your application, customize your build to
override `output.publicPath`. See the [Customizing](#customizing) section below.

Expand Down
31 changes: 7 additions & 24 deletions packages/web/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ use the [@neutrinojs/copy](https://neutrinojs.org/packages/copy/) preset alongsi
## Paths

The `@neutrinojs/web` preset loads assets relative to the path of your application by setting webpack's
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `./`. If you wish to load
[`output.publicPath`](https://webpack.js.org/configuration/output/#output-publicpath) to `''`. If you wish to load
assets instead from a CDN, or if you wish to change to an absolute path for your application, customize your build to
override `output.publicPath`. See the [Customizing](#customizing) section below.

Expand All @@ -180,10 +180,9 @@ module.exports = {
// Enables Hot Module Replacement. Set to false to disable
hot: true,

// Sets webpack's `output.publicPath` and
// `devServer.publicPath` settings. Useful if you want to
// serve assets from a non-root location (e.g. `/assets/`)
publicPath: './',
// Sets webpack's `output.publicPath` setting, which is useful if you
// want to serve assets from a non-root location (e.g. `/assets/`).
publicPath: '',

// Change options for @neutrinojs/style-loader
style: {
Expand Down Expand Up @@ -325,41 +324,25 @@ Or to set default values, use the object form:

### Dev Server Proxy

If you are handling requests with a server, you may want to set up a proxy for development. See webpack's [`devServer.proxy`](https://webpack.js.org/configuration/dev-server/#devserver-proxy) for all available options.

Optionally, you may pass a url string (instead of an object) to `devServer.proxy`.
This will proxy **all requests** through the given url, and set some sensible defaults.
If you are handling requests with a server, you may want to set up a proxy for development.
See webpack's [`devServer.proxy`](https://webpack.js.org/configuration/dev-server/#devserver-proxy)
for all available options.

For example:

```js
['@neutrinojs/web', {
devServer: {
proxy: 'http://localhost:3000'
}
}]
```

Is equivalent to:

```js
['@neutrinojs/web', {
devServer: {
proxy: {
'**': {
target: 'http://localhost:3000',
changeOrigin: true,
headers: {
'X-Dev-Server-Proxy': 'http://localhost:3000'
}
}
}
}
}]
```

The `X-Dev-Server-Proxy` header can be useful for detecting if your existing app is being requested through the proxy.

### Source Maps

By default, the `'cheap-module-eval-source-map'` source map is enabled when `NODE_ENV` is `'development'`, `'source-map'` for `'test'` and no source maps for `'production'`.
Expand Down
27 changes: 10 additions & 17 deletions packages/web/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const htmlTemplate = require('@neutrinojs/html-template');
const clean = require('@neutrinojs/clean');
const loaderMerge = require('@neutrinojs/loader-merge');
const devServer = require('@neutrinojs/dev-server');
const { resolve } = require('url');
const merge = require('deepmerge');
const { ConfigurationError } = require('neutrino/errors');

Expand All @@ -22,9 +21,8 @@ module.exports = (neutrino, opts = {}) => {
}

const isProduction = process.env.NODE_ENV === 'production';
const publicPath = opts.publicPath || './';
const options = merge({
publicPath,
publicPath: '',
env: false,
hot: true,
html: {},
Expand All @@ -34,8 +32,7 @@ module.exports = (neutrino, opts = {}) => {
test: 'source-map'
},
devServer: {
hot: opts.hot !== false,
publicPath: resolve('/', publicPath)
hot: opts.hot !== false
},
style: {
hot: opts.hot !== false,
Expand Down Expand Up @@ -85,6 +82,14 @@ module.exports = (neutrino, opts = {}) => {
);
}

if (typeof options.devServer.proxy === 'string') {
throw new ConfigurationError(
'The shorthand of setting `devServer.proxy` to a string is no longer supported. ' +
'Use an object and the options listed here instead: ' +
'https://webpack.js.org/configuration/dev-server/#devserver-proxy'
);
}

if (typeof options.devtool === 'string' || typeof options.devtool === 'boolean') {
options.devtool = {
development: options.devtool,
Expand All @@ -93,18 +98,6 @@ module.exports = (neutrino, opts = {}) => {
};
}

if (typeof options.devServer.proxy === 'string') {
options.devServer.proxy = {
'**': {
target: options.devServer.proxy,
changeOrigin: true,
headers: {
Forwarded: 'by=_webpack-dev-server'
}
}
};
}

// Force @babel/preset-env default behavior (.browserslistrc)
if (options.targets === false) {
options.targets = {};
Expand Down
Loading

0 comments on commit 64a373b

Please sign in to comment.