Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build: Base webpack.config.js on calypso-build's #12072

Merged
merged 5 commits into from
May 16, 2019

Conversation

ockham
Copy link
Contributor

@ockham ockham commented Apr 17, 2019

Changes proposed in this Pull Request:

Build: Base webpack.config.js on calypso-build's

This allows us to remove a few now-redundant Gulp tasks, since calypso-build takes care of e.g. minification, building CSS from SCSS, and RTL for us automatically.

Testing instructions:

yarn distclean && yarn
yarn build-client

Builds without errors?

yarn docker:up

Smoke-test the React Dashboard. Watch the browser console for errors.

Also try

yarn clean-client && NODE_ENV=production yarn build-client

and verify that _inc/build/admin.js is minified.

Proposed changelog entry for your changes:

  • Build: Base webpack.config.js on calypso-build's

@jetpackbot
Copy link

jetpackbot commented Apr 17, 2019

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: June 4, 2019.
Scheduled code freeze: May 28, 2019

Generated by 🚫 dangerJS against 68c3444

webpack.config.js Outdated Show resolved Hide resolved
@simison
Copy link
Member

simison commented Apr 19, 2019

With this, we can probably get rid of Gulp task building styles for the dash, and use Webpack css pipeline instead:

gulp.task( 'sass:dashboard', function( done ) {
log( 'Building Dashboard CSS bundle...' );
return gulp
.src( './_inc/client/scss/style.scss' )
.pipe( sass( { outputStyle: 'compressed' } ).on( 'error', sass.logError ) )
.pipe( banner( '/* Do not modify this file directly. It is compiled SASS code. */\n' ) )
.pipe( autoprefixer() )
.pipe( rename( { suffix: '.min' } ) )
.pipe( gulp.dest( './_inc/build' ) )
.on( 'end', function() {
log( 'Dashboard CSS finished.' );
doRTL( 'main', done );
} );
} );

That doesn't have to happen in this PR, tho.

@ockham ockham force-pushed the update/webpack-base-on-calypso-build branch from 4f46531 to 23ddd63 Compare April 19, 2019 09:06
@matticbot
Copy link
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello ockham! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D28250-code before merging this PR. Thank you!

@ockham
Copy link
Contributor Author

ockham commented May 15, 2019

Blocked by #12381

ockham added a commit that referenced this pull request May 15, 2019
…12381)

`tools/builder/react.js` uses `static.jsx` to produce minimal static markup (HTML) versions of the dashboard (really just "Turn on your JavaScript" notices). It `require()`s the webpack-bundled version of `static.jsx` to that end, and attaches `renderToStaticMarkup()`-produced strings to `window`, which it then writes to HTML files.

Getting rid of the complexity added by passing information by attaching to `window` (and thus requiring `jsdom` etc) is the main objective of this PR. This is achieved by using `StaticSiteGeneratorPlugin`, which is meant for this kind of thing. In a subsequent PR, I hope to get rid of `tools/builder/react.js` pretty much entirely. This will make it much easier to base the build system for Jetpack's React Dashboard on `calypso-build` (see #12072).
@ockham ockham force-pushed the update/webpack-base-on-calypso-build branch from 6ad68e7 to 13f4a45 Compare May 15, 2019 20:34
@matticbot
Copy link
Contributor

ockham, Your synced wpcom patch D28250-code has been updated.

@ockham ockham force-pushed the update/webpack-base-on-calypso-build branch from 9dfbd29 to 68c3444 Compare May 15, 2019 21:44
@matticbot
Copy link
Contributor

ockham, Your synced wpcom patch D28250-code has been updated.

@ockham ockham added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Blocked / Hold labels May 15, 2019
@ockham ockham requested a review from a team May 15, 2019 22:10
@jeherve jeherve added the Admin Page React-powered dashboard under the Jetpack menu label May 16, 2019
Copy link
Member

@zinigor zinigor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy to see all the custom stuff slowly disappearing and being replaced by common build tools, thanks for working on this!
Works well for me both in dev and prod environments.

@zinigor zinigor added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels May 16, 2019
@ockham ockham merged commit bc93995 into master May 16, 2019
@ockham ockham deleted the update/webpack-base-on-calypso-build branch May 16, 2019 14:56
@matticbot matticbot removed the [Status] Ready to Merge Go ahead, you can push that green button! label May 16, 2019
@kraftbj kraftbj added this to the 7.4 milestone May 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Admin Page React-powered dashboard under the Jetpack menu Build Touches WP.com Files
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants