Preview During Development

During development (in the workspace) component previews are generated using dedicated dev servers that run in parallel to the UI server.

$ bit start

ENVIRONMENT NAME                    URL                                  STATUS
teambit.harmony/aspect on behalf    http://localhost:3300                RUNNING
of teambit.harmony/aspect,
company.scope/envs/my-react


You can now view 'my-workspace' components in the browser.
Bit server is running on http://localhost:3000
Copied

The dev servers are configured, by default (via the DevServer Aspect), to use Hot Module Replacement (HMR) for quick page updates and persisted states. The link files, provided to them by the Preview Aspect, are updated whenever preview modules are added or removed. This joint operation results in a dev experience that is identical to working on a single monolithic app.

Since component previews are bundled using the DevServer, the number of running dev servers is determined by the number of different DevServer configurations, set by the various Envs. For performance optimization, Envs that use identical DevServer configs will share a single dev server (as can be seen in the example above).