React Component Library With Microbundle

1. ✅ Intro

2. ✅ What is a Design System?

3. ✅ Building a basic Design System Library using React

4. ✅ Button as a Design System Component

5. Component Library With Microbundle

6. Component Library With Vite - JS Template

Setup

Step 1: Configure dependencies and build setup.

Update the package.json file with the content below.

Step 2: Build the Library

1. Run command in the package.json - npm run build

   

2. Command Output

   

3. Build output - dist

   

Step 3: Install the library from the local package

1. In the library folder do the following

   1. update the version in the package.json

   2. npm run build

   3. npm pack

      

2. In the App folder, where you need to test the library

   1. npm i <path of the library>/<package-name-version.tgz>
      eg: npm add ../design-system-react/design-system-react-1.0.7.tgz

      

   2. npm start - start the app

---

Check the complete code on the GitHub

Repo Link

---

1. ✅ Intro

2. ✅ What is a Design System?

3. ✅ Building a basic Design System Library using React

4. ✅ Button as a Design System Component

5. ✅ Component Library With Microbundle

6. Component Library With Vite - JS Template

I hope you are enjoying this series and learning something useful. Please help me improve my work by providing proper feedback via adding comments or do send me an email.