3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-30 10:48:05 +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 portfinder from 'portfinder';
import openBrowser from 'react-dev-utils/openBrowser'; import openBrowser from 'react-dev-utils/openBrowser';
import {prepareUrls} from 'react-dev-utils/WebpackDevServerUtils'; 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 webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server'; import WebpackDevServer from 'webpack-dev-server';
import merge from 'webpack-merge'; import merge from 'webpack-merge';
@ -135,15 +137,20 @@ export async function start(
rewrites: [{from: /\/*/, to: baseUrl}], rewrites: [{from: /\/*/, to: baseUrl}],
}, },
disableHostCheck: true, disableHostCheck: true,
// Enable overlay on browser. E.g: display errors // Disable overlay on browser since we use CRA's overlay error reporting
overlay: true, overlay: false,
host, host,
before: app => { before: (app, server) => {
app.use(baseUrl, express.static(path.resolve(siteDir, STATIC_DIR_NAME))); 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 // TODO: add plugins beforeDevServer and afterDevServer hook
}, },
}; };
WebpackDevServer.addDevServerEntrypoints(config, devServerConfig);
const compiler = webpack(config); const compiler = webpack(config);
const devServer = new WebpackDevServer(compiler, devServerConfig); const devServer = new WebpackDevServer(compiler, devServerConfig);
devServer.listen(port, host, err => { 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 config = createBaseConfig(props, false);
const clientConfig = merge(config, { const clientConfig = merge(config, {
entry: { entry: [
main: path.resolve(__dirname, '../client/clientEntry.js'), // 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: { optimization: {
// Keep the runtime chunk separated to enable long term caching // Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985 // https://twitter.com/wSokra/status/969679223278505985