start.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. 'use strict'
  2. // Do this as the first thing so that any code reading it knows the right env.
  3. process.env.BABEL_ENV = 'development'
  4. process.env.NODE_ENV = 'development'
  5. // Makes the script crash on unhandled rejections instead of silently
  6. // ignoring them. In the future, promise rejections that are not handled will
  7. // terminate the Node.js process with a non-zero exit code.
  8. process.on('unhandledRejection', (err) => {
  9. throw err
  10. })
  11. // Ensure environment variables are read.
  12. require('../config/env')
  13. const fs = require('fs')
  14. const chalk = require('react-dev-utils/chalk')
  15. const webpack = require('webpack')
  16. const WebpackDevServer = require('webpack-dev-server')
  17. const clearConsole = require('react-dev-utils/clearConsole')
  18. const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
  19. const {
  20. choosePort,
  21. createCompiler,
  22. prepareProxy,
  23. prepareUrls,
  24. } = require('react-dev-utils/WebpackDevServerUtils')
  25. const openBrowser = require('react-dev-utils/openBrowser')
  26. const paths = require('../config/paths')
  27. const configFactory = require('../config/webpack.config')
  28. const createDevServerConfig = require('../config/webpackDevServer.config')
  29. const useYarn = fs.existsSync(paths.yarnLockFile)
  30. const isInteractive = process.stdout.isTTY
  31. // Warn and crash if required files are missing
  32. if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  33. process.exit(1)
  34. }
  35. // Tools like Cloud9 rely on this.
  36. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
  37. const HOST = process.env.HOST || '0.0.0.0'
  38. if (process.env.HOST) {
  39. console.log(
  40. chalk.cyan(
  41. `Attempting to bind to HOST environment variable: ${chalk.yellow(
  42. chalk.bold(process.env.HOST)
  43. )}`
  44. )
  45. )
  46. console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`)
  47. console.log(`Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`)
  48. console.log()
  49. }
  50. // We require that you explicitly set browsers and do not fall back to
  51. // browserslist defaults.
  52. const { checkBrowsers } = require('react-dev-utils/browsersHelper')
  53. checkBrowsers(paths.appPath, isInteractive)
  54. .then(() => {
  55. // We attempt to use the default port but if it is busy, we offer the user to
  56. // run on a different port. `choosePort()` Promise resolves to the next free port.
  57. return choosePort(HOST, DEFAULT_PORT)
  58. })
  59. .then((port) => {
  60. if (port == null) {
  61. // We have not found a port.
  62. return
  63. }
  64. const config = configFactory('development')
  65. const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
  66. const appName = require(paths.appPackageJson).name
  67. const useTypeScript = fs.existsSync(paths.appTsConfig)
  68. const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'
  69. const urls = prepareUrls(protocol, HOST, port)
  70. const devSocket = {
  71. warnings: (warnings) => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
  72. errors: (errors) => devServer.sockWrite(devServer.sockets, 'errors', errors),
  73. }
  74. // Create a webpack compiler that is configured with custom messages.
  75. const compiler = createCompiler({
  76. appName,
  77. config,
  78. devSocket,
  79. urls,
  80. useYarn,
  81. useTypeScript,
  82. tscCompileOnError,
  83. webpack,
  84. })
  85. // Load proxy config
  86. const proxySetting = require(paths.appPackageJson).proxy
  87. const proxyConfig = prepareProxy(proxySetting, paths.appPublic)
  88. // Serve webpack assets generated by the compiler over a web server.
  89. const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig)
  90. const devServer = new WebpackDevServer(compiler, serverConfig)
  91. // Launch WebpackDevServer.
  92. devServer.listen(port, HOST, (err) => {
  93. if (err) {
  94. return console.log(err)
  95. }
  96. if (isInteractive) {
  97. clearConsole()
  98. }
  99. // We used to support resolving modules according to `NODE_PATH`.
  100. // This now has been deprecated in favor of jsconfig/tsconfig.json
  101. // This lets you use absolute paths in imports inside large monorepos:
  102. if (process.env.NODE_PATH) {
  103. console.log(
  104. chalk.yellow(
  105. 'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
  106. )
  107. )
  108. console.log()
  109. }
  110. console.log(chalk.cyan('Starting the development server...\n'))
  111. openBrowser(urls.localUrlForBrowser)
  112. })
  113. ;['SIGINT', 'SIGTERM'].forEach(function (sig) {
  114. process.on(sig, function () {
  115. devServer.close()
  116. process.exit()
  117. })
  118. })
  119. })
  120. .catch((err) => {
  121. if (err && err.message) {
  122. console.log(err.message)
  123. }
  124. process.exit(1)
  125. })