/** * Copyright (c) 2015-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; const address = require('address'); const fs = require('fs'); const path = require('path'); const url = require('url'); const chalk = require('chalk'); const detect = require('detect-port-alt'); const isRoot = require('is-root'); const inquirer = require('inquirer'); const clearConsole = require('./clearConsole'); const formatWebpackMessages = require('./formatWebpackMessages'); const getProcessForPort = require('./getProcessForPort'); const isInteractive = process.stdout.isTTY; let handleCompile; // You can safely remove this after ejecting. // We only use this block for testing of Create React App itself: const isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1); if (isSmokeTest) { handleCompile = (err, stats) => { if (err || stats.hasErrors() || stats.hasWarnings()) { process.exit(1); } else { process.exit(0); } }; } function prepareUrls(protocol, host, port) { const formatUrl = hostname => url.format({ protocol, hostname, port, pathname: '/', }); const prettyPrintUrl = hostname => url.format({ protocol, hostname, port: chalk.bold(port), pathname: '/', }); const isUnspecifiedHost = host === '0.0.0.0' || host === '::'; let prettyHost, lanUrlForConfig, lanUrlForTerminal; if (isUnspecifiedHost) { prettyHost = 'localhost'; try { // This can only return an IPv4 address lanUrlForConfig = address.ip(); if (lanUrlForConfig) { // Check if the address is a private ip // https://en.wikipedia.org/wiki/Private_network#Private_IPv4_address_spaces if ( /^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/.test( lanUrlForConfig ) ) { // Address is private, format it for later use lanUrlForTerminal = prettyPrintUrl(lanUrlForConfig); } else { // Address is not private, so we will discard it lanUrlForConfig = undefined; } } } catch (_e) { // ignored } } else { prettyHost = host; } const localUrlForTerminal = prettyPrintUrl(prettyHost); const localUrlForBrowser = formatUrl(prettyHost); return { lanUrlForConfig, lanUrlForTerminal, localUrlForTerminal, localUrlForBrowser, }; } function printInstructions(appName, urls, useYarn) { console.log(); console.log(`You can now view ${chalk.bold(appName)} in the browser.`); console.log(); if (urls.lanUrlForTerminal) { console.log( ` ${chalk.bold('Local:')} ${urls.localUrlForTerminal}` ); console.log( ` ${chalk.bold('On Your Network:')} ${urls.lanUrlForTerminal}` ); } else { console.log(` ${urls.localUrlForTerminal}`); } console.log(); console.log('Note that the development build is not optimized.'); console.log( `To create a production build, use ` + `${chalk.cyan(`${useYarn ? 'yarn' : 'npm run'} build`)}.` ); console.log(); } function createCompiler(webpack, config, appName, urls, useYarn) { // "Compiler" is a low-level interface to Webpack. // It lets us listen to some events and provide our own custom messages. let compiler; try { compiler = webpack(config, handleCompile); } catch (err) { console.log(chalk.red('Failed to compile.')); console.log(); console.log(err.message || err); console.log(); process.exit(1); } // "invalid" event fires when you have changed a file, and Webpack is // recompiling a bundle. WebpackDevServer takes care to pause serving the // bundle, so if you refresh, it'll wait instead of serving the old one. // "invalid" is short for "bundle invalidated", it doesn't imply any errors. compiler.plugin('invalid', () => { if (isInteractive) { clearConsole(); } console.log('Compiling...'); }); let isFirstCompile = true; // "done" event fires when Webpack has finished recompiling the bundle. // Whether or not you have warnings or errors, you will get this event. compiler.plugin('done', stats => { if (isInteractive) { clearConsole(); } // We have switched off the default Webpack output in WebpackDevServer // options so we are going to "massage" the warnings and errors and present // them in a readable focused way. const messages = formatWebpackMessages(stats.toJson({}, true)); const isSuccessful = !messages.errors.length && !messages.warnings.length; if (isSuccessful) { console.log(chalk.green('Compiled successfully!')); } if (isSuccessful && (isInteractive || isFirstCompile)) { printInstructions(appName, urls, useYarn); } isFirstCompile = false; // If errors exist, only show errors. if (messages.errors.length) { // Only keep the first error. Others are often indicative // of the same problem, but confuse the reader with noise. if (messages.errors.length > 1) { messages.errors.length = 1; } console.log(chalk.red('Failed to compile.\n')); console.log(messages.errors.join('\n\n')); console.log('Finished compiling'); return; } // Show warnings if no errors were found. if (messages.warnings.length) { console.log(chalk.yellow('Compiled with warnings.\n')); console.log(messages.warnings.join('\n\n')); // Teach some ESLint tricks. console.log( '\nSearch for the ' + chalk.underline(chalk.yellow('keywords')) + ' to learn more about each warning.' ); console.log( 'To ignore, add ' + chalk.cyan('// eslint-disable-next-line') + ' to the line before.\n' ); } console.log('Finished compiling'); }); return compiler; } function resolveLoopback(proxy) { const o = url.parse(proxy); o.host = undefined; if (o.hostname !== 'localhost') { return proxy; } // Unfortunately, many languages (unlike node) do not yet support IPv6. // This means even though localhost resolves to ::1, the application // must fall back to IPv4 (on 127.0.0.1). // We can re-enable this in a few years. /*try { o.hostname = address.ipv6() ? '::1' : '127.0.0.1'; } catch (_ignored) { o.hostname = '127.0.0.1'; }*/ try { // Check if we're on a network; if we are, chances are we can resolve // localhost. Otherwise, we can just be safe and assume localhost is // IPv4 for maximum compatibility. if (!address.ip()) { o.hostname = '127.0.0.1'; } } catch (_ignored) { o.hostname = '127.0.0.1'; } return url.format(o); } // We need to provide a custom onError function for httpProxyMiddleware. // It allows us to log custom error messages on the console. function onProxyError(proxy) { return (err, req, res) => { const host = req.headers && req.headers.host; console.log( chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) + ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.' ); console.log( 'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' + chalk.cyan(err.code) + ').' ); console.log(); // And immediately send the proper error response to the client. // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side. if (res.writeHead && !res.headersSent) { res.writeHead(500); } res.end( 'Proxy error: Could not proxy request ' + req.url + ' from ' + host + ' to ' + proxy + ' (' + err.code + ').' ); }; } function prepareProxy(proxy, appPublicFolder) { // `proxy` lets you specify alternate servers for specific requests. // It can either be a string or an object conforming to the Webpack dev server proxy configuration // https://webpack.github.io/docs/webpack-dev-server.html if (!proxy) { return undefined; } if (typeof proxy !== 'object' && typeof proxy !== 'string') { console.log( chalk.red( 'When specified, "proxy" in package.json must be a string or an object.' ) ); console.log( chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".') ); console.log( chalk.red( 'Either remove "proxy" from package.json, or make it an object.' ) ); process.exit(1); } // Otherwise, if proxy is specified, we will let it handle any request except for files in the public folder. function mayProxy(pathname) { const maybePublicPath = path.resolve(appPublicFolder, pathname.slice(1)); return !fs.existsSync(maybePublicPath); } // Support proxy as a string for those who are using the simple proxy option if (typeof proxy === 'string') { if (!/^http(s)?:\/\//.test(proxy)) { console.log( chalk.red( 'When "proxy" is specified in package.json it must start with either http:// or https://' ) ); process.exit(1); } let target; if (process.platform === 'win32') { target = resolveLoopback(proxy); } else { target = proxy; } return [ { target, logLevel: 'silent', // For single page apps, we generally want to fallback to /index.html. // However we also want to respect `proxy` for API calls. // So if `proxy` is specified as a string, we need to decide which fallback to use. // We use a heuristic: We want to proxy all the requests that are not meant // for static assets and as all the requests for static assets will be using // `GET` method, we can proxy all non-`GET` requests. // For `GET` requests, if request `accept`s text/html, we pick /index.html. // Modern browsers include text/html into `accept` header when navigating. // However API calls like `fetch()` won’t generally accept text/html. // If this heuristic doesn’t work well for you, use a custom `proxy` object. context: function(pathname, req) { return ( req.method !== 'GET' || (mayProxy(pathname) && req.headers.accept && req.headers.accept.indexOf('text/html') === -1) ); }, onProxyReq: proxyReq => { // Browers may send Origin headers even with same-origin // requests. To prevent CORS issues, we have to change // the Origin to match the target URL. if (proxyReq.getHeader('origin')) { proxyReq.setHeader('origin', target); } }, onError: onProxyError(target), secure: false, changeOrigin: true, ws: true, xfwd: true, }, ]; } // Otherwise, proxy is an object so create an array of proxies to pass to webpackDevServer return Object.keys(proxy).map(function(context) { if (!proxy[context].hasOwnProperty('target')) { console.log( chalk.red( 'When `proxy` in package.json is as an object, each `context` object must have a ' + '`target` property specified as a url string' ) ); process.exit(1); } let target; if (process.platform === 'win32') { target = resolveLoopback(proxy[context].target); } else { target = proxy[context].target; } return Object.assign({}, proxy[context], { context: function(pathname) { return mayProxy(pathname) && pathname.match(context); }, onProxyReq: proxyReq => { // Browers may send Origin headers even with same-origin // requests. To prevent CORS issues, we have to change // the Origin to match the target URL. if (proxyReq.getHeader('origin')) { proxyReq.setHeader('origin', target); } }, target, onError: onProxyError(target), }); }); } function choosePort(host, defaultPort) { return detect(defaultPort, host).then( port => new Promise(resolve => { if (port === defaultPort) { return resolve(port); } const message = process.platform !== 'win32' && defaultPort < 1024 && !isRoot() ? `Admin permissions are required to run a server on a port below 1024.` : `Something is already running on port ${defaultPort}.`; if (isInteractive) { clearConsole(); const existingProcess = getProcessForPort(defaultPort); const question = { type: 'confirm', name: 'shouldChangePort', message: chalk.yellow( message + `${existingProcess ? ` Probably:\n ${existingProcess}` : ''}` ) + '\n\nWould you like to run the app on another port instead?', default: true, }; inquirer.prompt(question).then(answer => { if (answer.shouldChangePort) { resolve(port); } else { resolve(null); } }); } else { console.log(chalk.red(message)); resolve(null); } }), err => { throw new Error( chalk.red(`Could not find an open port at ${chalk.bold(host)}.`) + '\n' + ('Network error message: ' + err.message || err) + '\n' ); } ); } module.exports = { choosePort, createCompiler, prepareProxy, prepareUrls, };