3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 18:27:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): better & nice looking error overlay (#2096)

Browse source 
* wip: better error overlay and use websocket instead of sockjs

* refactor
This commit is contained in:
Endi 2019-12-06 16:33:13 +07:00 • committed by Yangshun Tay
parent c45a2c649f
commit e62a93863f
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/docusaurus/src/commands/start.ts
View file

@ -15,6 +15,8 @@ import path from 'path';
import portfinder from 'portfinder';
import openBrowser from 'react-dev-utils/openBrowser';
import {prepareUrls} from 'react-dev-utils/WebpackDevServerUtils';
import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';
import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import merge from 'webpack-merge';
@ -135,15 +137,20 @@ export async function start(
rewrites: [{from: /\/*/, to: baseUrl}],
},
disableHostCheck: true,
// Enable overlay on browser. E.g: display errors
overlay: true,
// Disable overlay on browser since we use CRA's overlay error reporting
overlay: false,
host,
before: app => {
before: (app, server) => {
app.use(baseUrl, express.static(path.resolve(siteDir, STATIC_DIR_NAME)));
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// TODO: add plugins beforeDevServer and afterDevServer hook
},
};
WebpackDevServer.addDevServerEntrypoints(config, devServerConfig);
const compiler = webpack(config);
const devServer = new WebpackDevServer(compiler, devServerConfig);
devServer.listen(port, host, err => {

9
packages/docusaurus/src/webpack/client.ts
View file

@ -18,9 +18,12 @@ export function createClientConfig(props: Props): Configuration {
const config = createBaseConfig(props, false);
const clientConfig = merge(config, {
entry: {
main: path.resolve(__dirname, '../client/clientEntry.js'),
},
entry: [
// Instead of the default WebpackDevServer client, we use a custom one
// like CRA to bring better experience.
!isProd && require.resolve('react-dev-utils/webpackHotDevClient'),
path.resolve(__dirname, '../client/clientEntry.js'),
].filter(Boolean) as string[],
optimization: {
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985