Npm-components-fe NPM

Problem that caused this project

Datability Team [frontend] every time they start a project they have a page that has a collection of components to use within the project , and then there's a components called Base - components that's not complicated. But when doing this in many projects , and the Base - components is edited , it must be followed up and edited in every project for [frontend] , causing difficulty and the information is not consistent

Nuk Supagorn 😎 said :

It would be very helpful if we could make the frontend components we use more flexible. It becomes a npm package that can be downloaded from the same place
Because if corrections occur, they will be able Can be edited in one spot

About the project

Building and publishing frontend components to Node Package Manager(NPM) easy to share and reuse code useful in projects , this article will guide you through the steps of building and publishing NPM package.

Prerequisites

NPM account
Docker
NodeJS
GitHub for clone , push and others
Basic understanding of JavaScript / TypeScript

Project structure

    .
    ├── dist                          # compiled folder for `publish` to npm
    ├── node_modules                  # package to use in project
    ├── public                        # keep index.html for react start
    ├── src                           # important folder
    │   ├── components                # components folder for usage
    │   │   ├── Button                # example `Button` component
    │   │   │   ├── index.scss # - style css
    │   │   │   ├── index.tsx         # - button usage
    │   │   ├── DatePicker            # example `DatePicker` component
    │   │   │   ├── index.scss # - style css
    │   │   │   ├── index.tsx         # - button usage
    │   │   ├── ...                   # other components will append here
    │   │   ├── index.ts              # file to import all components and export
    │   ├── App.tsx                   # calling component to display
    │   └── index.tsx                 # calling component to display
    ├── docker-compose.yml            # docker compose file to start project
    ├── package.json                  # package.json to script command
    ├── tsconfig.json                 # tsconfig.json to setting script command
    └──

📢 Getting started - `Building & Publishing` NPM Package

1.) Clone the repo

git clone git@github.com:datability-th/npm-components-fe.git

2.) Open 2 terminals

2.1 ) Terminal 1 : keep running npm run start

$ docker compose up

2.2 ) Terminal 2 : bash in to npm-fe container for use npm & script command

$ sudo docker exec -it npm-fe bash

3.) Register new component in

    ├── src                           # important folder
    │   ├── components                # components folder for usage
    │   │   ├── Button                # example `Button` component
    │   │   │   ├── index.scss # - style css
    │   │   │   ├── index.tsx         # - button usage
    │   │   ├── DatePicker            # example `DatePicker` component
    │   │   │   ├── index.scss # - style css
    │   │   │   ├── index.tsx         # - button usage
    │   │   ├── 📌  # <= Declare here & register in `index.ts` below
    │   │   ├── index.ts              # file to import all components and export

4.) Use command to create compiled folder dist to publish to NPM

npm run build

5.) Before publish to NPM you need to login in command

Login into Gmail : databilitynpm@gmail.com , Password ask (Top & P'Nuk) 📢
Promp command below npm login . . . it will return url to replace digit code
Open Gmail copy digit code and replace in website
And press enter , command will say ( Logged in ✔ )

npm login

6.) Use command to publish NPM package

npm publish

7.) Let check in https://www.npmjs.com/settings/databilitynpm/packages

⚙ Getting started - `Using` NPM Package

1.) Download NPM Package

npm i npm-components-fe

2.) Calling tools from package that we did

import './App.css';
import { All, Button, DatePicker } from 'npm-components-fe' // 👈

function App() {
  return (
    <div className="App">
      <p>This is the result after calling component from npm </p>

      <All /> // 👈
    </div>
  );
}

export default App;