This module is supposed to give you a quick(er) start into marketpace development by giving you some problematic things already setup.
npm i @platform-os/blank-marketplace
marketplace_builder/.builder file to configure your environment urls.
This module is using latest stable webpack 3. When webpack 4 gets stable and all the necessary plugins will be updated this module also will be updated to the newest and greatest.
- dynamic code splitting - lazy load async chunks when needed (read more here and here)
- using CDN path provided by server - no hardcoding weird paths, just works everywhere (read more)
- extracting common code from lazy-loaded modules and entry points (ie.
node_moduldes/) (read more)
- loaders support for: sass, fonts, images, js (read more)
- doesn't parse files that match
/node_modules\/.*.min.js/regexp to avoid double minification, which usually result in slower compilation time and bigger file (read more)
For implementation details look into
Long term caching
Long term caching is realized in two ways:
asset_urlfilter for entry points (ie. app.js, vendor.js) by adding query param with timestamp from last update on s3 bucket (read more)
- by adding hashes to filenames that are not loaded using
asset_urlliquid filter - code lazy loaded by webpack
- manifest file is extracted to its own file (
manifest.js) - changing chunks should not invalidate it (read more)
HashedModuleIdsPluginis used to prevent changing modules ID between compilations for production (similarly NamedModulesPlugin for development) (read more)
Images lazy loading
To improve performance on image heavy pages (ie. homepage, search results, listing with a lot of images) there is
vanilla-lazyload included out of the box.
It is included, configured and initialized in the
app.js - defaults are sensible, but feel free to customize it to your needs.
PostCSS is included to give you the peace of mind when it comes to covering cross browser incompabilities and missing parts. See
postcss.config.js file to see exactly which plugins are loaded in this module by default and customize it if you want. Read more.
Those should help you quickly develop, lint, build, deploy your code.
npm run command to see what tasks you have at your disposal and what they do.
Use ES6 features. You have Babel on board :-)
There is a git-precommit hook setup that will run your source code through
prettier-eslint. Read about eslint and
prettier for more info. See config in
There are couple views (layout, layout includes, homepage) in this module to show you how you can structure your initial code.
Because npm modules are installed in
node_modules directory, if you dont need it, just remove it (or remove only this module from it).
Same goes for autogenerated
package-lock.json file that npm creates.