diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js deleted file mode 100644 index 66acf119b84..00000000000 --- a/packages/react-scripts/config/env.js +++ /dev/null @@ -1,26 +0,0 @@ -// @remove-on-eject-begin -/** - * 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. - */ -// @remove-on-eject-end - -// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be -// injected into the application via DefinePlugin in Webpack configuration. - -var REACT_APP = /^REACT_APP_/i; -var NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'development'); - -module.exports = Object - .keys(process.env) - .filter(key => REACT_APP.test(key)) - .reduce((env, key) => { - env['process.env.' + key] = JSON.stringify(process.env[key]); - return env; - }, { - 'process.env.NODE_ENV': NODE_ENV - }); diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 314bcc2051f..1d50c38b9f8 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -38,7 +38,8 @@ var nodePaths = (process.env.NODE_PATH || '') // config after eject: we're in ./config/ module.exports = { appBuild: resolveApp('build'), - appHtml: resolveApp('index.html'), + appPublic: resolveApp('public'), + appHtml: resolveApp('public/index.html'), appIndexJs: resolveApp('src/index.js'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), @@ -56,7 +57,8 @@ function resolveOwn(relativePath) { // config before eject: we're in ./node_modules/react-scripts/config/ module.exports = { appBuild: resolveApp('build'), - appHtml: resolveApp('index.html'), + appPublic: resolveApp('public'), + appHtml: resolveApp('public/index.html'), appIndexJs: resolveApp('src/index.js'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), @@ -71,7 +73,8 @@ module.exports = { // @remove-on-publish-begin module.exports = { appBuild: resolveOwn('../../../build'), - appHtml: resolveOwn('../template/index.html'), + appPublic: resolveOwn('../template/public'), + appHtml: resolveOwn('../template/public/index.html'), appIndexJs: resolveOwn('../template/src/index.js'), appPackageJson: resolveOwn('../package.json'), appSrc: resolveOwn('../template/src'), diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 8d1de1c327d..f08fcdcb7dc 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -14,9 +14,20 @@ var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +var InterpolateHtmlPlugin = require('../scripts/utils/InterpolateHtmlPlugin'); var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin'); +var getClientEnvironment = require('../scripts/utils/getClientEnvironment'); var paths = require('./paths'); -var env = require('./env'); + +// 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 = '/'; +// `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 shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. +var publicUrl = ''; +// Get enrivonment variables to inject into our app. +var env = getClientEnvironment(publicUrl); // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -63,8 +74,8 @@ module.exports = { // served by WebpackDevServer in development. This is the JS bundle // containing code from all our entry points, and the Webpack runtime. filename: 'static/js/bundle.js', - // In development, we always serve from the root. This makes config easier. - publicPath: '/' + // This is the URL that app is served from. We use "/" in development. + publicPath: publicPath }, resolve: { // This allows you to set a fallback for where Webpack should look for modules. @@ -129,21 +140,11 @@ module.exports = { // In production, they would get copied to the `build` folder. { test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, - exclude: /\/favicon.ico$/, loader: 'file', query: { name: 'static/media/[name].[hash:8].[ext]' } }, - // A special case for favicon.ico to place it into build root directory. - { - test: /\/favicon.ico$/, - include: [paths.appSrc], - loader: 'file', - query: { - name: 'favicon.ico?[hash:8]' - } - }, // "url" loader works just like "file" loader but it also embeds // assets smaller than specified size as data URLs to avoid requests. { @@ -153,15 +154,6 @@ module.exports = { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } - }, - // "html" loader is used to process template page (index.html) to resolve - // resources linked with HTML tags. - { - test: /\.html$/, - loader: 'html', - query: { - attrs: ['link:href'], - } } ] }, @@ -186,13 +178,19 @@ module.exports = { ]; }, plugins: [ + // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: + // + // In development, this will be an empty string. + new InterpolateHtmlPlugin({ + PUBLIC_URL: publicUrl + }), // Generates an `index.html` file with the