Add npm commands for dev and fix hotreloading #179

unDemian · 2018-03-27T14:59:57Z

Built on top of #178

Summary

Build npm scripts have been added for all targets's css and js also development scripts.
Hot reload was fixed for standalone target by having the contentBase folder the same as the output.
Webpack configs are now environment dependent

Testing

Added docs should make sense
npm scripts should work as advertised
Standalone chat should work as before

lamosty · 2018-03-27T17:23:38Z

targets/standalone/public/index.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>


Why did we remove this file?

It was removed by mistake when updating its path, it is added back by the next PR https://github.com/Automattic/happychat-client/pull/180/files

Ah, I see. You realize that if you add the file back in a different PR, you'll get the whole credit/blame? 😛

Haha, I accidentally removed and added it back :) The file was moved from standalone/public/index.html to standalone/index.html. While commiting the removal here I used git commit -am which did not add the new file. In the next PR I used git add --all which added back the file that was on my machine (end of day PR splitting is fun)

Hehe. :) So do you say that the file will keep its git history? If not, could you just re-add it back in this PR?

Not quite sure what you mean, after all sub branches are merged and everything will be squashed into master they all will be under one commit.

It confuses me a bit that we delete and add files unrelated to the PRs goal, so I also prefer we add it back. But! I'm new to this mega-PR building trick, so I may be overly cautious.

I agree this was removed by mistake and I accidentally added it in another PR when splitting into smaller PRs.

lamosty

Haven't tried all the commands but the code makes sense.

oandregal · 2018-04-01T17:48:21Z

webpack.standalone.config.js

+	case 'development':
+		config.devtool = 'source-map';
+		config.devServer = {
+			contentBase: path.resolve( __dirname, 'targets/standalone' ),


❤️ we should merge this piece right away!

oandregal · 2018-04-01T17:50:18Z

webpack.standalone.config.js

+	case 'production':
+		config.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
+		config.plugins.push( new UglifyJsPlugin() );
+		config.plugins.push( new LodashModuleReplacementPlugin( {


We no longer use lodash-webpack-plugin: it introduced subtle bugs and the size reduction it provided wasn't worth the hassle of changing our use of lodash to make it safe.

Will remove it.

oandregal · 2018-04-01T17:51:52Z

webpack.browser.config.js

+	case 'production':
+		config.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
+		config.plugins.push( new UglifyJsPlugin() );
+		config.plugins.push( new LodashModuleReplacementPlugin( {


Same here: we no longer use lodash-webpack-plugin.

Will remove it.

oandregal · 2018-04-01T17:52:13Z

webpack.wordpress.config.js

+	case 'production':
+		config.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
+		config.plugins.push( new UglifyJsPlugin() );
+		config.plugins.push( new LodashModuleReplacementPlugin( {


Same here: we no longer use lodash-webpack-plugin.

Will remove it.

oandregal · 2018-04-01T17:52:56Z

webpack.wordpress.config.js

+switch ( env ) {
+	case 'development':
+		config.devtool = 'source-map';
+		config.devServer = {


Do we use the development server in this case?

I haven't actually tried it, but it should be helpful to serve local css while developing a wordpress plugin.

oandregal · 2018-04-01T17:53:16Z

webpack.browser.config.js

+switch ( env ) {
+	case 'development':
+		config.devtool = 'source-map';
+		config.devServer = {


Do we use the development server in this case?

I thought it might be useful, for whenever we try to embed HC client into a regular site to have a server that serves both js and css instead of publishing it somewhere.

oandregal · 2018-04-01T18:00:05Z

webpack.wordpress.config.js

-module.exports = {
+const env = process.env.NODE_ENV;
+
+const config = {


Not sure if I should mention this here as I've already mentioned it in the first PR: I'd prefer that targets were independent of each other. We should have a targets/wordpress/index.js independent from targets/browser/index.js.

Yes you did, and this was fixed in the base PR.

oandregal · 2018-04-01T18:03:02Z

package.json

+    "dev:browser:css": "node-sass src/form.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties -o targets/browser/happychat.css",
+    "dev:wordpress": "run-p dev:wordpress:*",
+    "dev:wordpress:js": "NODE_ENV=development webpack-dev-server --config webpack.wordpress.config.js",
+    "dev:wordpress:css": "node-sass src/form.scss | postcss --config postcss.config.json -u autoprefixer -u postcss-custom-properties -o targets/wordpress/assets/happychat.css",


Ah, I see now why you did https://github.com/Automattic/happychat-client/pull/177/files#diff-a084b794bc0759e7a6b77810e01874f2R11

Are we using this local CSS files anywhere?

While working on calypso integration I use the dev commands and it was very helpful to have local css served. Based on NODE_ENV the local css will be served by all dev:* commands which tends to be extremely helpful while developing when css updates are needed.

unDemian added 5 commits March 27, 2018 17:10

Extract api and use different entry points

53f492d

Add api file and new entry point for dist target

e4e5bbc

Remove dist files from repo

ff1d9ff

Rename dist to browser

6e25b05

Add npm commands for dev and fix hotrealoading

1e163e5

unDemian self-assigned this Mar 27, 2018

unDemian added the [Status] Needs Review label Mar 27, 2018

unDemian mentioned this pull request Mar 27, 2018

Update entry points and target webpack configs #166

Closed

unDemian requested a review from oandregal March 27, 2018 15:13

unDemian mentioned this pull request Mar 27, 2018

Add local config files #180

Merged

unDemian requested a review from a team March 27, 2018 15:15

lamosty reviewed Mar 27, 2018

View reviewed changes

Address feedback

845bcd9

lamosty approved these changes Mar 27, 2018

View reviewed changes

unDemian and others added 4 commits March 27, 2018 21:35

Update webpack.dist.config.js

fbfc9cf

Update package-lock to match master

e9934e2

Remove lodash-webpack-plugin

e3a1930

Address feedback

f0b492c

unDemian added [Status] Ready to Merge and removed [Status] Needs Review labels Mar 28, 2018

Initial jsdocs for eventAPI

036a38b

oandregal reviewed Apr 1, 2018

View reviewed changes

Fix merge conflicts

a8d1967

unDemian added 7 commits April 2, 2018 11:17

Fix merge conflicts

3a74514

Fix merge conflicts

237ec14

Remove dists

0c1a3bc

Fix merge conflicts

b6bb6d8

Fix commands

a45139b

Fix targets npm command

2790e04

Fix merge conflicts

595906e

unDemian changed the base branch from update/dist-to-browser-target to master April 2, 2018 10:09

Fix merge conflicts

08322ba

unDemian removed the [Status] Ready to Merge label Apr 2, 2018

unDemian merged commit dd993dd into master Apr 2, 2018

unDemian mentioned this pull request Apr 2, 2018

Minimize JS/CSS library bundle #10

Open

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add npm commands for dev and fix hotreloading #179

Add npm commands for dev and fix hotreloading #179

unDemian commented Mar 27, 2018 •

edited

Loading

lamosty Mar 27, 2018

unDemian Mar 27, 2018

lamosty Mar 27, 2018

unDemian Mar 27, 2018

lamosty Mar 27, 2018

unDemian Mar 28, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

lamosty left a comment

oandregal Apr 1, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

oandregal Apr 1, 2018 •

edited

Loading

unDemian Apr 2, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

oandregal Apr 1, 2018

oandregal Apr 1, 2018

unDemian Apr 2, 2018

Add npm commands for dev and fix hotreloading #179

Add npm commands for dev and fix hotreloading #179

Conversation

unDemian commented Mar 27, 2018 • edited Loading

Summary

Testing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lamosty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oandregal Apr 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

unDemian commented Mar 27, 2018 •

edited

Loading

oandregal Apr 1, 2018 •

edited

Loading