3 Ways to Build and Release Components

1 bulan yang lalu

How to Build and Release Bit Components

Over nan past fewer years, building package applications arsenic a postulation of components has gained immense popularity. Dividing nan exertion into smaller, much manageable pieces and composing them together allows for easier maintenance, testing, and scaling, making it an perfect prime for modern package development.

However, moving into component-based package improvement besides requires a caller position connected mounting up CI and utilizing tooling to negociate nan lifecycle of components.

There are aggregate options, depending connected your repository structure, nan maturity of adopting components, and nan shape of migration into components.

The first attack we will see is utilizing a CI level tailored to nan unsocial demands of component-based package development.

It provides a highly businesslike and optimized CI acquisition offering features like:

Parallelized constituent builds
Efficient builds that see only affected components
Faster feedback loops pinch incremental constituent builds
Automatic propagation of limited constituent builds (including components not maintained by your workspace)
Works retired of nan container without immoderate further configuration

Ripple straight supports Bit components and their default configuration. You tin customize nan build and merchandise configurations by modifying your dev environment’s build pipeline. You tin customize nan compiler, tester, linter, formatter, preview (for UI components), and build configurations by modifying nan Env. The pursuing skeleton shows really a build-pipeline configuration looks successful an Envt.

// imports...

export people MyEnv {
/* a shorthand sanction for nan env. */
sanction = 'my-env';
/* icon for nan env. */
icon = 'path/to/my-env-icon.svg';

/**
* nan compiler for components maintained by this env.
* utilized for compilation during improvement ('bit compile', 'bit watch', 'bit start').
*/
compiler(): EnvHandler<Compiler> {
return MyCompiler.from(myCompilerConfig);
}

/**
* nan tester for components maintained by this env.
* utilized for testing during improvement ('bit test').
*/
tester(): EnvHandler<Tester> {
return MyTester.from(myTesterConfig);
}

/**
* nan linter for components maintained by this env.
* utilized for linting during improvement ('bit lint').
*/
linter() {
return MyLinter.from(myLinterConfig);
}

/**
* nan codification formatter for components maintained by this env.
* utilized for codification formatting during improvement ('bit lint').
*/
formatter(): EnvHandler<Formatter> {
return MyCodeFormatter.from(myFormatterConfig);
}

/**
* nan bundler and renderer for nan components maintained by this env.
* utilized for previewing components and their docs
* (used during nan constituent improvement and build)
*/
preview(): EnvHandler<Preview> {
return MyComponentPreviewHandler.from({
myComponentPreviewWrapper,
myComponentDocsTemplate,
});
}

/**
* nan build pipeline for components maintained by this env
* this pipeline includes compilation, tests, and linting tasks
* ('bit build', 'bit snap', 'bit tag')
*/
build() {
return Pipeline.from([
MyCompilerTask.from(myCompilerConfig),
MyLinterTask.from(myLinterConfig),
MyTesterTask.from(myTesterConfig),
]);
}

/**
* nan threat pipeline for components maintained by this env
* ('bit snap')
*/
snap() {
return Pipeline.from([]);
}

/**
* he tag pipeline for components maintained by this env
* ('bit tag')
*/
tag() {
return Pipeline.from([]);
}

/**
* nan package config for packages generated
* for components maintained by this env.
*/
package() {
return PackageGenerator.from({
packageJson: {
main: 'dist/{main}.js',
},
});
}

/**
* constitute workspace configuration files for nan IDE,
* this improves developer acquisition arsenic it enables nan IDE to publication from nan same
* configuration files (for nan compiler, linter, etc) utilized by components maintained by this env,
* and supply feedback to nan personification accordingly.
*/
workspaceConfig(): ConfigWriterList {
return ConfigWriterList.from([
MyCompilerConfigWriter.from({ myCompilerConfig }),
MyLinterConfigWriter.from({ myLinterConfig }),
MyCodeFormatterConfigWriter.from({ myFormatterConfig }),
]);
}

/**
* workspace templates to make pre-configured workspaces,
* perchance pinch a group of new/imported components.
*/
starters() {
return StarterList.from([MyWorkspaceTemplate.from()]);
}

/**
* group a database of constituent templates to usage crossed your
* workspaces. caller workspaces would beryllium group to include
* your envs by default.
*/
generators() {
return TemplateList.from([
MyTsComponentTemplate.from(),
MyCssComponentTemplate.from(),
]);
}

/**
* nan app types supported by this env.
*/
apps(): EnvHandler<AppTypeList> {
return AppTypeList.from([MyAppType.from()]);
}
}

export default caller MyEnv();

Here's a complete illustration of React Env build-pipeline implementation. It's ever recommended to return a fork of nan Env configuration and customize it erstwhile required.

Component lifecycle pinch Ripple

If you are acquainted pinch feature branch workflow successful Git, you tin travel a akin attack utilizing Ripple.

Create a caller lane

Before doing immoderate modifications to components, you tin create a caller Bit lane utilizing nan bid spot lane create my-lane — scope my-org.my-scope. It’s akin to creating a Git branch. The main quality is dissimilar Git, Bit Lanes only tracks nan modified components from your workspace.

2. Snap changes

Once nan components are modified, you tin threat nan changes by utilizing spot threat --message "message for modified components" . This is akin to nan perpetrate cognition successful Git.

3. Export lane

To build your constituent utilizing Ripple, threat them, and export them to nan respective scope successful bit.cloud utilizing spot export command.

After this step, you tin preview and trial your modified constituent successful nan lane exported successful bit.cloud. It will besides trigger nan Ripple CI build task to trial each nan modified components parallel and their dependents to guarantee everything useful successful order.

4. Create a alteration request

You tin past create a alteration petition to nan main lane of your scope via Ripple. Like a Pull Request successful Git, it will comparison nan changes made to nan components truthful that nan reviewers tin o.k. nan alteration petition and merge it pinch nan main.

5. Merge and release

Merging pinch nan main lane automatically creates a caller tag pinch a type bump for nan modified components, releasing caller constituent versions.

Note: Optionally, for App components, location is an further configuration you tin customize successful nan Env to deploy it to nan applicable server.

If you person already utilized Ripple, you astir apt person acquisition utilizing CI retired of nan container for components. However, location are situations erstwhile you person introduced components to an existing codebase successful Git. Or, successful immoderate cases, nan CI is already configured utilizing a CI for illustration GitHub actions for nan existing codification base. You whitethorn besides request to widen your CI to support nan build and merchandise of components.

Existing CI solutions and examples repository.
CI solutions documentation.

First, you must specify nan superior root of truth, nan Git repository. This is adjuvant erstwhile conflicts happen; you autumn backmost connected what's disposable successful nan Git repository. To support this workflow, Bit has provided nonstop support for respective celebrated CI platforms and node.js and ammunition scripts to support others.

CI Scripts Support for Bit Components

In each these cases, nan components are built successful nan CI supplier and yet released to a distant scope successful bit.cloud.

Component lifecycle pinch Existing CI

Since your components are tracked successful a Git repository, you tin proceed utilizing your existing characteristic branch travel and widen it to support Bit components.

For much specifications connected nan CI pipeline, mention to nan article Integrating Bit pinch your Existing CI.

The main alteration would beryllium that erstwhile you create a Pull Request, a lane for nan modified components will beryllium created successful your distant scope. You tin sojourn nan distant scope and trial nan created lane. Also, to support things simple, almost each nan CI scripts station a nexus to nan Pull Request arsenic a remark pointing to nan lane successful distant scope. Once you merge nan Pull Request, each nan modified components will beryllium tagged and exported to nan distant scope, and nan caller versions will beryllium committed backmost to nan Git repository.

The pursuing video demonstrates really easy it is to group up your pipeline from nan crushed up by copying and pasting nan illustration scripts provided by Bit for GitHub Actions.

We looked astatine really Ripple and your existing CI tin independently build and merchandise components successful nan first 2 approaches. In addition, you tin usage some Ripple and your existing CI broadside by broadside to optimize your build pipeline.

Since location are aggregate ways of combining these, let’s look astatine 1 attack that reduces nan wide build clip of nan components by utilizing Ripple to build them.

First, you must perpetrate and push nan changes to your Git repository, akin to nan existing CI workflow. After that, alternatively of building your components successful existing CI, you tin usage nan Pull Request scripts to create a lane and export nan components for preview and testing successful bit.cloud.

And erstwhile you export nan components without nan --build flag, they will beryllium built successful Ripple CI, wherever you tin preview and verify their status. After that, nan aforesaid travel successful nan existing CI solution continues.

As we move towards component-based package development, we are marking a important leap successful creating, maintaining, and scaling applications. This attack streamlines improvement processes and fosters a civilization of collaboration and ratio among developers.

Ripple CI offers a bespoke CI acquisition tailored for component-driven projects. Its seamless integration pinch Bit components, coupled pinch features for illustration parallelized builds and businesslike incremental updates, underscores a committedness to optimizing nan developer workflow.

You tin besides find scripts to widen your existing CI platform, straight supporting nan constituent build and merchandise lifecycle.

In essence, whether you’re navigating nan constituent lifecycle pinch Ripple, integrating Bit components into an existing CI setup, aliases exploring a hybrid approach, nan attraction remains connected enhancing productivity and collaboration.