Skip to content
Closed
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion config/babel.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@

module.exports = {
babelrc: false,
cacheDirectory: true,
presets: [
'babel-preset-es2015',
'babel-preset-es2016',
Expand Down
16 changes: 4 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"autoprefixer": "6.3.7",
"babel-core": "6.11.4",
"babel-eslint": "6.1.2",
"babel-loader": "6.2.4",
"babel-plugin-syntax-trailing-function-commas": "6.8.0",
"babel-plugin-transform-class-properties": "6.11.5",
"babel-plugin-transform-object-rest-spread": "6.8.0",
Expand All @@ -39,32 +38,25 @@
"babel-preset-es2015": "6.9.0",
"babel-preset-es2016": "6.11.3",
"babel-preset-react": "6.11.1",
"babel-pundle": "1.0.0",
"babel-runtime": "6.11.6",
"chalk": "1.1.3",
"cross-spawn": "4.0.0",
"css-loader": "0.23.1",
"detect-port": "0.1.4",
"eslint": "3.1.1",
"eslint-loader": "1.4.1",
"eslint-plugin-flow-vars": "0.5.0",
"eslint-plugin-import": "1.12.0",
"eslint-plugin-jsx-a11y": "2.0.1",
"eslint-plugin-react": "5.2.2",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.22.0",
"json-loader": "0.5.4",
"opn": "4.0.2",
"postcss-loader": "0.9.1",
"process-bootstrap": "1.0.0",
"promise": "7.1.1",
"pundle": "1.1.0",
"pundle-dev": "1.1.0",
"rimraf": "2.5.4",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.1",
"webpack-dev-server": "1.14.1",
"whatwg-fetch": "1.0.0"
},
"devDependencies": {
Expand Down
238 changes: 46 additions & 192 deletions scripts/start.js
Original file line number Diff line number Diff line change
@@ -1,192 +1,46 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/

process.env.NODE_ENV = 'development';

var path = require('path');
var chalk = require('chalk');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var execSync = require('child_process').execSync;
var opn = require('opn');
var detect = require('detect-port');
var prompt = require('./utils/prompt');
var config = require('../config/webpack.config.dev');

// Tools like Cloud9 rely on this
var DEFAULT_PORT = process.env.PORT || 3000;
var compiler;

// TODO: hide this behind a flag and eliminate dead code on eject.
// This shouldn't be exposed to the user.
var handleCompile;
var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
if (isSmokeTest) {
handleCompile = function (err, stats) {
if (err || stats.hasErrors() || stats.hasWarnings()) {
process.exit(1);
} else {
process.exit(0);
}
};
}

var friendlySyntaxErrorLabel = 'Syntax error:';

function isLikelyASyntaxError(message) {
return message.indexOf(friendlySyntaxErrorLabel) !== -1;
}

// This is a little hacky.
// It would be easier if webpack provided a rich error object.

function formatMessage(message) {
return message
// Make some common errors shorter:
.replace(
// Babel syntax error
'Module build failed: SyntaxError:',
friendlySyntaxErrorLabel
)
.replace(
// Webpack file not found error
/Module not found: Error: Cannot resolve 'file' or 'directory'/,
'Module not found:'
)
// Internal stacks are generally useless so we strip them
.replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
// Webpack loader names obscure CSS filenames
.replace('./~/css-loader!./~/postcss-loader!', '');
}

function clearConsole() {
process.stdout.write('\x1bc');
}

function setupCompiler(port) {
compiler = webpack(config, handleCompile);

compiler.plugin('invalid', function() {
clearConsole();
console.log('Compiling...');
});

compiler.plugin('done', function(stats) {
clearConsole();
var hasErrors = stats.hasErrors();
var hasWarnings = stats.hasWarnings();
if (!hasErrors && !hasWarnings) {
console.log(chalk.green('Compiled successfully!'));
console.log();
console.log('The app is running at http://localhost:' + port + '/');
console.log();
return;
}

var json = stats.toJson();
var formattedErrors = json.errors.map(message =>
'Error in ' + formatMessage(message)
);
var formattedWarnings = json.warnings.map(message =>
'Warning in ' + formatMessage(message)
);

if (hasErrors) {
console.log(chalk.red('Failed to compile.'));
console.log();
if (formattedErrors.some(isLikelyASyntaxError)) {
// If there are any syntax errors, show just them.
// This prevents a confusing ESLint parsing error
// preceding a much more useful Babel syntax error.
formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
}
formattedErrors.forEach(message => {
console.log(message);
console.log();
});
// If errors exist, ignore warnings.
return;
}

if (hasWarnings) {
console.log(chalk.yellow('Compiled with warnings.'));
console.log();
formattedWarnings.forEach(message => {
console.log(message);
console.log();
});

console.log('You may use special comments to disable some warnings.');
console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
}
});
}

function openBrowser(port) {
if (process.platform === 'darwin') {
try {
// Try our best to reuse existing tab
// on OS X Google Chrome with AppleScript
execSync('ps cax | grep "Google Chrome"');
execSync(
'osascript ' +
path.resolve(__dirname, './utils/chrome.applescript') +
' http://localhost:' + port + '/'
);
return;
} catch (err) {
// Ignore errors.
}
}
// Fallback to opn
// (It will always open new tab)
opn('http://localhost:' + port + '/');
}

function runDevServer(port) {
new WebpackDevServer(compiler, {
historyApiFallback: true,
hot: true, // Note: only CSS is currently hot reloaded
publicPath: config.output.publicPath,
quiet: true
}).listen(port, (err, result) => {
if (err) {
return console.log(err);
}

clearConsole();
console.log(chalk.cyan('Starting the development server...'));
console.log();
openBrowser(port);
});
}

function run(port) {
setupCompiler(port);
runDevServer(port);
}

detect(DEFAULT_PORT).then(port => {
if (port === DEFAULT_PORT) {
run(port);
return;
}

clearConsole();
var question =
chalk.yellow('Something is already running at port ' + DEFAULT_PORT + '.') +
'\n\nWould you like to run the app at another port instead?';

prompt(question, true).then(shouldChangePort => {
if (shouldChangePort) {
run(port);
}
});
});
require('process-bootstrap')('react-app', 'REACT-APP')

const Path = require('path')
const debug = require('debug')
const Server = require('pundle-dev')
const debugInfo = debug('REACT-APP:Info')
const debugError = debug('REACT-APP:Error')

const port = 8056

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this be process.env.PORT || 3000 ?


const server = new Server({
pundle: {
entry: ['index.js'],
rootDirectory: Path.normalize(Path.join(__dirname, '../template/src')),
pathType: 'filePath',
moduleDirectories: ['node_modules'],
},
server: {
port,
error(error) {
debugError(error)
},
ready() {
debugInfo('Ready')
},
generated() {
debugInfo('Regenerated')
},
hmr: true,
sourceMap: true,
sourceRoot: Path.normalize(Path.join(__dirname, '../template')),
},
watcher: {},
generator: {
sourceMap: true,
wrapper: 'hmr',
},
})

server.pundle.loadPlugins([
[require.resolve('babel-pundle'), {
config: require('../config/babel.dev'),
}],
]).then(function() {
return server.activate()
}).catch((e) => console.log('error', e))
1 change: 1 addition & 0 deletions template/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
</head>
<body>
<div id="root"></div>
<script src="/_/bundle.js"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand Down
4 changes: 1 addition & 3 deletions template/src/App.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<img className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
Expand Down
1 change: 0 additions & 1 deletion template/src/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
<App />,
Expand Down