1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[132],{480092(h,t,d){var a={id:"teambit.blog-content/[email protected]",homepage:"https://bit.cloud/teambit/blog-content/componentize-projects",exported:!0},b=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(t,"__esModule",{value:!0}),t.BitShowHeaderOutput=t.BitShowHeader=t.BitInstall=t.BitInstallReactEnvDeps=t.TestOutput=t.BitEnvsSetReactEnvOutput=t.BitEnvsSetReactEnv=t.CreateReactEnv=t.BitShowLandingPageOutput=t.BitShowLandingPage=t.BitStart=t.BitAddLandingPage=t.BitLinkRewire=t.BitTest=t.BitStatus=t.BitList=t.BitAddHeading=t.BitInit=void 0;const e=b(d(531715)),r=d(982780),o=d(292073),n=d(880383),w=b(d(98022)),N=()=>e.default.createElement(r.CommandExample,{commandName:"init",commandExample:{}});N.__bit_component=a,t.BitInit=N;const g=()=>{const l={"path...":"web/src/ui/heading",namespace:"ui",scope:"greeters.design"};return e.default.createElement(r.CommandExample,{commandName:"add",commandExample:l})};g.__bit_component=a,t.BitAddHeading=g;const f=()=>
1e.default.createElement(o.CommandsExplorer,{commandName:"list",commandExample:{}});f.__bit_component=a,t.BitList=f;const v=()=>e.default.createElement(o.CommandsExplorer,{commandName:"status",commandExample:{}});v.__bit_component=a,t.BitStatus=v;const y=()=>{const l={"component-pattern":"pages/landing-page"};return e.default.createElement(o.CommandsExplorer,{commandName:"test",commandExample:l})};y.__bit_component=a,t.BitTest=y;const _=()=>{const l={rewire:!0};return e.default.createElement(r.CommandExample,{commandName:"link",commandExample:l})};_.__bit_component=a,t.BitLinkRewire=_;const B=()=>{const l={"path...":"web/src/pages/landing-page",namespace:"ui",scope:"greeters.hello-world"};return e.default.createElement(r.CommandExample,{commandName:"add",commandExample:l})};B.__bit_component=a,t.BitAddLandingPage=B;const x=()=>e.default.createElement(o.CommandsExplorer,{commandName:"start",commandExample:{}});x.__bit_component=a,t.BitStart=x;const i=()=>{const l={"component-name":"pages/landing-page"};return e.default.createElement(o.CommandsExplorer,{c
1ommandName:"show",commandExample:l})};i.__bit_component=a,t.BitShowLandingPage=i;const s=()=>e.default.createElement(n.Terminal,{isOutput:!0},e.default.createElement(n.Neutral,null,`\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 2\u2502 id \u2502 greeters.hello-world/pages/landing-page \u2502 3\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 4\u2502 dependencies \u2502 classnames@^2.3.2---------------------------------- (package) \u2502 5\u2502 \u2502 @greeters/hello-world.hooks.use-hello-world@latest- (component) \u2502 6\u2502 \u2502 react@^18.2.0-------------------------------------- (package) \u2502 7\u2502 \u2502 @greeters/design.ui.button@latest------------------ (component) \u2502 8\u2502 \u2502 @greeters/design.ui.heading@latest----------------- (component) \u2502 9\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 10\u2502 dev dependencies \u2502 @babel/[email protected] (package) \u2502 11\u2502 \u2502 @types/[email protected] (package) \u2502 12\u2502 \u2502 @types/[email protected] (package) \u2502 13\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518`));s.__bit_component=a,t.BitShowLandingPageOutput=s;const p=()=>{const l={"template-name":"react-env","component-names...":"envs/react-env",aspect:"teambit.react/react-env",scope:"greeters.development"};
13return e.default.createElement(o.CommandsExplorer,{commandName:"create",commandExample:l})};p.__bit_component=a,t.CreateReactEnv=p;const m=()=>{const l={"component-pattern":'"ui/**, pages/**, hooks/**"',env:"envs/react-env"};return e.default.createElement(r.CommandExample,{commandName:"envs",subCommandName:"set",commandExample:l})};m.__bit_component=a,t.BitEnvsSetReactEnv=m;const c=()=>e.default.createElement(n.Terminal,{isOutput:!0},e.default.createElement(n.Neutral,{br:!0},"added ",e.default.createElement(n.Neutral,{bold:!0},"greeters.development/envs/react-env")," env to the following component(s):"),e.default.createElement(n.Neutral,{br:!0},"greeters.hello-world/hooks/use-hello-world"),e.default.createElement(n.Neutral,{br:!0},"greeters.design/ui/button"),e.default.createElement(n.Neutral,{br:!0},"greeters.design/ui/heading"),e.default.createElement(n.Neutral,{br:!0},"greeters.hello-world/pages/landing-page"));c.__bit_component=a,t.BitEnvsSetReactEnvOutput=c;const u=()=>e.default.createElement(n.Terminal,{isOutput:!0},e.default.createElement(n.Neutral,null,"testing total of 1 components in workspace '"),e.default.createElement(n.Blue,null,"greeters"),e.default.createElement(n.Neutral,{br:!0},"'"),e.default.createElement("br",null),e.default.createElement(n.Neutral,null,"testing 1 components with environment "),e.default.createElement(n.Blue,{br:!0},"greeters.development/envs/react-env"),e.default.createElement("br",null),e.default.createElement("span",{className:w.default.pass},"PASS"),e.default.createElement(n.Neutral,null," web/src/pages/landing-page/"),e.default.createElement(n.Neutral,{bold:!0,br:!0},"landing-page.test.tsx"),e.default.createElement(n.Neutral,null,"Test Suites: "),e.default.createElement(n.Green,{bold:!0},"1 passed"),e.default.createElement(n.Neutral,{br:!0},", 1 total"),e.default.createElement(n.Neutral,null,"Test: "),e.default.createElement(n.Green,{bold:!0},"1 passed"),e.default.createElement(n.Neutral,{br:!0},", 1 total"),e.default.createElement(n.Neutral,null,"Time: "),e.default.createElement("span",{className:w.default.yellow},"1.5s"));u.__bit_component=a,t.TestOutput=u;const E=()=>{const l={"packages...":"@teambit/preview.react-preview @teambit/typescript.typescript-compiler @teambit/defender.eslint-linter @teambit/defender.jest-tester @teambit/defender.prettier-formatter @teambit/dependencies.modules.packages-excluder @teambit/react.mounter"};
13return e.default.createElement(o.CommandsExplorer,{commandName:"install",commandExample:l})};E.__bit_component=a,t.BitInstallReactEnvDeps=E;const k=()=>e.default.createElement(r.CommandExample,{commandName:"install",commandExample:{}});k.__bit_component=a,t.BitInstall=k;const C=()=>{const l={"component-name":"ui/heading"};return e.default.createElement(r.CommandExample,{commandName:"show",commandExample:l})};C.__bit_component=a,t.BitShowHeader=C;const T=()=>e.default.createElement(n.Terminal,{isOutput:!0},e.default.createElement(n.Neutral,null,`\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 14\u2502 id \u2502 greeters.design/ui/heading \u2502 15\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 16\u2502 dependencies \u2502 classnames@^2.3.2- (package) \u2502 17\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518`));T.__bit_component=a,t.BitShowHeaderOutput=T},505973(h,t,d){var a={id:"teambit.blog-content/[email protected]",homepage:"https://bit.cloud/teambit/blog-content/componentize-projects",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=x;var b=g(d(531715)),e=d(437910),r=d(241040),o=d(480092),n=g(d(466069)),w=g(d(219207)),N=["components"];function g(i){return i&&i.__esModule?i:{default:i}}g.__bit_component=a;function f(){return f=Object.assign?Object.assign.bind():function(i){for(var s=1;s<arguments.length;s++){var p=arguments[s];for(var m in p)Object.prototype.hasOwnProperty.call(p,m)&&(i[m]=p[m])}return i},f.apply(this,arguments)}f.__bit_component=a;function v(i,s){if(i==null)return{};var p=y(i,s),m,c;if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(i);for(c=0;c<u.length;c++)m=u[c],!(s.indexOf(m)>=0)&&(!Object.prototype.propertyIsEnumerable.call(i,m)||(p[m]=i[m]))}return p}v.__bit_component=a;function y(i,s){if(i==null)return{};var p={},m=Object.keys(i),c,u;for(u=0;
17u<m.length;u++)c=m[u],!(s.indexOf(c)>=0)&&(p[c]=i[c]);return p}y.__bit_component=a;var _={},B="wrapper";function x(i){var s=i.components,p=v(i,N);return(0,e.mdx)(B,f({},_,p,{components:s,mdxType:"MDXLayout"}),(0,e.mdx)("p",null,`Bit can be used to improve your development in a variety of ways. 18You can use it to share code between projects or to build component libraries and design systems that are collaborated on, from top to bottom and from bottom to top. 19From the infra team to its consumers and back.`),(0,e.mdx)("p",null,"You can use Bit to improve your project's maintainability and scalability by componentizing it into small, independent components, that are easy to read, understand, and test."),(0,e.mdx)(r.Image,{src:"https://miro.medium.com/v2/resize:fit:4800/format:webp/1*M1dFP1OS6q9YaAzw3ySBoQ.png",mdxType:"Image"}),(0,e.mdx)("p",null,(0,e.mdx)("em",{parentName:"p"},"An ",(0,e.mdx)("a",{parentName:"em",href:"https://bit.cloud/showoff/~scopes"},"example")," of a component-based app")),(0,e.mdx)("p",null,"You can also use Bit to transform your codebase, from its current centralized state into a distributed network of independent components, to enable teams to collaborate more effectively by creating and delivering features (components) independently, and in parallel to each other."),(0,e.mdx)("p",null,"The way you use Bit depends on your existing workflow, and the goals you have in mind."),(0,e.mdx)("p",null,`This blog post is the first in a series of posts that will guide you through the different ways you can integrate Bit into your workflow. 20Since it is the first post, we'll start with the basic methodology to componentizing your existing project. Future posts will cover more advanced use cases.`),(0,e.mdx)("h2",null,"Our example project"),(0,e.mdx)("p",null,(0,e.mdx)("a",{parentName:"p",href:"https://github.com/teambit-community/hello-world/tree/pre-bit"},"Our project"),` is a simple web app that fetches data, a "hello world" message, from a backend API. 21The frontend app is built with React, and deployed to Netlify. The backend API is built with Node and Express, and deployed to AWS LightSail.`),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre"},`- web 22 - src 23 - app.tsx 24 - index.tsx 25 - pages 26 - landing-page 27 - hooks 28 - use-hello-world 29 - ui 30 - button 31 - heading 32- api 33 - src 34 - app.ts 35 - index.ts 36 - routes 37 - hello 38- .github 39 - workflows 40 - main.yml 41- netlify.toml 42- _redirects 43`)),(0,e.mdx)("ul",null,(0,e.mdx)("li",{parentName:"ul"},(0,e.mdx)("a",{parentName:"li",href:"https://github.com/teambit-community/hello-world/tree/pre-bit"},"Examine the repository before componentization")),(0,e.mdx)("li",{parentName:"ul"},(0,e.mdx)("a",{parentName:"li",href:"https://github.com/teambit-community/hello-world/tree/bit-init"},"Examine the repository after componentization")),(0,e.mdx)("li",{parentName:"ul"},(0,e.mdx)("a",{parentName:"li",href:"https://bit.cloud/greeters/~scopes"},"Examine the Bit organization to see the components exported to their scopes"))),(0,e.mdx)("h2",null,"Initialize a Bit workspace"),(0,e.mdx)("p",null,"To start componentizing our project, we'll first ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/getting-started/installing-bit/start-from-existing-project"},"initialize a Bit workspace"),"."),(0,e.mdx)(o.BitInit,{mdxType:"BitInit"}),(0,e.mdx)("p",null,"The ",(0,e.mdx)("inlineCode",{parentName:"p"},".bitmap")," file generated at the root of the project lists the components maintained by your workspace. At this point, the workspace is empty of Bit components, and the ",(0,e.mdx)("inlineCode",{parentName:"p"},".bitmap")," file is empty as well."),(0,e.mdx)("p",null,"To list the components maintained in your workspace, run the following command:"),(0,e.mdx)(o.BitList,{mdxType:"BitList"}),(0,e.mdx)("h3",null,"Preview and inspect components in the UI"),(0,e.mdx)("p",null,"Your workspace has a UI that you can use to preview components, end explore their configuration and dependency tree."),(0,e.mdx)("p",null,"Run the following to start the UI:"),(0,e.mdx)(o.BitStart,{mdxType:"BitStart"}),(0,e.mdx)("p",null,"Head over to ",(0,e.mdx)("inlineCode",{parentName:"p"},"localhost:3000")," to see the UI."),(0,e.mdx)(r.Image,{src:w.default,mdxType:"Image"}),(0,e.mdx)("br",null),(0,e.mdx)("blockquote",null,(0,e.mdx)("p",{parentName:"blockquote"},"To preview components in isolation, create a ",(0,e.mdx)("inlineCode",{parentName:"p"},"composition")," file for them inside each component directory. To learn more, see ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/react-components/react-components#compositions"},"React Component Composition"),".")),(0,e.mdx)("h2",null,"Track directories as Bit components"),(0,e.mdx)("h3",null,"What should be a Bit component?"),(0,e.mdx)("p",null,`The same reasons that led y
43ou to choosing a component-based architecture should be used as guidelines for determining the boundaries of each component. 44If it is reusability that you're after, then a component should be any group of files that will be reused in more than one place.`),(0,e.mdx)("p",null,`However, if you seek maintainability and team autonomy, then a component should be any group of files that serve a single purpose, and can be maintained by a single team. 45A fully component-based project is composed entirely of components, from the most basic ones all the way to the apps (including the app themselves).`),(0,e.mdx)("p",null,"To learn more see ",(0,e.mdx)("a",{parentName:"p",href:"https://blog.bitsrc.io/mastering-component-driven-development-improving-maintainability-and-collaborative-efficiency-6ee4b3dc5de7"},"Mastering Component-Driven Development"),"."),(0,e.mdx)("h3",null,"Start bottom up"),(0,e.mdx)("p",null,`A Bit component has to be agnostic to its place in the project, to make it independent and reusable in other projects. 46A component's internal files must be in the same directory, and cannot have relative paths to files outside of that directory. 47Modules outside of the component directory, whether they are packages or other Bit components, can only be consumed using their absolute path, the package name.`),(0,e.mdx)("p",null,"For that reason, it is advised to start componentizing your project from the bottom up, starting with components that have dependents but not dependencies, and then moving up the dependency tree."),(0,e.mdx)("p",null,"In our example project, the ",(0,e.mdx)("inlineCode",{parentName:"p"},"heading")," component is a good candidate for componentization, since it is a dependency of the ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," component, but has no dependencies of its own."),(0,e.mdx)("p",null,"Run the following command to ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/getting-started/installing-bit/start-from-existing-project#track-a-directory-as-a-component"},"track")," the ",(0,e.mdx)("inlineCode",{parentName:"p"},"heading")," component:"),(0,e.mdx)(o.BitAddHeading,{mdxType:"BitAddHeading"}),(0,e.mdx)("p",null,"The ",(0,e.mdx)("inlineCode",{parentName:"p"},"heading")," component is now tracked by Bit, and is listed in the ",(0,e.mdx)("inlineCode",{parentName:"p"},".bitmap")," file. This process should continue with other dependencies of the ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page"),` component, until its dependency tree is fully componentized. 48Once that's done, the `,(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," should be componentized as well."),(0,e.mdx)("blockquote",null,(0,e.mdx)("p",{parentName:"blockquote"},"The ",(0,e.mdx)("inlineCode",{parentName:"p"},"heading")," component has an ",(0,e.mdx)("inlineCode",{parentName:"p"},"index.ts")," file that exposes the component's API. By default, Bit will use this file as the component's entry point, or the ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/components/component-main-file"},"'main file'"),".")),(0,e.mdx)("blockquote",null,(0,e.mdx)("p",{parentName:"blockquote"},"The ",(0,e.mdx)("inlineCode",{parentName:"p"},"namespace")," option is used here to categorize the component using a meaningful name that will help organize components in the workspace and scope, and will help in making sense of them.")),(0,e.mdx)("p",null,"Check your workspace status to see if there are any issues that need to be resolved, by running the following command:"),(0,e.mdx)(o.BitStatus,{mdxType:"BitStatus"}),(0,e.mdx)("h3",null,"Change relative paths to absolute paths"),(0,e.mdx)("p",null,"Once you're done componentizing the ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," dependencies, you can componentize the ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page"),` itself. 49Before doing so, you'll need to change the `,(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," component's relative paths to its dependencies in the workspace, to the ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/packages/package-name"},"components' absolute paths"),"."),(0,e.mdx)("p",null,"The ",(0,e.mdx)("inlineCode",{parentName:"p"}
49,"landing-page")," component has the following relative paths to its dependencies:"),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-ts"},`/* change these relative paths to the components' absolute paths */ 50import { Button } from '../../ui/button'; 51import { Heading } from '../../ui/heading'; 52import { useHelloWorld } from '../../hooks/use-hello-world'; 53/* no need to change this path as it points to a file inside the component directory */ 54import './landing-page.scss' 55`)),(0,e.mdx)("p",null,"Run the following to replace the relative paths in your workspace with the components' absolute paths:"),(0,e.mdx)(o.BitLinkRewire,{mdxType:"BitLinkRewire"}),(0,e.mdx)("p",null,"The ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page.tsx")," file should now have the following absolute paths, instead of the former relative paths:"),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-ts"},`import { Button } from '@greeters/design.ui.button'; 56import { Heading } from '@greeters/design.ui.heading'; 57import { useHelloWorld } from '@greeters/hello-world.hooks.use-hello-world'; 58import './landing-page.scss' 59`)),(0,e.mdx)("p",null,"Run the following to track the ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," directory as a Bit component:"),(0,e.mdx)(o.BitAddLandingPage,{mdxType:"BitAddLandingPage"}),(0,e.mdx)("p",null,"Head over to your workspace UI to inspect its dependencies:"),(0,e.mdx)(r.Image,{src:n.default,mdxType:"Image"}),(0,e.mdx)("p",null,"Alternatively, use the following command to list the component's dependencies:"),(0,e.mdx)(o.BitShowLandingPage,{mdxType:"BitShowLandingPage"}),(0,e.mdx)("p",null,"The output should be similar to the following:"),(0,e.mdx)(o.BitShowLandingPageOutput,{mdxType:"BitShowLandingPageOutput"}),(0,e.mdx)("h3",null,"Apps as components"),(0,e.mdx)("p",null,`As mentioned earlier, a fully component-based project is composed entirely of components. This includes the apps themselves. 60Our example project has two apps, a frontend React app and the backend API.`),(0,e.mdx)("p",null,"Stay tuned for the next blog post in this series, to learn how we
60componentized the apps in our project. In the meanwhile, have a look at the components that will assist us to componentize the apps:"),(0,e.mdx)("ul",null,(0,e.mdx)("li",{parentName:"ul"},"The ",(0,e.mdx)("a",{parentName:"li",href:"https://bit.cloud/teambit/react/apps/react-app-types"},"react-app-type")," component (to bundle the React frontend app)"),(0,e.mdx)("li",{parentName:"ul"},"The ",(0,e.mdx)("a",{parentName:"li",href:"https://bit.cloud/greeters/development/deployers/netlify-deployer"},"netlify-deployer")," component (to deploy the app component to Netlify)"),(0,e.mdx)("li",{parentName:"ul"},"The ",(0,e.mdx)("a",{parentName:"li",href:"https://bit.cloud/greeters/development/deployers/aws-lightsail-deployer"},"aws-lightsail-deployer")," component (to deploy the backend app to AWS LightSail)")),(0,e.mdx)("h2",null,"Configure envs for components"),(0,e.mdx)("p",null,`A Bit component is an independent entity. It should be able to function and maintained independently of its "project of origin". 61It should not be dependent on the project's build tools and configurations, but rather on its own build tools and configurations. 62This is done by configuring an `,(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/getting-started/composing/dev-environments"},"envs")," ('component development environments') for each component."),(0,e.mdx)("p",null,"An env is a single component. It can be shared between teammates working on the same project to ensure all components use the same tools and adhere to the same standards, even when they are developed and delivered independently."),(0,e.mdx)("p",null,"Our project requires two envs, an ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/node-env/set-up-your-env"},"env for Node components"),", and an ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/react-env/set-up-your-env"},"env for React components"),"."),(0,e.mdx)("p",null,"Run the following to create a React env:"),(0,e.mdx)(o.CreateReactEnv,{mdxType:"CreateReactEnv"}),(0,e.mdx)("p",null,"Install the dependencies required by the React env (you can also use you current package manager instead of Bit):"),(0,e.mdx)(o.BitInstallReactEnvDeps,{mdxType:"BitInstallReactEnvDeps"}),(0,e.mdx)("p",null,"Run the following to set the React hooks and React components with the React env:"),(0,e.mdx)(o.BitEnvsSetReactEnv,{mdxType:"BitEnvsSetReactEnv"}),(0,e.mdx)("p",null,"The output should list all components that were set with the React env:"),(0,e.mdx)(o.BitEnvsSetReactEnvOutput,{mdxType:"BitEnvsSetReactEnvOutput"}),(0,e.mdx)("h3",null,"Run development services"),(0,e.mdx)("p",null,"Your components are now configured to run their ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/getting-started/composing/dev-environments#run-env-services"},"development services"),`, and can be developed independently of the project. 63For example, the `,(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," component can be tested by running:"),(0,e.mdx)(o.BitTest,{mdxType:"BitTest"}),(0,e.mdx)("p",null,"The test file for the ",(0,e.mdx)("inlineCode",{parentName:"p"},"landing-page")," component is located its component directory. The tester and the file extensions to be tested, are both configured by the React env."),(0,e.mdx)("p",null,"The output should be similar to the following:"),(0,e.mdx)(o.TestOutput,{mdxType:"TestOutput"}),(0,e.mdx)("h3",null,"Manage dependencies"),(0,e.mdx)("p",null,"Dependencies in Bit components are auto-detected and resolved to the ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/dependencies/external-dependencies"},"dependency version installed"),`. 64The type and version can be overridden by other factors like your the components' `,(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/dependencies/env-dependency-policy"},"env")," or ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/dependencies/configuring-dependencies"},"manual dependency configuration"),"."),(0,e.mdx)("p",null,"For example, the ",(0,e.mdx)("inlineCode",{parentName:"p"},"header")," component uses the ",(0,e.mdx)("inlineCode",{parentName:"p"},"classnames")," package. Since this package was installed using npm, it is only listed in the ",(0,e.mdx)("inlineCode",{parentName:"p"},"package.json")," file (in the ",(0,e.mdx)("inlineCode",{parentName:"p"},"web")," dir), and not in the ",(0,e.mdx)("inlineCode",{parentName:"p"},"workspace.jsonc")," file."),(0,e.mdx)("p",null,"Run the following to list the ",(0,e.mdx)("inlineCode",{parentName:"p"}
64,"header")," component's dependencies:"),(0,e.mdx)(o.BitShowHeader,{mdxType:"BitShowHeader"}),(0,e.mdx)("p",null,"The dependency version of ",(0,e.mdx)("inlineCode",{parentName:"p"},"classnames")," is identical to the one configures in the ",(0,e.mdx)("inlineCode",{parentName:"p"},"package.json")," file."),(0,e.mdx)(o.BitShowHeaderOutput,{mdxType:"BitShowHeaderOutput"}),(0,e.mdx)("p",null,"To enjoy the full capabilities provided by Bit, it is recommended to use Bit for ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/dependencies/dependency-installation"},"dependency installation"),`. 65Bit takes into consideration the `,(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/dependencies/dependency-policies"},"dependency config in the ",(0,e.mdx)("inlineCode",{parentName:"a"},"workspace.jsonc")," file")," as well as the project's already-existing ",(0,e.mdx)("inlineCode",{parentName:"p"},"package.json"),"."),(0,e.mdx)(o.BitInstall,{mdxType:"BitInstall"}),(0,e.mdx)("p",null,"If you choose to use your current npm client (npm, yarn, etc.) to install dependencies, please add the following as post-install scripts to your ",(0,e.mdx)("inlineCode",{parentName:"p"},"package.json"),":"),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-json"},`{ 66 "scripts": { 67 "postinstall": "bit import && bit compile && bit link" 68 } 69} 70`)),(0,e.mdx)("p",null,(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/getting-started/collaborate/importing-components"},(0,e.mdx)("inlineCode",{parentName:"a"},"bit import"))," imports the latest component versions from their remotes scopes (in case they were updated from a different workspace), ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/compiling/compiler-overview"},(0,e.mdx)("inlineCode",{parentName:"a"},"bit compile"))," compiles all components in the workspace, ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/workspace/component-links"},(0,e.mdx)("inlineCode",{parentName:"a"},"bit link"))," creates symlinks from the node_module directory to components in your workspace."),(0,e.mdx)("h2",null,"Collaboration"),(0,e.mdx)("p",null,"Learn how to snap, export and import components, and collaborate with your team in the ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/getting-started/collaborate/snap-component-changes"},"Collaboration")," section of the docs."),(0,e.mdx)("p",null,"Learn how to integrate Bit into your git workflow in the ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/workspace/collaborate-with-git"},"Collaborate on a workspace with git")," page."),(0,e.mdx)("p",null,"Learn how to install components in non-Bit projects in the ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/components/installing-components"},"Installing components")," page."))}x.__bit_component=a,x.isMDXComponent=!0},362452(h,t,d){var a={id:"teambit.blog-content/[email protected]",homepage:"https://bit.cloud/teambit/blog-content/componentize-projects",exported:!0},b=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ComponentizeProjects=void 0;var e=d(505973);Object.defineProperty(t,"ComponentizeProjects",{enumerable:!0,get:function(){return b(e).default}}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return b(e).default}})},98022(h,t,d){d.r(t),d.d(t,{default:()=>a});const a={pass:"componentize-projects_pass__g8VNK",yellow:"componentize-projects_yellow__Didkk"}},466069(h,t,d){h.exports=d.p+"static/images/a4ae0687fcf59686f1ca.png"},219207(h,t,d){h.exports=d.p+"static/images/c14eb5b97aa4ebc7ab96.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.