@@ -16,11 +16,11 @@ const path = require('path');
1616const chalk = require ( 'chalk' ) ;
1717const minimist = require ( 'minimist' ) ;
1818const clearConsole = require ( 'react-dev-utils/clearConsole' ) ;
19- const errorOverlayMiddleware = require ( 'react-dev-utils/errorOverlayMiddleware' ) ;
2019const evalSourceMapMiddleware = require ( 'react-dev-utils/evalSourceMapMiddleware' ) ;
2120const getPublicUrlOrPath = require ( 'react-dev-utils/getPublicUrlOrPath' ) ;
2221const openBrowser = require ( 'react-dev-utils/openBrowser' ) ;
2322const redirectServedPathMiddleware = require ( 'react-dev-utils/redirectServedPathMiddleware' ) ;
23+ const ignoredFiles = require ( 'react-dev-utils/ignoredFiles' ) ;
2424const { choosePort, createCompiler, prepareProxy, prepareUrls} = require ( 'react-dev-utils/WebpackDevServerUtils' ) ;
2525const ReactRefreshWebpackPlugin = require ( '@pmmmwh/react-refresh-webpack-plugin' ) ;
2626const webpack = require ( 'webpack' ) ;
@@ -35,6 +35,7 @@ process.on('unhandledRejection', err => {
3535// As react-dev-utils assumes the webpack production packaging command is
3636// "npm run build" with no way to modify it yet, we provide a basic override
3737// to console.log to ensure the correct output is displayed to the user.
38+ // prettier-ignore
3839console . log = ( log => ( data , ...rest ) =>
3940 typeof data === 'undefined'
4041 ? log ( )
@@ -62,8 +63,6 @@ function displayHelp() {
6263}
6364
6465function hotDevServer ( config , fastRefresh ) {
65- // This is necessary to emit hot updates
66- config . plugins . unshift ( new webpack . HotModuleReplacementPlugin ( ) ) ;
6766 // Keep webpack alive when there are any errors, so user can fix and rebuild.
6867 config . bail = false ;
6968 // Ensure the CLI version of Chalk is used for webpackHotDevClient
@@ -85,9 +84,7 @@ function hotDevServer(config, fastRefresh) {
8584 // https://github.com/facebook/react/tree/master/packages/react-refresh
8685 config . plugins . unshift (
8786 new ReactRefreshWebpackPlugin ( {
88- overlay : {
89- entry : require . resolve ( 'react-dev-utils/webpackHotDevClient' )
90- }
87+ overlay : false
9188 } )
9289 ) ;
9390 // Append fast refresh babel plugin
@@ -105,6 +102,7 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
105102 key : fs . readFileSync ( SSL_KEY_FILE )
106103 } ;
107104 }
105+ const disableFirewall = ! proxy || process . env . DANGEROUSLY_DISABLE_HOST_CHECK === 'true' ;
108106
109107 return {
110108 // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
@@ -123,38 +121,64 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
123121 // So we will disable the host check normally, but enable it if you have
124122 // specified the `proxy` setting. Finally, we let you override it if you
125123 // really know what you're doing with a special environment variable.
126- disableHostCheck : ! proxy || process . env . DANGEROUSLY_DISABLE_HOST_CHECK === 'true' ,
127- // Silence WebpackDevServer's own logs since they're generally not useful.
128- // It will still show compile warnings and errors with this setting.
129- clientLogLevel : 'none' ,
130- // Enable hot reloading server. It will provide /sockjs-node/ endpoint
131- // for the WebpackDevServer client so it can learn when the files were
132- // updated. The WebpackDevServer client is included as an entry point
133- // in the Webpack development configuration. Note that only changes
134- // to CSS are currently hot reloaded. JS changes will refresh the browser.
135- hot : true ,
136- // Use 'ws' instead of 'sockjs-node' on server since we're using native
137- // websockets in `webpackHotDevClient`.
138- transportMode : 'ws' ,
139- // Prevent a WS client from getting injected as we're already including
140- // `webpackHotDevClient`.
141- injectClient : false ,
142- // Enable custom sockjs pathname for websocket connection to hot reloading server.
143- // Enable custom sockjs hostname, pathname and port for websocket connection
144- // to hot reloading server.
145- sockHost : process . env . WDS_SOCKET_HOST ,
146- sockPath : process . env . WDS_SOCKET_PATH ,
147- sockPort : process . env . WDS_SOCKET_PORT ,
148- // WebpackDevServer is noisy by default so we emit custom message instead
149- // by listening to the compiler events with `compiler.plugin` calls above.
150- quiet : true ,
124+ // Note: ["localhost", ".localhost"] will support subdomains - but we might
125+ // want to allow setting the allowedHosts manually for more complex setups
126+ allowedHosts : disableFirewall ? 'all' : [ allowedHost ] ,
151127 // Enable HTTPS if the HTTPS environment variable is set to 'true'
152128 https,
153129 host,
154- overlay : false ,
155130 // Allow cross-origin HTTP requests
156131 headers : {
157- 'Access-Control-Allow-Origin' : '*'
132+ 'Access-Control-Allow-Origin' : '*' ,
133+ 'Access-Control-Allow-Methods' : '*' ,
134+ 'Access-Control-Allow-Headers' : '*'
135+ } ,
136+ static : {
137+ // By default WebpackDevServer serves physical files from current directory
138+ // in addition to all the virtual build products that it serves from memory.
139+ // This is confusing because those files won’t automatically be available in
140+ // production build folder unless we copy them. However, copying the whole
141+ // project directory is dangerous because we may expose sensitive files.
142+ // Instead, we establish a convention that only files in `public` directory
143+ // get served. Our build script will copy `public` into the `build` folder.
144+ // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
145+ // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
146+ // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
147+ // Note that we only recommend to use `public` folder as an escape hatch
148+ // for files like `favicon.ico`, `manifest.json`, and libraries that are
149+ // for some reason broken when imported through webpack. If you just want to
150+ // use an image, put it in `src` and `import` it from JavaScript instead.
151+ directory : path . resolve ( app . context , 'public' ) ,
152+ publicPath : publicPath ,
153+ // By default files from `contentBase` will not trigger a page reload.
154+ watch : {
155+ // Reportedly, this avoids CPU overload on some systems.
156+ // https://github.com/facebook/create-react-app/issues/293
157+ // src/node_modules is not ignored to support absolute imports
158+ // https://github.com/facebook/create-react-app/issues/1065
159+ ignored : ignoredFiles ( path . resolve ( app . context , 'src' ) )
160+ }
161+ } ,
162+ client : {
163+ webSocketURL : {
164+ // Enable custom sockjs pathname for websocket connection to hot reloading server.
165+ // Enable custom sockjs hostname, pathname and port for websocket connection
166+ // to hot reloading server.
167+ hostname : process . env . WDS_SOCKET_HOST ,
168+ pathname : process . env . WDS_SOCKET_PATH ,
169+ port : process . env . WDS_SOCKET_PORT
170+ } ,
171+ overlay : {
172+ errors : true ,
173+ warnings : false
174+ }
175+ } ,
176+ devMiddleware : {
177+ // It is important to tell WebpackDevServer to use the same "publicPath" path as
178+ // we specified in the webpack config. When homepage is '.', default to serving
179+ // from the root.
180+ // remove last slash so user can land on `/test` instead of `/test/`
181+ publicPath : publicPath . slice ( 0 , - 1 )
158182 } ,
159183 historyApiFallback : {
160184 // ensure JSON file requests correctly 404 error when not found.
@@ -164,27 +188,24 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
164188 disableDotRule : true ,
165189 index : publicPath
166190 } ,
167- public : allowedHost ,
168191 // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
169192 proxy,
170- before ( build , server ) {
171- // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
193+ onBeforeSetupMiddleware ( devServer ) {
194+ // Keep `evalSourceMapMiddleware`
172195 // middlewares before `redirectServedPath` otherwise will not have any effect
173196 // This lets us fetch source contents from webpack for the error overlay
174- build . use ( evalSourceMapMiddleware ( server ) ) ;
175- // This lets us open files from the runtime error overlay.
176- build . use ( errorOverlayMiddleware ( ) ) ;
197+ devServer . app . use ( evalSourceMapMiddleware ( devServer ) ) ;
177198
178199 // Optionally register app-side proxy middleware if it exists
179200 const proxySetup = path . join ( process . cwd ( ) , 'src' , 'setupProxy.js' ) ;
180201 if ( fs . existsSync ( proxySetup ) ) {
181- require ( proxySetup ) ( build ) ;
202+ require ( proxySetup ) ( devServer . app ) ;
182203 }
183204 } ,
184- after ( build ) {
205+ onAfterSetupMiddleware ( devServer ) {
185206 // Redirect to `PUBLIC_URL` or `homepage`/`enact.publicUrl` from `package.json`
186207 // if url not match
187- build . use ( redirectServedPathMiddleware ( publicPath ) ) ;
208+ devServer . app . use ( redirectServedPathMiddleware ( publicPath ) ) ;
188209 }
189210 } ;
190211}
@@ -200,21 +221,14 @@ function serve(config, host, port, open) {
200221 const protocol = process . env . HTTPS === 'true' ? 'https' : 'http' ;
201222 const publicPath = getPublicUrlOrPath ( true , app . publicUrl , process . env . PUBLIC_URL ) ;
202223 const urls = prepareUrls ( protocol , host , resolvedPort , publicPath . slice ( 0 , - 1 ) ) ;
203- const devSocket = {
204- // eslint-disable-next-line no-use-before-define
205- warnings : warnings => devServer . sockWrite ( devServer . sockets , 'warnings' , warnings ) ,
206- // eslint-disable-next-line no-use-before-define
207- errors : errors => devServer . sockWrite ( devServer . sockets , 'errors' , errors )
208- } ;
224+
209225 // Create a webpack compiler that is configured with custom messages.
210226 const compiler = createCompiler ( {
211227 appName : app . name ,
212228 config,
213- devSocket,
214229 urls,
215230 useYarn : false ,
216231 useTypeScript : fs . existsSync ( 'tsconfig.json' ) ,
217- tscCompileOnError : process . env . TSC_COMPILE_ON_ERROR === 'true' ,
218232 webpack
219233 } ) ;
220234 // Hook into compiler to remove potentially confusing messages
@@ -238,9 +252,9 @@ function serve(config, host, port, open) {
238252 config . devServer ,
239253 devServerConfig ( host , protocol , publicPath , proxyConfig , urls . lanUrlForConfig )
240254 ) ;
241- const devServer = new WebpackDevServer ( compiler , serverConfig ) ;
255+ const devServer = new WebpackDevServer ( serverConfig , compiler ) ;
242256 // Launch WebpackDevServer.
243- devServer . listen ( resolvedPort , host , err => {
257+ devServer . startCallback ( err => {
244258 if ( err ) return console . log ( err ) ;
245259 if ( process . stdout . isTTY ) clearConsole ( ) ;
246260 console . log ( chalk . cyan ( 'Starting the development server...\n' ) ) ;
0 commit comments