App Build

The build pipeline of an app component includes an additional build task which generates the app's artifacts.

To test your app's build without snapping and deploying you app, run its build pipeline:

$bit
Copiedcopy

Alternatively, snap your app component to build, version and deploy it (if a deployer is set):

$bit
Copiedcopy

Debugging

The app's build pipeline generates its artifacts in your workspace capsule directory. Run the following to get the path to your workspace capsule directory:

$bit
Copiedcopy

The output is similar to the following:

workspace capsules root-dir: /Users/user/Library/Caches/Bit/capsules/4fdc274b...

Your app's artifacts are placed in the artifacts/apps directory, nested inside the directory of the app component, in that capsule directory.

Head over to this component's (app) capsule to examine the output of its build.

For example, the following uses serve to serve the app's build from its capsule:

$npx serve PATH_TO_CAPSULE/artifacts/apps/react-common-js/APP_NAME/public
Copiedcopy

Modify webpack configuration

An app's build can be modified using the app-type's API, or replaced, altogether, by using a different app-type (this is done by replacing the app plugin file).

Bit's React app-type uses Webpack for bundling. Change the bundle strategy by passing Webpack transformers.

For example, the following snippet adds a sitemap:

import type { WebpackConfigTransformer } from '@teambit/webpack';
import SiteMapPlugin from 'sitemap-webpack-plugin';
import { myRoutes } from './my-routes';

export const addSitemap: WebpackConfigTransformer = (
  configMutator,
  context
) => {
  configMutator.addPlugin(
    new SiteMapPlugin({
      base: 'https://my-domain.dev/',
      paths: [...myRoutes],
    })
  );
  return configMutator;
};

export const BitDevApp: ReactAppOptions = {
  // ...
  webpackTransformers: [addSitemap],
};
CopiedCopy

Note that an app's build configuration is not identical to the component preview configuration set by its env. A React app component may have one set of bundle configurations for its component previews and a different one for its deployment. That means, among other things, that a working composition does not guarantee a working app (and vice-versa).

Pre-rendering

Use the 'prerender' option to generate, during the app's build phase, HTML pages for the selected routes. Pre-rendered pages will be be rendered by the browser before their JavaScript is loaded. Once the JavaScript is loaded, the pre-rendered page will be replaced by the app's client-side code.

Provide the prerender property, in your .react-18-app.ts plugin file, with an array of routes to prerender:

module.exports.default = {
  prerender: {
    routes: ['/', '/about-us'],
  },
};
CopiedCopy

Pass additional options to the customize the preprendering process. For example:

module.exports.default = {
  name: 'my-app',
  entry: [require.resolve('./my-app.app-root')],
  prerender: {
    rendererOptions: {
      /* number of routes to prerender in parallel */
      maxConcurrentRoutes: 10,
      /* headless can be turned off for debugging */
      headless: true,
    },
};
CopiedCopy
Pre-rendering requires Chromium to be installed on your machine

Mac
Windows
$brew install chromium --no-quarantine
Copiedcopy

Set puppeteer's PUPPETEER_EXECUTABLE_PATH env variable with the path to chromium.

Run the following to get the path to chromium:

where chromium
CopiedCopy

Set puppeteer's env variable with the path to chromium:

export PUPPETEER_EXECUTABLE_PATH=usr/local/bin/chromium
CopiedCopy