Alias package name to root directory

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'),

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

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

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",

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) {

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() {

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');

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(
   <App />,