| 1 | // @remove-on-eject-begin
|
|---|
| 2 | /**
|
|---|
| 3 | * Copyright (c) 2015-present, Facebook, Inc.
|
|---|
| 4 | *
|
|---|
| 5 | * This source code is licensed under the MIT license found in the
|
|---|
| 6 | * LICENSE file in the root directory of this source tree.
|
|---|
| 7 | */
|
|---|
| 8 | // @remove-on-eject-end
|
|---|
| 9 | 'use strict';
|
|---|
| 10 |
|
|---|
| 11 | // Do this as the first thing so that any code reading it knows the right env.
|
|---|
| 12 | process.env.BABEL_ENV = 'development';
|
|---|
| 13 | process.env.NODE_ENV = 'development';
|
|---|
| 14 |
|
|---|
| 15 | // Makes the script crash on unhandled rejections instead of silently
|
|---|
| 16 | // ignoring them. In the future, promise rejections that are not handled will
|
|---|
| 17 | // terminate the Node.js process with a non-zero exit code.
|
|---|
| 18 | process.on('unhandledRejection', err => {
|
|---|
| 19 | throw err;
|
|---|
| 20 | });
|
|---|
| 21 |
|
|---|
| 22 | // Ensure environment variables are read.
|
|---|
| 23 | require('../config/env');
|
|---|
| 24 |
|
|---|
| 25 | const fs = require('fs');
|
|---|
| 26 | const chalk = require('react-dev-utils/chalk');
|
|---|
| 27 | const webpack = require('webpack');
|
|---|
| 28 | const WebpackDevServer = require('webpack-dev-server');
|
|---|
| 29 | const clearConsole = require('react-dev-utils/clearConsole');
|
|---|
| 30 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
|---|
| 31 | const {
|
|---|
| 32 | choosePort,
|
|---|
| 33 | createCompiler,
|
|---|
| 34 | prepareProxy,
|
|---|
| 35 | prepareUrls,
|
|---|
| 36 | } = require('react-dev-utils/WebpackDevServerUtils');
|
|---|
| 37 | const openBrowser = require('react-dev-utils/openBrowser');
|
|---|
| 38 | const semver = require('semver');
|
|---|
| 39 | const paths = require('../config/paths');
|
|---|
| 40 | const configFactory = require('../config/webpack.config');
|
|---|
| 41 | const createDevServerConfig = require('../config/webpackDevServer.config');
|
|---|
| 42 | const getClientEnvironment = require('../config/env');
|
|---|
| 43 | const react = require(require.resolve('react', { paths: [paths.appPath] }));
|
|---|
| 44 |
|
|---|
| 45 | const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
|
|---|
| 46 | const useYarn = fs.existsSync(paths.yarnLockFile);
|
|---|
| 47 | const isInteractive = process.stdout.isTTY;
|
|---|
| 48 |
|
|---|
| 49 | // Warn and crash if required files are missing
|
|---|
| 50 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
|---|
| 51 | process.exit(1);
|
|---|
| 52 | }
|
|---|
| 53 |
|
|---|
| 54 | // Tools like Cloud9 rely on this.
|
|---|
| 55 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
|
|---|
| 56 | const HOST = process.env.HOST || '0.0.0.0';
|
|---|
| 57 |
|
|---|
| 58 | if (process.env.HOST) {
|
|---|
| 59 | console.log(
|
|---|
| 60 | chalk.cyan(
|
|---|
| 61 | `Attempting to bind to HOST environment variable: ${chalk.yellow(
|
|---|
| 62 | chalk.bold(process.env.HOST)
|
|---|
| 63 | )}`
|
|---|
| 64 | )
|
|---|
| 65 | );
|
|---|
| 66 | console.log(
|
|---|
| 67 | `If this was unintentional, check that you haven't mistakenly set it in your shell.`
|
|---|
| 68 | );
|
|---|
| 69 | console.log(
|
|---|
| 70 | `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
|
|---|
| 71 | );
|
|---|
| 72 | console.log();
|
|---|
| 73 | }
|
|---|
| 74 |
|
|---|
| 75 | // We require that you explicitly set browsers and do not fall back to
|
|---|
| 76 | // browserslist defaults.
|
|---|
| 77 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
|---|
| 78 | checkBrowsers(paths.appPath, isInteractive)
|
|---|
| 79 | .then(() => {
|
|---|
| 80 | // We attempt to use the default port but if it is busy, we offer the user to
|
|---|
| 81 | // run on a different port. `choosePort()` Promise resolves to the next free port.
|
|---|
| 82 | return choosePort(HOST, DEFAULT_PORT);
|
|---|
| 83 | })
|
|---|
| 84 | .then(port => {
|
|---|
| 85 | if (port == null) {
|
|---|
| 86 | // We have not found a port.
|
|---|
| 87 | return;
|
|---|
| 88 | }
|
|---|
| 89 |
|
|---|
| 90 | const config = configFactory('development');
|
|---|
| 91 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
|---|
| 92 | const appName = require(paths.appPackageJson).name;
|
|---|
| 93 |
|
|---|
| 94 | const useTypeScript = fs.existsSync(paths.appTsConfig);
|
|---|
| 95 | const urls = prepareUrls(
|
|---|
| 96 | protocol,
|
|---|
| 97 | HOST,
|
|---|
| 98 | port,
|
|---|
| 99 | paths.publicUrlOrPath.slice(0, -1)
|
|---|
| 100 | );
|
|---|
| 101 | // Create a webpack compiler that is configured with custom messages.
|
|---|
| 102 | const compiler = createCompiler({
|
|---|
| 103 | appName,
|
|---|
| 104 | config,
|
|---|
| 105 | urls,
|
|---|
| 106 | useYarn,
|
|---|
| 107 | useTypeScript,
|
|---|
| 108 | webpack,
|
|---|
| 109 | });
|
|---|
| 110 | // Load proxy config
|
|---|
| 111 | const proxySetting = require(paths.appPackageJson).proxy;
|
|---|
| 112 | const proxyConfig = prepareProxy(
|
|---|
| 113 | proxySetting,
|
|---|
| 114 | paths.appPublic,
|
|---|
| 115 | paths.publicUrlOrPath
|
|---|
| 116 | );
|
|---|
| 117 | // Serve webpack assets generated by the compiler over a web server.
|
|---|
| 118 | const serverConfig = {
|
|---|
| 119 | ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
|
|---|
| 120 | host: HOST,
|
|---|
| 121 | port,
|
|---|
| 122 | };
|
|---|
| 123 | const devServer = new WebpackDevServer(serverConfig, compiler);
|
|---|
| 124 | // Launch WebpackDevServer.
|
|---|
| 125 | devServer.startCallback(() => {
|
|---|
| 126 | if (isInteractive) {
|
|---|
| 127 | clearConsole();
|
|---|
| 128 | }
|
|---|
| 129 |
|
|---|
| 130 | if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
|
|---|
| 131 | console.log(
|
|---|
| 132 | chalk.yellow(
|
|---|
| 133 | `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
|
|---|
| 134 | )
|
|---|
| 135 | );
|
|---|
| 136 | }
|
|---|
| 137 |
|
|---|
| 138 | console.log(chalk.cyan('Starting the development server...\n'));
|
|---|
| 139 | openBrowser(urls.localUrlForBrowser);
|
|---|
| 140 | });
|
|---|
| 141 |
|
|---|
| 142 | ['SIGINT', 'SIGTERM'].forEach(function (sig) {
|
|---|
| 143 | process.on(sig, function () {
|
|---|
| 144 | devServer.close();
|
|---|
| 145 | process.exit();
|
|---|
| 146 | });
|
|---|
| 147 | });
|
|---|
| 148 |
|
|---|
| 149 | if (process.env.CI !== 'true') {
|
|---|
| 150 | // Gracefully exit when stdin ends
|
|---|
| 151 | process.stdin.on('end', function () {
|
|---|
| 152 | devServer.close();
|
|---|
| 153 | process.exit();
|
|---|
| 154 | });
|
|---|
| 155 | }
|
|---|
| 156 | })
|
|---|
| 157 | .catch(err => {
|
|---|
| 158 | if (err && err.message) {
|
|---|
| 159 | console.log(err.message);
|
|---|
| 160 | }
|
|---|
| 161 | process.exit(1);
|
|---|
| 162 | });
|
|---|