Example build instructions

Unless otherwise mentioned in the readme of a specific example project, the following instructions are valid for all browser examples included in this repo:

In November 2021 we had a spontaneous "infrastructure week", during which we upgraded & replaced some core setups and tooling:

• The repo is using Yarn v3 workspaces, including one for the bundled examples. This setup not only avoids having to install duplicates of the various umbrella packages for each (example) project, but also allows examples to use the current (unreleased) dev versions of these packages.
• All examples are using Vite as build/dev tool, replacing the former Snowpack solution

Step 1: Building all packages (once!)

Including cloning & installing, this step takes <4 mins on an MacBook Air M1.

git clone https://github.com/thi-ng/umbrella.git

cd umbrella

# first install & build
yarn install
yarn build

Step 2a: Build a single example

yarn start launches Vite and its server in development mode and then automatically opens the example in your browser.

When trying out multiple examples, it's maybe easier to launch the examples via a sub-shell to avoid extraneous cding:

# from the repo root
(cd examples/porter-duff && yarn start)

cd examples/<example>
yarn start

Building production versions

Bundled results will be written to /dist within the example folder:

yarn build

# optionally preview already built prod version
yarn preview

Step 2b: Build all examples

This command builds production versions of all 180+ examples:

# from the repo root
yarn build:examples

Alternative (non-minified) build config

Using a custom vite.config.js config, please see this discussion for creating non-minified, but tree-shaken production builds...

Troubleshooting

Please submit an issue should you run into build problems with any of the examples.