Assets

Assets are "static" files that make up all clientside applications. Examples of static assets are:

  • CSS
  • Javascript bundles
  • .map files for debugging CSS and Javascript
  • Font files
  • JPEG, PNG, GIF, and SVG images
  • favicons

Assets are compiled to the dist/ folder if they are @import'd in some file within the dependency chain of your app. Only files within dist/ are available to be served to your apps.

We include .twig files on the dependency chain to assist webpack's file watching.

"Dependency Chain"

Particle takes a modern approach to asset management through Webpack. Instead of files spread around a project that have to be referenced individually on the client side, apps now have entry point javascript files that @import dependencies that @import dependencies that @import dependencies and so on.

Using Webpack to bundle this dependency chain up into as few output files as possible to the dist/ directory means we have a source/ (and apps/) folder that is structured the way we want to work, with a consistent output.

Consider this dependency chain for the apps/pl app:

                                                     <- @protons
                                                     <- jquery
                                                     <- bootstrap/src/js/buttons
                                <- @atoms/button     <- _button.scss
                                                     <- @protons
                                                     <- jquery
                                                     <- bootstrap/src/js/cards
apps/pl <- source/design-system <- @molecules/card   <- _card.scss
                                                     <- @protons
                                                     <- bootstrap/src/js/jumbotron
                                <- @organisms/header <- _header.scss

Even though @protons and jquery are included multiple times, webpack removes this duplication as it treeshakes for the compiled bundle. The amount of common chunks and vendor-only bundles generated can be configured in the root webpack.particle.*.js configs.

Webpack dev server

Running npm start compiles Pattern Lab, then starts a hot reloading webpack dev server, then injects assets into the Pattern Lab. All static html files generated by Pattern Lab will be served at http://0.0.0.0/pl and all modifications to assets on the dependency chain will be automatically injected into the browser. This means that you can work on Sass and javascript, the bundle will recompile, and the browser will reload rapidly.

Dev server config can be found inside of particle/apps/pl/webpack.pl.dev.js