Created init.js script

README.md

@@ -1,49 +1,29 @@
 # react-wp-scripts
 
-A wrapper for create-react-app's `react-scripts` to allow seamless usage of scripts and styles served from `webpack-dev-server` while developing a theme or plugin.
+A wrapper for create-react-app's [`react-scripts`](https://github.com/facebookincubator/create-react-app/tree/master/packages/react-scripts) to allow seamless usage of scripts and styles served from `webpack-dev-server` while developing a theme or plugin.
 
 **Important Note**: This project is brand new, and largely untested. We recommend using it as a learning tool rather than depending on it for critical development work.
 
 ## Installation & Usage
 
-From the root directory of your `create-react-app`-generated project, run
+Run `create-react-app --scripts-version react-wp-scripts /path/to/your/project/folder`
 
-```sh
-npm install react-wp-scripts
-```
-
-Once installed, change your `start` script in `package.json` from
-
-```
-"start": "react-scripts start",
-```
-to
-```
-"start": "react-wp-scripts start",
-```
-
-Copy `loader.php` from the module to your project root (_e.g._ `cp node_modules/react-wp-scripts/loader.php .` on OSX/Linux), then copy this code into your theme:
+A new `loader-react-scripts.php` will be created on your generated project folder.
 
+Copy this code into your theme/plugin:
 ```php
-require __DIR__ . '/loader.php';
+require __DIR__ . '/loader-react-scripts.php';
 
 function mytheme_enqueue_assets() {
 	\ReactWPScripts\enqueue_assets( get_stylesheet_directory() );
 }
 add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
 ```
-or copy this code into your plugin:
-```php
-require __DIR__ . '/loader.php';
-
-function myplugin_enqueue_assets() {
-	\ReactWPScripts\enqueue_assets( plugin_dir_path( __FILE__ ) );
-}
-add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_assets' );
-```
 
 This will load all generated JS and CSS into your theme or plugin.
 
+From now on, follow the common `react-scripts` [commands](https://github.com/facebookincubator/create-react-app/blob/master/README.md#npm-start-or-yarn-start)
+
 ### `enqueue_assets`
 
 The `enqueue_assets` function takes two arguments: the filesystem path to the project directory containing the `src` and `build` folders, and an optional array argument which may be used to customize script handles and dependencies. Available options:

scripts/init.js

@@ -0,0 +1,57 @@
+'use strict';
+
+// Sets the start script for react-wp-scripts
+// And move the loader.php to the project root folder
+process.on( 'unhandledRejection', err => {
+	throw err;
+} );
+
+const fs = require( 'fs-extra' );
+const path = require( 'path' );
+const chalk = require( 'chalk' );
+
+module.exports = function(
+	appPath,
+	appName,
+	verbose,
+	originalDirectory,
+	template
+) {
+	const pkgName = require( path.join( __dirname, '..', 'package.json' ) ).name;
+	const reactWPScriptsPath = path.join( appPath, 'node_modules', pkgName );
+	const appPackage = require( path.join( appPath, 'package.json' ) );
+
+	const scriptsPath = path.resolve(
+		process.cwd(),
+		'node_modules',
+		'react-scripts',
+		'scripts',
+		'init.js'
+	);
+	const reactScriptsInit = require(scriptsPath);
+	reactScriptsInit( appPath, appName, verbose, originalDirectory, template );
+
+	// Setup the custom start script
+	appPackage.scripts.start = 'react-wp-scripts start';
+
+	fs.writeFileSync(
+		path.join( appPath, 'package.json' ),
+		JSON.stringify( appPackage, null, 2 )
+	);
+
+	// Copy the loader.php
+	const loaderPath = path.join( reactWPScriptsPath, 'loader.php' );
+
+	function successMessage() {
+		console.log( chalk.green( 'React WP Scripts Loader copied to your project root folder.' ) );
+		console.log( chalk.green( 'Please, follow instructions to add PHP to enqueue your assets:' ) );
+		console.log( chalk.blue( 'https://github.com/humanmade/react-wp-scripts#react-wp-scripts' ) );
+	}
+
+	fs.copy( loaderPath, path.join( appPath, 'loader-react-scripts.php' ) )
+		.then( () => successMessage() )
+		.catch( err => {
+			console.log( chalk.bgRed( 'React WP Scripts loader could not be copied to your root folder. Error details:' ) );
+			console.log( chalk.red( err ) );
+		} );
+};