Apostrophe 3.17.0: webpack customization, extra bundles, object fields and more

[boutell]

This is a big week for Apostrophe, with three major features rolling out in Apostrophe 3.x:

Major core updates

• Webpack customization. This allows you to tailor the way Apostrophe compiles the frontend code in your ui/src folders without creating a separate Webpack build of your own. For instance, with this feature it's possible to enable jsx React components, or just add custom loader aliases to pull in imported modules from a nonstandard place.
• Extra bundles. Some sites have frontend JavaScript and CSS that is only necessary on a rarely-accessed page, or when a rarely-used widget is present. In these cases, it doesn't make sense to require every site visitor to load that code. Extra bundles solve that problem by allowing any module or group of modules to contribute to a named bundle, which loads only on page types you specify, or when certain widgets are present on the page.
• Object fields. Object fields are just like array fields, except that there is just one sub-object, rather than an array of them. This is a useful way to group fields in a hierarchy, and also helps achieve better code reuse.

Smaller core updates

There are smaller updates to Apostrophe 3.x as well:

• The es5: true option to @apostrophecms/asset works again. For those who still need to support Internet Explorer 11 for a little bit longer, this is a big deal. Everyone else can leave this flag off. Remember, it's only for ui/src code — not the admin UI, which requires a modern browser.
• Apostrophe's webpack build now works properly when developing code that imports module-specific npm dependencies from ui/src or ui/apos when using npm link to develop the module in question. This is an important win for those of us who create new reusable modules with their own frontend dependencies.

Enterprise modules

We've also released and updated several of our enterprise modules recently:

• @apostrophecms-pro/cypress-tools makes it easier to perform automated frontend testing of Apostrophe-powered sites and applications. We're now using it to automate tests of Apostrophe 3.x, to ensure stable releases. The module is also available to enterprise customers who want to test their own sites.
• @apostrophecms-pro/basics provides professional implementations of multiple-column nested widgets, buttons, cards, footers, hero displays and slideshows.

These modules are part of our enterprise offering. For more information, reach out to [email protected].

Apostrophe 2.x

Finally, we haven't forgotten support for Apostrophe 2.x. Apostrophe 2.220.10 fixes a bug relating to pages in the trash, and apostrophe-forms-google-address-field-widgets now allows any subfield to be marked as required.

[mingfang]

is there an example of how to leverage the webpack customization feature to compile React components?

[boutell]

Hi @mingfang, this relates to our own webpack build, so if you're using React via ui/src folders in your modules it'll work for you automatically, as long as you have the latest updates from the package.json file in our a3-boilerplate project to prevent nodemon from getting in the way:

https://github.com/apostrophecms/a3-boilerplate

If you're using React via a separate, custom webpack build, such as one that is set up for jsx files, then you can achieve something somewhat similar yourself by setting up webpack dev server for that build when in a dev environment, and including the output in an apostrophe module's ui/public folder for staging/production so it gets incorporated in the final bundle. In that situation, this is not an Apostrophe issue per se, except for that last hint about where to put the final bundle.

However we do have a forthcoming feature to allow any module to contribute customization to the webpack configuration, and this will most likely make it possible to support jsx files in ui/src and take full advantage of what we've done.