diff --git a/config/paths.js b/config/paths.js index 9fbb4ecbc56..2d99c93f1fe 100644 --- a/config/paths.js +++ b/config/paths.js @@ -33,6 +33,7 @@ function resolveApp(relativePath) { // config after eject: we're in ./config/ module.exports = { + appRoot: resolveApp('.'), appBuild: resolveApp('build'), appHtml: resolveApp('index.html'), appPackageJson: resolveApp('package.json'), @@ -50,6 +51,7 @@ function resolveOwn(relativePath) { // config before eject: we're in ./node_modules/react-scripts/config/ module.exports = { + appRoot: resolveApp('.'), appBuild: resolveApp('build'), appHtml: resolveApp('index.html'), appPackageJson: resolveApp('package.json'), @@ -64,6 +66,7 @@ module.exports = { // @remove-on-publish-begin module.exports = { + appRoot: resolveApp('..'), appBuild: resolveOwn('../build'), appHtml: resolveOwn('../template/index.html'), appPackageJson: resolveOwn('../package.json'), diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 34bda5590a3..8398faa842e 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -17,6 +17,7 @@ var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin'); var paths = require('./paths'); var env = require('./env'); +var appName = require(paths.appPackageJson).name; // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -81,7 +82,8 @@ module.exports = { alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - 'react-native': 'react-native-web' + 'react-native': 'react-native-web', + [appName]: paths.appRoot } }, // Resolve loaders (webpack plugins for CSS, images, transpilation) from the diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index c03b6ef272f..4ea01c6a8b5 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -17,6 +17,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin'); var url = require('url'); var paths = require('./paths'); var env = require('./env'); +var appName = require(paths.appPackageJson).name; // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -76,7 +77,8 @@ module.exports = { alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - 'react-native': 'react-native-web' + 'react-native': 'react-native-web', + [appName]: paths.appRoot } }, // Resolve loaders (webpack plugins for CSS, images, transpilation) from the diff --git a/package.json b/package.json index 631b9618de8..acd7de3e834 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "filesize": "3.3.0", "find-cache-dir": "^0.1.1", "fs-extra": "0.30.0", + "glob": "^7.0.6", "gzip-size": "3.0.0", "html-loader": "0.4.3", "html-webpack-plugin": "2.22.0", diff --git a/scripts/init.js b/scripts/init.js index e440a830699..187a7563be9 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -12,6 +12,7 @@ var path = require('path'); var spawn = require('cross-spawn'); var pathExists = require('path-exists'); var chalk = require('chalk'); +var glob = require('glob'); module.exports = function(appPath, appName, verbose, originalDirectory) { var ownPath = path.join(appPath, 'node_modules', 'react-scripts'); @@ -43,6 +44,13 @@ module.exports = function(appPath, appName, verbose, originalDirectory) { // Copy the files for the user fs.copySync(path.join(ownPath, 'template'), appPath); + // Rewrite the root path + glob.sync(path.join(appPath, 'src/**/*.{js,css,html,md,svg}')).forEach(function (file) { + const templateStr = fs.readFileSync(file, {encoding: 'utf8'}) + const str = templateStr.replace(/__ROOT__/g, appPackage.name) + fs.writeFileSync(file, str) + }) + // Rename gitignore after the fact to prevent npm from renaming it to .npmignore // See: https://github.com/npm/npm/issues/1862 fs.move(path.join(appPath, 'gitignore'), path.join(appPath, '.gitignore'), [], function (err) { diff --git a/template/src/App.js b/template/src/App.js index d7d52a7f38a..770d0e84744 100644 --- a/template/src/App.js +++ b/template/src/App.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import logo from '__ROOT__/src/logo.svg'; +import '__ROOT__/src/App.css'; class App extends Component { render() { diff --git a/template/src/App.test.js b/template/src/App.test.js index b84af98d720..15798b525f7 100644 --- a/template/src/App.test.js +++ b/template/src/App.test.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App'; +import App from '__ROOT__/src/App'; it('renders without crashing', () => { const div = document.createElement('div'); diff --git a/template/src/index.js b/template/src/index.js index 54c5ef1a427..83785c0d6d2 100644 --- a/template/src/index.js +++ b/template/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App'; -import './index.css'; +import App from '__ROOT__/src/App'; +import '__ROOT__/src/index.css'; ReactDOM.render( ,