generate template app with absolute import paths

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