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 build apps/my-app

Copied

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

$bit tag apps/my-app --message "update app"

Copied

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 capsule list

Copied

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/vue-common-js/APP_NAME/public

Copied

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).

To know more about the webpack config for apps in default Vue env:
Basic webpack config for Vue apps in bitdev.vue/app-types/vue-app-type
Since all the Vue SFC files are already compiled into plain JavaScript and CSS in their own components, in the webpack config of Vue apps, it's not necessary to include things like vue-loader for *.vue files.

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

For example, the following snippet adds a banner:

// my-app.vue-app.cjs

module.exports.default = {
  // ...
  transformers: [
    // example: webpack.BannerPlugin
    config => config.addPlugins([
      new (require('webpack').BannerPlugin)('banner text')
    ])
  ],
  // ...
};
Copied

Note that the app plugin file my-app.vue-app.cjs is not in ES Module but CommonJS format since this file need to be run directly in Node runtime.

Note that an app's build configuration is not identical to the component preview configuration set by its env. A Vue 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).