Preview During Build

The Preview Aspect registers its own Build Task to generate preview artifacts during build time (bit build). This build task uses the Bundler (and not the DevServer) to generate minimized assets, for optimized page loads.

$ bit build ui/text

✔ env "company.scope/envs/my-react", task "teambit.preview/preview:GeneratePreview" has completed successfully in 39s
✔ env "teambit.harmony/aspect", task "teambit.preview/preview:GeneratePreview" has completed successfully in 25s
Copied

Since it is a build task, the link file and consequent preview artifacts, are generated in a Capsule (~/Library/Caches/Bit/capsules/{hash}/{env-id}_{env-name}-preview/__{preview-name}-{timestamp}.js)

Artifacts that are generated as part of the snap or tag pipelines, are be persisted in the component objects.

For example:

# run tag
$ bit tag ui/text

# list the component artifacts
$ bit artifacts ui/text
# ...
  teambit.preview/preview
    GeneratePreview
      public/asset-manifest.json
      public/index.html
      public/service-worker.js
      public/workbox-4979716c.js
      public/static/css/173.00004871.css
      public/static/css/main.e10f3a52.css
      public/static/js/173.67a47fd6.js
      public/static/js/173.67a47fd6.js.LICENSE.txt
      public/static/js/main.8f2d7ca0.js
      public/static/js/runtime-main.f8aedb2c.js
Copied

Previews of tagged versions are retrieved from the component objects.

To enable the retrieval of versioned Preview artifacts, the Preview aspects registers its plugin to the Express Aspect (responsible for running the express server).