diff --git a/packages/react-scripts/.babelrc b/packages/react-scripts/.babelrc index ad8e03a8248..cc8b10b4ee3 100644 --- a/packages/react-scripts/.babelrc +++ b/packages/react-scripts/.babelrc @@ -1,3 +1,7 @@ { - "presets": ["react-app"] -} \ No newline at end of file + "presets": [ + "latest", + "react", + "stage-1" + ] +} diff --git a/packages/react-scripts/config/jest/CSSStub.js b/packages/react-scripts/config/jest/CSSStub.js index 05810269ac6..255be188d39 100644 --- a/packages/react-scripts/config/jest/CSSStub.js +++ b/packages/react-scripts/config/jest/CSSStub.js @@ -10,4 +10,10 @@ */ // @remove-on-eject-end -module.exports = {}; +/* +* ZEAL: Stub style imports with identity proxy to allow testing of +* dynamic styles etc +*/ +const idenityObjProxy = require('identity-obj-proxy'); + +module.exports = idenityObjProxy; diff --git a/packages/react-scripts/config/jest/transform.js b/packages/react-scripts/config/jest/transform.js index 11a0149f97d..7e356a280db 100644 --- a/packages/react-scripts/config/jest/transform.js +++ b/packages/react-scripts/config/jest/transform.js @@ -9,5 +9,9 @@ const babelJest = require('babel-jest'); module.exports = babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')] + presets: [ + require.resolve('babel-preset-latest'), + require.resolve('babel-preset-react'), + require.resolve('babel-preset-stage-1') + ] }); diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 1c154c36164..547edf2aee3 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -38,12 +38,12 @@ var nodePaths = (process.env.NODE_PATH || '') // config after eject: we're in ./config/ module.exports = { appBuild: resolveApp('build'), - appPublic: resolveApp('public'), - appHtml: resolveApp('public/index.html'), - appIndexJs: resolveApp('src/index.js'), + appPublic: resolveApp('client/public'), + appHtml: resolveApp('client/public/index.html'), + appIndexJs: resolveApp('client/index.js'), appPackageJson: resolveApp('package.json'), - appSrc: resolveApp('src'), - testsSetup: resolveApp('src/setupTests.js'), + appSrc: resolveApp('client'), + testsSetup: resolveApp('client/setupTests.js'), appNodeModules: resolveApp('node_modules'), ownNodeModules: resolveApp('node_modules'), nodePaths: nodePaths @@ -57,12 +57,12 @@ function resolveOwn(relativePath) { // config before eject: we're in ./node_modules/react-scripts/config/ module.exports = { appBuild: resolveApp('build'), - appPublic: resolveApp('public'), - appHtml: resolveApp('public/index.html'), - appIndexJs: resolveApp('src/index.js'), + appPublic: resolveApp('client/public'), + appHtml: resolveApp('client/public/index.html'), + appIndexJs: resolveApp('client/index.js'), appPackageJson: resolveApp('package.json'), - appSrc: resolveApp('src'), - testsSetup: resolveApp('src/setupTests.js'), + appSrc: resolveApp('client'), + testsSetup: resolveApp('client/setupTests.js'), appNodeModules: resolveApp('node_modules'), // this is empty with npm3 but node resolution searches higher anyway: ownNodeModules: resolveOwn('../node_modules'), @@ -74,12 +74,12 @@ module.exports = { if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) { module.exports = { appBuild: resolveOwn('../../../build'), - appPublic: resolveOwn('../template/public'), - appHtml: resolveOwn('../template/public/index.html'), - appIndexJs: resolveOwn('../template/src/index.js'), + appPublic: resolveOwn('../template/client/public'), + appHtml: resolveOwn('../template/client/public/index.html'), + appIndexJs: resolveOwn('../template/client/index.js'), appPackageJson: resolveOwn('../package.json'), - appSrc: resolveOwn('../template/src'), - testsSetup: resolveOwn('../template/src/setupTests.js'), + appSrc: resolveOwn('../template/client'), + testsSetup: resolveOwn('../template/client/setupTests.js'), appNodeModules: resolveOwn('../node_modules'), ownNodeModules: resolveOwn('../node_modules'), nodePaths: nodePaths diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d875c63e8d9..7b8508981c5 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -22,7 +22,14 @@ var paths = require('./paths'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. -var publicPath = '/'; +// ZEAL: Setting publicPath in the start script and passing it in. Since we are +// mounting this app on various backends, the dev server port will be different +// from the port on window location. Because of this, we need the full public +// path, not just the relative path. Elements of the full path can be dynamic, +// but are all known in the start script, making it the best place to define the +// public path. +// var publicPath = '/'; + // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. @@ -33,7 +40,9 @@ var env = getClientEnvironment(publicUrl); // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. -module.exports = { +// ZEAL: Converted to a function to allow injecting the publicPath. +module.exports = function(publicPath) { + return { // This makes the bundle appear split into separate modules in the devtools. // We don't use source maps here because they can be confusing: // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875 @@ -51,9 +60,12 @@ module.exports = { // Note: instead of the default WebpackDevServer client, we use a custom one // to bring better experience for Create React App users. You can replace // the line below with these two lines if you prefer the stock client: - // require.resolve('webpack-dev-server/client') + '?/', - // require.resolve('webpack/hot/dev-server'), - require.resolve('react-dev-utils/webpackHotDevClient'), + // ZEAL: Opted to use the default client because the custom one gets the + // port off window location, which will be different from the dev server + // when the app is served from a different back end. + require.resolve('webpack-dev-server/client') + '?' + publicPath, + require.resolve('webpack/hot/dev-server'), + // require.resolve('react-dev-utils/webpackHotDevClient'), // We ship a few polyfills by default: require.resolve('./polyfills'), // Finally, this is your app's code: @@ -119,7 +131,11 @@ module.exports = { query: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [ + require.resolve('babel-preset-latest'), + require.resolve('babel-preset-react'), + require.resolve('babel-preset-stage-1') + ], // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/react-scripts/ @@ -135,9 +151,18 @@ module.exports = { // "style" loader turns CSS into JS modules that inject