Add npm commands for dev and fix hotreloading

package.json

@@ -16,16 +16,49 @@
   "scripts": {
     "preanalyze-bundles": "webpack --config webpack.cdn.config.js --profile --json > stats.json",
     "analyze-bundles": "webpack-bundle-analyzer stats.json .",
-    "prestart": "npm run targets:standalone",
-    "start": "webpack-dev-server --config webpack.standalone.config.js",
-    "targets": "run-p targets:*",
-    "targets:cdn": "run-p targets:cdn:* && run-p targets:cdn:*:*",
-    "targets:cdn:css:main": "node-sass src/form.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/happychat.css",
-    "targets:cdn:css:woo": "node-sass src/ui/css/themes/_woo.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/woo.css",
-    "targets:cdn:css:jpop": "node-sass src/ui/css/themes/_jpop.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/jpop.css",
-    "targets:cdn:js": "webpack --config webpack.cdn.config.js",
-    "targets:standalone": "webpack --config webpack.standalone.config.js",
-    "targets:wordpress": "webpack --config webpack.wordpress.config.js",
+    "start": "run-p dev:standalone",
+    "dev:standalone": "run-p dev:standalone:*",
+    "dev:standalone:js": "NODE_ENV=development webpack-dev-server --config webpack.standalone.config.js",
+    "dev:standalone:css": "run-p dev:standalone:css:*",
+    "dev:standalone:css:main": "node-sass src/form.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/standalone/happychat.css",
+    "dev:standalone:css:woo": "node-sass src/ui/css/themes/_woo.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/standalone/woo.css",
+    "dev:standalone:css:jpop": "node-sass src/ui/css/themes/_jpop.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/standalone/jpop.css",
+
+    "dev:cdn": "run-p dev:cdn:*",
+    "dev:cdn:js": "NODE_ENV=development webpack-dev-server --config webpack.cdn.config.js",
+    "dev:cdn:css": "run-p dev:cdn:css:*",
+    "dev:cdn:css:main": "node-sass src/form.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/happychat.css",
+    "dev:cdn:css:woo": "node-sass src/ui/css/themes/_woo.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/woo.css",
+    "dev:cdn:css:jpop": "node-sass src/ui/css/themes/_jpop.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/jpop.css",
+
+    "dev:wordpress": "run-p dev:wordpress:*",
+    "dev:wordpress:js": "NODE_ENV=development webpack-dev-server --config webpack.wordpress.config.js",
+    "dev:wordpress:css": "run-p dev:wordpress:css:*",
+    "dev:wordpress:css:main": "node-sass src/form.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/wordpress/happychat.css",
+    "dev:wordpress:css:woo": "node-sass src/ui/css/themes/_woo.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/wordpress/woo.css",
+    "dev:wordpress:css:jpop": "node-sass src/ui/css/themes/_jpop.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/wordpress/jpop.css",
+
+    "build": "run-p build:*",
+    "build:cdn": "run-p build:cdn:*",
+    "build:cdn:js": "NODE_ENV=production webpack -p --config webpack.cdn.config.js",
+    "build:cdn:css": "run-p build:cdn:css:*",
+    "build:cdn:css:main": "node-sass src/form.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/happychat.css",
+    "build:cdn:css:woo": "node-sass src/ui/css/themes/_woo.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/woo.css",
+    "build:cdn:css:jpop": "node-sass src/ui/css/themes/_jpop.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/cdn/jpop.css",
+
+    "build:standalone": "run-p build:standalone:*",
+    "build:standalone:js": "NODE_ENV=production webpack -p --config webpack.standalone.config.js -p",
+    "build:standalone:css": "run-p build:standalone:css:*",
+    "build:standalone:css:main": "node-sass src/form.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/standalone/happychat.css",
+    "build:standalone:css:woo": "node-sass src/ui/css/themes/_woo.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/standalone/woo.css",
+    "build:standalone:css:jpop": "node-sass src/ui/css/themes/_jpop.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/standalone/jpop.css",
+
+    "build:wordpress": "run-p build:wordpress:*",
+    "build:wordpress:js": "NODE_ENV=production webpack -p --config webpack.wordpress.config.js",
+    "build:wordpress:css": "run-p build:wordpress:css:*",
+    "build:wordpress:css:main": "node-sass src/form.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/wordpress/assets/happychat.css",
+    "build:wordpress:css:woo": "node-sass src/ui/css/themes/_woo.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/wordpress/assets/woo.css",
+    "build:wordpress:css:jpop": "node-sass src/ui/css/themes/_jpop.scss --output-style compressed | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties --no-map -o targets/wordpress/assets/jpop.css",
     "test": "jest -c jest.config.json"
   },
   "devDependencies": {

targets/README.md

@@ -2,46 +2,60 @@
 
 This folder contains target apps that embed the Happychat library and we actively maintain. Every target has a companion webpack build config and a npm command.
 
-## targets/cdn
+## Developing
+
+There is a command for developing on each target `npm run dev:<target>`. While developing the `NODE_ENV` is set to `development` within the webpack config, the config values are taken from `src/config/development.json`.
 
-Contains the production-ready JavaScript and CSS assets.
+**When developing local css will be loaded but for now there is no watch mechanism. Stop and start the 
+command to rebuild local css. Or just run `npm run dev:<target>:css` in another terminal.**
 
-To build this target, execute:
 
-	npm run targets:cdn
+## Production builds
 
-It'll build the JS library using the `webpack.cdn.config.js`. By defining `NODE_ENV` to `production` within the webpack config, we leverage some optimizations of our dependencies (slimmer React build, for example) and also take the config values from `src/config/production.json` (which, for example, teach the library to connect to Happychat production server).
+`npm run build` - will create production builds for all the targets, you can build a target independenly
+by running `npm run build:<target>`. 
+
+For all production builds `NODE_ENV` is set to `production` within the webpack config, we leverage some optimizations of our dependencies (slimmer React build, for example) and also take the config values from `src/config/production.json` (which, for example, teach the library to connect to Happychat production server).
 
 It'll build the CSS asset using the `postcss.config.json`. Note that the CSS is automatically requested once the Happychat component is initialized. You never need to embed this manually in your page. It's served from the WordPress.com CDN at https://widgets.wp.com/happychat/happychat.css so any time it's updated it needs to be uploaded there for changes to take effect.
 
-## targets/standalone
 
-Contains a standalone example of Happychat embedded in a bare HTML webpage.
+## targets/cdn
 
-To build this target, execute:
+Contains the production-ready JavaScript and CSS assets. It'll build the JS library using the `webpack.cdn.config.js`. 
 
-	npm run targets:standalone
+To develop this target (`http://localhost:9000`), execute:
 
-This build uses `webpack.standalone.config.js` which doesn't include some production optimization (uglify, etc) so it's readable for development. By defining the `NODE_ENV` to `development` within the webpack config, the config values are taken from `src/config/development.json` (which, for example, teach the library to connect to Happychat production server).
+	npm run dev:cdn
 
-It also defines a server for development:
+To build this target for production, execute:
 
-    npm install
-    npm run start
+	npm run build:cdn
 
-And visit `localhost:9000`.
 
-## targets/wordpress
+## targets/standalone
 
-Contains a WordPress plugin that exposes a `[happychat]` shortcode, it leverages the library to provide a Happychat experience in any WordPress.
+Contains a standalone example of Happychat embedded in a bare HTML webpage. It'll build the JS library using the `webpack.standalone.config.js`. 
+
+To develop this target (`http://localhost:9000`), execute:
+
+	npm run dev:standalone 
+	// or
+	npm start
+
+To build this target for production, execute:
+
+	npm run build:standalone
+
+
+## targets/wordpress
 
-To build this target instead, execute:
+Contains a WordPress plugin that exposes a `[happychat]` shortcode, it leverages the library to provide a Happychat experience in any WordPress. Because it leverages the browser's `window` object this target will use the same entry point as browser (`targets/browser/index.js`). It'll build the JS library using the `webpack.wordpress.config.js`. 
 
-	npm run targets:wordpress
+To develop this target (`http://localhost:9000`), execute:
 
-This build uses `webpack.wordpress.config.js` which doesn't include some production optimization (uglify, etc) so it's readable for development. By defining the `NODE_ENV` to `development` within the webpack config, the config values are taken from `src/config/development.json` (which, for example, teach the library to connect to Happychat production server).
+	npm run dev:wordpress
 
-Should you want a production build, execute
+To build this target for production, execute:
 
-	npm run targets:cdn:js
-	cp targets/cdn/happychat.js targets/wordpress/assets/happychat.js
+	npm run build:wordpress

webpack.cdn.config.js

@@ -3,10 +3,13 @@ const path = require( 'path' );
 const webpack = require( 'webpack' );
 const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
 
-module.exports = {
+const env = process.env.NODE_ENV;
+
+const config = {
 	entry: './targets/cdn/index.js',
 	output: {
-		filename: './targets/cdn/happychat.js',
+		filename: 'happychat.js',
+		path: path.resolve( __dirname, 'targets/cdn' ),
 	},
 	module: {
 		rules: [
@@ -19,13 +22,27 @@ module.exports = {
 	},
 	plugins: [
 		new webpack.DefinePlugin( {
-			'process.env.NODE_ENV': JSON.stringify( 'production' ),
+			'process.env.NODE_ENV': JSON.stringify( env ),
 		} ),
-		new webpack.optimize.ModuleConcatenationPlugin(),
-		new UglifyJsPlugin(),
 	],
 	resolve: {
 		extensions: [ '.js', '.jsx' ],
 		modules: [ path.resolve( __dirname ), path.resolve( __dirname, 'node_modules' ) ],
 	},
 };
+
+switch ( env ) {
+	case 'development':
+		config.devtool = 'source-map';
+		config.devServer = {
+			port: 9000,
+		};
+		break;
+
+	case 'production':
+		config.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
+		config.plugins.push( new UglifyJsPlugin() );
+		break;
+}
+
+module.exports = config;

webpack.standalone.config.js

@@ -1,11 +1,15 @@
 /** @format */
 const path = require( 'path' );
 const webpack = require( 'webpack' );
+const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
 
-module.exports = {
+const env = process.env.NODE_ENV;
+
+const config = {
 	entry: './targets/standalone/index.js',
 	output: {
-		filename: './targets/standalone/public/happychat.js',
+		filename: 'happychat.js',
+		path: path.resolve( __dirname, 'targets/standalone' ),
 	},
 	module: {
 		rules: [
@@ -18,17 +22,29 @@ module.exports = {
 	},
 	plugins: [
 		new webpack.DefinePlugin( {
-			'process.env.NODE_ENV': JSON.stringify( 'development' ),
+			'process.env.NODE_ENV': JSON.stringify( env ),
 		} ),
 	],
 	resolve: {
 		extensions: [ '.js', '.jsx' ],
 		modules: [ path.resolve( __dirname ), path.resolve( __dirname, 'node_modules' ) ],
 	},
-	devServer: {
-		contentBase: './targets/standalone/public',
-		compress: true,
-		port: 9000,
-		hot: true,
-	},
 };
+
+switch ( env ) {
+	case 'development':
+		config.devtool = 'source-map';
+		config.devServer = {
+			contentBase: path.resolve( __dirname, 'targets/standalone' ),
+			publicPath: '/',
+			port: 9000,
+		};
+		break;
+
+	case 'production':
+		config.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
+		config.plugins.push( new UglifyJsPlugin() );
+		break;
+}
+
+module.exports = config;

webpack.wordpress.config.js

@@ -1,11 +1,15 @@
 /** @format */
 const path = require( 'path' );
 const webpack = require( 'webpack' );
+const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
 
-module.exports = {
+const env = process.env.NODE_ENV;
+
+const config = {
 	entry: './targets/wordpress/index.js',
 	output: {
-		filename: './targets/wordpress/assets/happychat.js',
+		filename: 'happychat.js',
+		path: path.resolve( __dirname, 'targets/wordpress/assets' ),
 	},
 	module: {
 		rules: [
@@ -18,11 +22,27 @@ module.exports = {
 	},
 	plugins: [
 		new webpack.DefinePlugin( {
-			'process.env.NODE_ENV': JSON.stringify( 'development' ),
+			'process.env.NODE_ENV': JSON.stringify( env ),
 		} ),
 	],
 	resolve: {
 		extensions: [ '.js', '.jsx' ],
 		modules: [ path.resolve( __dirname ), path.resolve( __dirname, 'node_modules' ) ],
 	},
 };
+
+switch ( env ) {
+	case 'development':
+		config.devtool = 'source-map';
+		config.devServer = {
+			port: 9000,
+		};
+		break;
+
+	case 'production':
+		config.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
+		config.plugins.push( new UglifyJsPlugin() );
+		break;
+}
+
+module.exports = config;