App Deployment

The tag and snap pipelines of an app component include an additional build task that deploys the app's artifacts.

To snap and deploy your app, run the following:

$bit snap --message "update app"

Copied

See command synopsis

To snap with a release version, and deploy your app, run the following:

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

Copied

See command synopsis

Use a deployer

Bit's official React application type does not provide its own deployer. Search bit.cloud for a deployer, and set it in your app's plugin file.

For example:

Netlify

Cloudflare

Run the following to install the Netlify deployer:

$bit install @teambit/cloud-providers.deployers.netlify

Copied

Set the Netlify deployer in your app plugin file (.react-app.ts):

/* @filename: my-app.react-18-app.cjs */

const { Netlify } = require('@teambit/cloud-providers.deployers.netlify');

/** @type {import("@teambit/cloud-providers.deployers.netlify").NetlifyOptions} */
const netlify = {
  /*
   * your Netlify authentication token. it's recommended to store the token it an env variable.
   * https://docs.netlify.com/cli/get-started/#obtain-a-token-in-the-netlify-ui
   */
  accessToken: process.env.NETLIFY_AUTH_TOKEN as string,
  productionSiteName: 'my-awesome-site',
  /**
   * redirect all routes through index.html (for single-page apps)
   * */ 
  useDefaultRedirectsForSPA: true,
  /**
   * your Netlify team slug
   */
  team: 'a-team',
};

/** @type {import("@teambit/react.apps.react-app-types").ReactAppOptions} */
module.exports.default = {
  name: 'my-app',
  entry: [require.resolve('./my-app.app-root')],
  deploy: Netlify.deploy(netlify),
};
Copied

See example component.

Create a custom deployer

To create your own deployer, fork an existing deployer component or start from scratch. Learn more in Customizing the app deployment

Deploy using your CI

You can choose not to use the deployment function, and instead deploy the app's artifacts using your existing CI. For this, make sure to disable you deployment function, and to snap your app component (artifacts can only be extracted from a snap).

$bit artifacts my-org.my-scope/apps/my-app --task build_application --out-dir build

Copied

See command synopsis

The artifacts are now available in the new build directory, at the root of your project. Use this directory to deploy with your existing tools and workflows. For example:

$netlify deploy --dir=build

Copied