DEV Community: Md. Khalid Hossen

Git Branching Strategy

Md. Khalid Hossen — Sat, 26 Apr 2025 13:55:37 +0000

Overview

This document will provide information about the software development processes, both for local development as well as the branching, tagging and pipeline running for our CI / CD workflow. This will be a living document to be updated as processes evolve to suit our needs. The goal is to keep things as simple as possible for developers while maintaining security in and a high standard of software delivered.

GitHub Branching Strategy

Classic Gitflow
Gitflow is an alternative Git branching model that involves the use of feature branches and multiple primary branches. Under this model, developers create a feature branch and delay merging it to the main trunk branch until the feature is complete. These long-lived feature branches require more collaboration to merge and have a higher risk of deviating from the trunk branch. They can also introduce conflicting updates.

This workflow doesn’t add any new concepts or commands beyond what’s required for the Feature Branch Workflow. Instead, it assigns very specific roles to different branches and defines how and when they should interact. In addition to feature branches, it uses individual branches for preparing, maintaining, and recording releases. Also developers get to leverage all the benefits of the Feature Branch Workflow: pull requests, isolated experiments, and more efficient collaboration.

In addition, you may want to install a git-flow cli tool or create commands’ aliases.

Branching model
Our workflow uses two branches and tags to record the history of the project. The main branch stores the release history to the test environment, and the develop branch serves as an integration branch for features. Tags of the project store official releases history with proper versioning. Also, the presentation branch is used for the presentation environment and it is synced with the main branch.

Feature branches
Each new feature should reside in its own branch, which can be pushed to the central repository for backup/collaboration. But, instead of branching off of main, feature branches use develop as their parent branch. When the feature’s code and tests are complete, it gets merged back into develop. Developer starts working on code improvements, writing documentation, etc.

Feature branches are generally created off to the latest develop branch and should never interact directly with main.

Creating a feature branch with git (at this moment you may want to start creating aliases 🙂):

git checkout develop
git pull
git checkout -b feature/new_feature_name

When you’re done with the development on the feature and test code is implemented, the next step is to merge the feature/new_feature_name into develop in the GitLab and assign a person to review your code or ask someone for help by mentioning in the comments. Do not forget to mark your branch for deletion after successful merge and squash commits into one!

Encapsulating feature development also makes it possible to leverage pull requests, which are a way to initiate discussions around a branch. They give other developers the opportunity to sign off on a feature before it gets integrated into the official project. Or, if you get stuck in the middle of a feature, you can open a pull request asking for suggestions from your colleagues. The point is, pull requests make it incredibly easy for your team to comment on each other’s work.

Hotfix branches

Maintenance or “hotfix” branches are used to quickly patch production releases. Hotfix branches are a lot like release branches and feature branches except they're based on main instead of develop. This is the only branch that should fork directly off of main. As soon as the fix is complete, it should be merged into both main and develop (or the current release branch if fix has a medium or low priority), and main should be tagged with an updated version number.

When merging hotfix branches back into the main branch, the same procedure with the responsible person and reviewer has to be followed: deployment checklist, test prelive/live environments!

Having a dedicated line of development for bug fixes lets your team address issues without interrupting the rest of the workflow or waiting for the next release cycle. You can think of maintenance branches as ad hoc release branches that work directly with main. A hotfix branch can be created using the following methods:

git checkout main
git pull
git checkout -b hotfix/bug_name

Resolving conflicts

When many people are working on a project, conflicts may occasionally arise when merging the code of a new feature. If you follow the strategy described above for working with branches, the chance of unpredictable and complex conflicts is minimal. But can still happen in several cases: when merging many features into develop at once and merging hotfix branches into develop. As you will see, we won’t expect any other kind of conflicts in this strategy!

Let's look at conflict resolution in a simple example with several new features being worked on at the same time. We'll also see that this conflict resolution also works when we merge the hotfix branches.

You are working carefully with our branching strategy on a new Feature 3. Your co-workers just completed and merged Feature 1 and Feature 2 into develop, it is important that each feature was squashed into one commit in MR. For example, they developed small features using existing components and you had a bigger task on refactoring these components. You will probably have a conflict when you try to merge your changes into develop. To solve this problem and leave the Git history clean, you need to apply rebasing. In short, this functionality allows you to apply missed commits incrementally on top of your code. You can do it using following commands:

git checkout develop
git pull
git checkout feature/your-feature-name
git rebase develop

To resolve the conflict when merging hotfix branches, you just need to change the last checkout command with your hotfix branch name.

After executing these commands in our example, you had to resolve the merge conflicts from Feature 1, then from Feature 2 (or vica-versa, if Feature 2 was merged before Feature 1). Git will add merge commits into your branch history and then you can merge Feature 3 into develop without any conflicts! Moreover, our git history remains clean and easy to revert in extreme situations.

Difference between promise and observable

Md. Khalid Hossen — Sat, 01 Feb 2025 07:39:28 +0000

Promises and Observables are both used to handle asynchronous operations in JavaScript, but they have key differences in how they work and their capabilities. Here's a breakdown:

Promises

Definition: A Promise represents a single future value or the eventual completion (or failure) of an asynchronous operation.

Execution: A Promise is eager, meaning it executes immediately when created.

Value Handling: A Promise can only handle a single value or error. Once resolved or rejected, it cannot emit multiple values.

Chaining: You can chain .then() and .catch() methods to handle the resolved value or error.

Cancellation: Promises cannot be canceled once they are initiated.

Use Case: Ideal for one-time asynchronous operations like fetching data from an API.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data fetched!"), 1000);
});

promise.then((result) => console.log(result)); // Output: "Data fetched!"

Observables

Definition: An Observable represents a stream of values over time. It can emit multiple values, errors, or a completion signal.

Execution: Observables are lazy, meaning they only execute when you subscribe to them.

Value Handling: Observables can emit multiple values over time, making them suitable for handling streams of data (e.g., user input, WebSocket messages).

Chaining: You can use operators like map, filter, and merge to transform or combine streams.

Cancellation: Observables can be canceled using the unsubscribe() method, which stops the stream.

Use Case: Ideal for handling continuous or multiple asynchronous events, such as real-time data streams or user interactions.

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  subscriber.next("First value");
  setTimeout(() => subscriber.next("Second value"), 1000);
  setTimeout(() => subscriber.complete(), 2000);
});

const subscription = observable.subscribe({
  next: (value) => console.log(value), // Output: "First value", then "Second value"
  complete: () => console.log("Completed!"),
});

subscription.unsubscribe(); // Cancel the subscription

When to Use Which?

Use a Promise when you need to handle a single asynchronous operation (e.g., fetching data from an API).
Use an Observable when dealing with multiple values over time or continuous streams of data (e.g., real-time updates, user input events).

Observables are more powerful and flexible, but Promises are simpler and sufficient for many use cases.

implementing Spin the wheel and win price in react js

Md. Khalid Hossen — Tue, 28 Jan 2025 11:52:41 +0000

Have you ever wanted to create a fun and interactive spin wheel for your web app? Whether it’s for a game, a giveaway, or just to add some flair to your project, a spin wheel can be a great addition. In this post, I’ll walk you through how I built a customizable spin wheel component using React and the react-custom-roulette library.

What We’re Building

We’re creating a SpinWheel component that:

Displays a spinning wheel with customizable options (e.g., percentages like "25%", "30%", etc.).
Randomly selects a result when the wheel is spun.
Allows you to customize the wheel’s appearance (colors, fonts, etc.).
Provides a callback to handle the winning value when the wheel stops.

Code Walkthrough

Let’s dive into the code and see how it all comes together.

Dependencies

First, you’ll need to install the react-custom-roulette library:

yarn add react-custom-roulette

The SpinWheel Component

import { useState } from "react";
import { Wheel } from "react-custom-roulette";

const SpinWheel = ({ setWiningValue }) => {
  // Define the options for the wheel
  const data = [
    { option: "25%" },
    { option: "30%" },
    { option: "35%" },
    { option: "45%" },
    { option: "55%" },
    { option: "65%" },
    { option: "75%" },
  ];

  // State to control spinning and prize selection
  const [mustSpin, setMustSpin] = useState(false);
  const [prizeNumber, setPrizeNumber] = useState(0);

  // Handle the spin button click 
  const handleSpinClick = () => {
    const newPrizeNumber = Math.floor(Math.random() * data.length);
    setPrizeNumber(newPrizeNumber);
    setMustSpin(true);
  };

  return (
    <div className="relative">
      {/* Wheel Component */}
      <Wheel
        mustStartSpinning={mustSpin}
        prizeNumber={prizeNumber}
        data={data}
        fontSize={22}
        onStopSpinning={() => {
          setMustSpin(false);
          setWiningValue(data[prizeNumber].option); // Pass the winning value to the parent
        }}
        backgroundColors={[
          "#FEC60D",
          "#0496BB",
          "#E42220",
          "#C5037E",
          "#444F96",
          "#F38F1D",
          "#058F5B",
        ]}
        textColors={["#ffffff"]}
      />

      {/* Spin Button */}
      <div className="z-10 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
        <button
          onClick={handleSpinClick}
          className="bg-[#800080] text-white border-2 border-solid border-white w-[60px] h-[60px] rounded-full"
        >
          Spin
        </button>
      </div>
    </div>
  );
};

export default SpinWheel;

Key Features Explained

Customizable Options
The data array defines the options displayed on the wheel. Each option is an object with an option property (e.g., { option: "25%" }). You can easily modify this array to include any text or values you want.

Randomized Result
When the user clicks the "Spin" button, the handleSpinClick function selects a random index from the data array and sets it as the prizeNumber. The wheel then spins and stops at the selected option.This is the hack we only allow price 3 three options as winpriz

Callback for Winning Value
The setWiningValue prop is a callback function that receives the winning value when the wheel stops spinning. This allows you to handle the result in the parent component (e.g., display it, log it, etc.).

Customizable Appearance
The backgroundColors and textColors props let you customize the wheel’s appearance. You can also adjust the fontSize and other styles to match your design.

Important Note:

If you want to customized win prize you need to modified below functions according to requirements.Let's say i only allow first three items as win prize during that time you need to modified prize calculations.

const handleSpinClick = () => { const newPrizeNumber = Math.floor(Math.random() * data.length); setPrizeNumber(newPrizeNumber); setMustSpin(true); };

Implementing a QR Scanner and send request to backend using next js

Md. Khalid Hossen — Mon, 23 Dec 2024 07:32:04 +0000

In this article, I'll walk you through creating a QR scanner in Next.js using the @yudiel/react-qr-scanner library. We'll integrate it with basic functionalities like selecting devices, pausing scans, and customizing tracker overlays.

Why Use @yudiel/react-qr-scanner?

The @yudiel/react-qr-scanner library provides an easy-to-use interface for scanning various barcode and QR code formats. It supports custom overlays and multiple formats, making it versatile for different applications.

Prerequisites

Familiarity with React and Next.js.
A Next.js project setup.
Install the library:

yarn add @yudiel/react-qr-scanner

for local testing scanner you need to enabled below chrome flag:

chrome://flags/#usafely-treat-insecure-origin-as-secure

Note: go to chrome tab and then search usafely-treat-insecure-origin-as-secure and enabled.

Implementation

Here’s the complete code for the scanner page in Next.js.

ScannerPage Component

"use client";

import { useState } from "react";
import {
  Scanner,
  useDevices,
  outline,
  boundingBox,
  centerText,
} from "@yudiel/react-qr-scanner";

const styles = {
  container: {
    width: 400,
    margin: "auto",
  },
  controls: {
    marginBottom: 8,
  },
};

export default function ScannerPage() {
  const [deviceId, setDeviceId] = useState<string | undefined>(undefined);
  const [tracker, setTracker] = useState<string | undefined>("centerText");
  const [pause, setPause] = useState(false);

  const devices = useDevices();

  function getTracker() {
    switch (tracker) {
      case "outline":
        return outline;
      case "boundingBox":
        return boundingBox;
      case "centerText":
        return centerText;
      default:
        return undefined;
    }
  }

  const handleScan = async (data: string) => {
    setPause(true);
    try {
      const response = await fetch(
        `your-api-url?code=${encodeURIComponent(data)}`
      );
      const result = await response.json();

      if (response.ok && result.success) {
        alert("Success! Welcome to the conference.");
      } else {
        alert(result.message);
      }
    } catch (error: unknown) {
      console.log(error);
    } finally {
      setPause(false);
    }
  };

  return (
    <div>
      <div style={styles.controls}>
        <select onChange={(e) => setDeviceId(e.target.value)}>
          <option value={undefined}>Select a device</option>
          {devices.map((device, index) => (
            <option key={index} value={device.deviceId}>
              {device.label}
            </option>
          ))}
        </select>
        <select
          style={{ marginLeft: 5 }}
          onChange={(e) => setTracker(e.target.value)}
        >
          <option value="centerText">Center Text</option>
          <option value="outline">Outline</option>
          <option value="boundingBox">Bounding Box</option>
          <option value={undefined}>No Tracker</option>
        </select>
      </div>
      <Scanner
        formats={[
          "qr_code",
          "micro_qr_code",
          "rm_qr_code",
          "maxi_code",
          "pdf417",
          "aztec",
          "data_matrix",
          "matrix_codes",
          "dx_film_edge",
          "databar",
          "databar_expanded",
          "codabar",
          "code_39",
          "code_93",
          "code_128",
          "ean_8",
          "ean_13",
          "itf",
          "linear_codes",
          "upc_a",
          "upc_e",
        ]}
        constraints={{
          deviceId: deviceId,
        }}
        onScan={(detectedCodes) => {
          handleScan(detectedCodes[0].rawValue);
        }}
        onError={(error) => {
          console.log(`onError: ${error}'`);
        }}
        styles={{ container: { height: "400px", width: "350px" } }}
        components={{
          audio: true,
          onOff: true,
          torch: true,
          zoom: true,
          finder: true,
          tracker: getTracker(),
        }}
        allowMultiple={true}
        scanDelay={2000}
        paused={pause}
      />
    </div>
  );
}

Code Explanation

Device Selection: Use useDevices to fetch the list of available video input devices.
Custom Tracker: Provide visual guidance for users with overlays like outline, boundingBox, and centerText.
Scan Handling: Pause the scanner after detecting a QR code, and fetch API data for validation.
Scanner Configuration: Customize scanner formats, overlays, and multiple QR codes handling.

Added rate limit in api enpoint in node express js

Md. Khalid Hossen — Wed, 27 Nov 2024 16:18:23 +0000

Rate Limiting in Express: Protect Your API from Brute Force Attacks

Rate limiting is an essential feature to safeguard your API against brute force attacks. It helps control the number of requests a user can make within a specific time frame. Implementing rate limiting in an Express application is simple, thanks to the express-rate-limit package.

At first you need to install: yarn add express-rate-limit

Then create a middleware where you can limit your api request:

import rateLimit from 'express-rate-limit'

export const rateLimiter = rateLimit({
  windowMs: 60 * 1000,
  max: 100,
  message: 'You have exceeded the 100 requests in 1 min limit!',
  standardHeaders: true,
  legacyHeaders: false,
})

In this example, users are allowed up to 100 requests per minute. If they exceed this limit, they’ll receive a message stating the limit has been reached. also include rate limit info in the RateLimit-* headers and disable X-RateLimit-* headers

Then you need to add this middleware into **index file:**

import express from 'express';
import { rateLimiter } from '@/middlewares/rateLimit';

const app = express();

// Apply the rate limiter middleware to all routes
app.use(rateLimiter);

// Your other middleware and routes go here...

Conclusion
With these steps, you’ve successfully added rate limiting to your Express application. This feature helps ensure your API remains protected from abuse while maintaining a smooth experience for legitimate users.

How to become backend node js engineers

Md. Khalid Hossen — Wed, 27 Nov 2024 04:23:22 +0000

Multipart-from-data/ file send to backend as json file using axios.

Md. Khalid Hossen — Wed, 20 Nov 2024 16:45:07 +0000

can i send multipart/form-data as json file without converting formdata before sending post request to backend.
Yes, you can do that using axios instance you can send post request without convert your object to form data. After axios versions v0.27.0 automatic your json data as multipart form-data you do not need to take extra pressure for sending binary data.

You may check my implementaions below where i upload file as json objects.here, in data sections thumbnail is a file type data.

import axios from 'axios';

const postJsonFile = async () => {
  const url = 'https://example.com/api/upload'; 

const data = {
    "title": "Title",
    "thumbnail":  { File {name: 'bkash.jpeg', lastModified: 
        1683520805146, lastModifiedDate: Mon May 08 2023 10:40:05 
        GMT+0600 (Bangladesh Standard Time), webkitRelativePath: 
        '', size: 43133, …}
        length: 
        1[[Prototype]]
        : 
        FileList
      }
    ,
    "description": "<p>Descriptions</p>",
    "skill_level": [
        "BEGINNER",
        "ADVANCE"
    ],
    "demo_videos": [
        "https://youtu.be/PsaXRgCibfU"
    ]
}

  try {
    const response = await axios.post(url, data, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
     formSerializer: {
        // Ensures array indices are included in serialized keys
        indexes: true, 
      },
    });

    console.log('Response:', response.data);
  } catch (error) {
    console.error('Error:', error.response?.data || error.message);
  }
};

postJsonFile();

Note: you may not need to add formSerializer but if your backend written on python during that time you need to serialize data from frontend otherwise it will not works properly Or you may need to added extra code into your backend.

Learn more you may check:

axios-http.com

Passing pros child to parent component in react typescript

Md. Khalid Hossen — Tue, 19 Nov 2024 16:11:27 +0000

Using simple hacks you can pass data from child to parent.though it is very simple but it have a lot of use case. It mostly use for creating core component. Let's say you want to create select component where you want to pass Custom items during that time it is very helpful. There is lot of case you need it.

I have use simple hacked to pass data child to parent you may check my implementaitons below:

import React from "react";

// Define the type for the options
type Option = {
  label: string;
  value: string;
};

// Props for the ChildClass component
interface ChildClassProps {
  // A function prop that takes an `Option` and returns a React node
  customItems: (option: Option) => React.ReactNode;
}

const ParentClass: React.FC = () => {
  return (
    <ChildClass
      customItems={(props: Option) => (
        <div>
          <div>{props.value}</div>
        </div>
      )}
    />
  );
};

const ChildClass: React.FC<ChildClassProps> = ({ customItems }) => {
  // Options array with objects that match the `Option` type
  const options: Option[] = [
    { label: "green", value: "green" },
    { label: "blue", value: "blue" },
    { label: "red", value: "red" },
    { label: "yellow", value: "yellow" },
  ];

  return (
    <div>
      <span>Child class</span>
      {/* Iterate over the options and call `customItems` to render the custom content */}
      {options.map((item, index) => (
        <div key={index}>
          {customItems(item)}
        </div>
      ))}
    </div>
  );
};

export default ParentClass;

ParentClass Component:

The ParentClass component passes a customItems function as a prop to ChildClass. This function specifies how each option should be rendered.here you can pass your custom component.

ChildClass Component:

The ChildClass component iterates over the options array and calls the customItems function for each option. This allows ParentClass to define custom rendering for the options.

Configure tanstack router into vite project with authenticate routes, active routes.

Md. Khalid Hossen — Sun, 17 Nov 2024 08:39:02 +0000

Tanstack router is a file based routing systems like next js. routing is pretty easy to configure but you need to do it carefully. Otherwise, it will kill your energy. Enough talk lets start:
you need to install: yarn add @tanstack/react-router
and you need to add dev dependency: yarn add -D @tanstack/router-devtools @tanstack/router-plugin

At 1st you need to configure vite and make it confortable with the projects. please make perfectly otherwise layout systems may not work as it should. Navigate vite.config.ts file and flow my code below:

import {TanStackRouterVite} from '@tanstack/router-plugin/vite'

import this into vite.config.ts file then add plugin after react():
TanStackRouterVite({ routeToken: 'layout', }),

Now, you need change your main.tsx file:
here i have create with context and pass my authentications where for authenticated routes and i aslo create hooks with zustand for my authentications.

import {StrictMode} from 'react'
import ReactDOM from 'react-dom/client'
import {createRouter, RouterProvider} from '@tanstack/react-router'


import './index.css'
import {routeTree} from './routeTree.gen'
import useAuthToken from './hooks/useAuthToken'


const rootElement = document.getElementById('root')!

const router = createRouter({
  routeTree,
  context: {authentication: undefined!},
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}


function App() {
  const authentication = useAuthToken()
  return (
        <RouterProvider router={router} context={{authentication, canAccessPage}} />
  )
}

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <App />
    </StrictMode>,
  )
}

useAuthtoke hooks::

import {create} from 'zustand'
import {persist} from 'zustand/middleware'

type State = {
  authToken?: string
}

type Action = {
  setAuthToken: (token: string) => void
  removeAuthToken: () => void
}

export type AuthTokenProps = State & Action


const initialState: State = {
  authToken: undefined,
}

const useAuthToken = create<AuthTokenProps>()(
  persist(
    set => ({
      ...initialState,
      setAuthToken: token => {
        set({authToken: token})
      },
      removeAuthToken: () => {
        set(initialState)
      },
    }),
    {
      name: 'auth',
    },
  ),
)

export default useAuthToken

Now, you need to configure your __root.tsx file you need to link context form here using createRootRouteWithContext becuase you need your context for authenticate routes :

import * as React from 'react'
import {Outlet, createRootRouteWithContext} from '@tanstack/react-router'

import {AuthTokenProps} from '@/hooks/useAuthToken'

type RouterContext = {
  authentication: AuthTokenProps
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => (
    <React.Fragment>
      <Outlet />
    </React.Fragment>
  ),
})

Since we already know tanstack router is allow file based routing we need to create One file and One folder under routes folder. Folder and file structer will be like this:

*routes
| __root.tsx
| _authenticated.tsx
| _authenticated
| dashboard.tsx
| login.tsx
*
Note: here _authenticated folder hold your authenticated routes and others routes will be your unauthenticated routes. here login is unauthenticate route and dashboard will be your authenticate route.

Now you need to configure your layout file which is _authenticated.tsx

import React from 'react'
import {createFileRoute, Outlet, redirect} from '@tanstack/react-router'

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: async ({context}) => {
    const {authToken} = context.authentication
    if (!authToken) {
      throw redirect({to: '/login'})
    }
  },
  component: () => (
      <React.Fragment>
          <div className='flex flex-1 h-[90vh] flex-col gap-4 p-4 pt-0 top-14 absolute w-full'>
            <Outlet />
          </div>
      </React.Fragment>
  ),
})

Note: on beforeLoad is callback functions where you can get context which you have set early if authtoken is available during that time you can accesss dashboard otherwise it will redirect to login page.

Oh one things don't forget to add authtoken after login.

export const Route = createFileRoute('/login/')({
  beforeLoad: async ({context}) => {
    const {authToken} = context.authentication
    if (authToken) throw redirect({to: '/dashboard'})
  },
  component: LoginForm,
})
--------------------- after login in successfully you need to setAuthtoken and router invalidate ---------------------
    {
      setAuthToken(access) // here you will get 
      router.invalidate()
    }

Now actives routes link for active link:

 <Link 
 className='py-3 [&.active]:font-bold [&.active]:text-sky-500'
 to={subItem.url}
 activeOptions={{exact: true, includeSearch: false}}>
  Dashbaord
</Link>

here you need to pass exact: true for exact path match if you have search query of that routes during that time you need to pass includeSearch: false . Otherwise when you have added query in your path during that time active link will be deactiv because you have pass exact true.

Absoulate import in node express typescript project configrations.

Md. Khalid Hossen — Sun, 03 Nov 2024 15:06:08 +0000

If you want to enabled typescript express project for absoulate import and want remove ../.. from entire project this guide for you:

at first you need to configure tsconfig.json file where you need to configure absoulate path. You can check below file:


{
    "compilerOptions": {
      "target": "ES2020",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "outDir": "./dist",
      "rootDir": "./src",
      "baseUrl": ".",
      "paths": {
        "*": ["node_modules/*"],
        "@/*": ["src/*"], 
      }
    },
    "include": ["./env.d.ts", "src/**/*.ts"],
    "exclude": ["node_modules"]
  }

Note:
here i have used path as @/* and src is my base url

Then you need to add another library for configure this, tsconfig-paths it and chage your running script then everything will be fine.

script should be like this:

"scripts": {
    "dev": "nodemon --watch src --exec ts-node --require tsconfig-paths/register --transpile-only src/main.ts",
  },

Configure Eslint, Prettier and show eslint warning into running console vite react typescript project

Md. Khalid Hossen — Thu, 06 Jun 2024 19:14:23 +0000

Creating a React application with Vite has become the preferred way over using create-react-app due to its faster and simpler development environment.Although vite projects by default offer eslint support but it is very simple setup which is not very helpful so far.

In this guide this i will go through config eslint with prettier groups import ad show eslint warning into console in react + typescript which is create by vite.

Assuming you already have your React Vite project set up (using npm create vite@latest), the first step is to install Vitest:

Setting up Vite eslint with yarn install:

yarn add eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react-refresh prettier typescript-eslint

For showing eslint and typescript error and warning into console we need to add another library below:

yarn add vite-plugin-checker

Now time to update tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "*": ["*"]
    },
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "vite.config.ts"],
  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts"
  ],
  "references": [{"path": "./tsconfig.node.json"}]
}

Note: Here, i added basurl as src and and path accept whatever i have set in vite.config.ts. For example, I have a folder name component and @core folder now i want to import it as same group during that time it will be helpful.

Enough talk let's configure vite.config.ts:


import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
  ],
  resolve: {
    alias: {
      images: '/src/images',
      component: '/src/component',
      '@core': '/src/@core',
    },
  },
})

now we need to update .eslintrc.cjs file:

module.exports = {
  root: true,
  env: {browser: true, es2020: true},
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh', 'import', 'prettier', 'react', '@typescript-eslint'],
  rules: {
    'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
    'no-console': 'warn',
    'arrow-body-style': ['warn', 'as-needed'],
    'no-empty-function': 'error',
    quotes: ['warn', 'single', {avoidEscape: true}],
    'prefer-const': 'off',
    'no-dupe-keys': 'warn',
    'react/react-in-jsx-scope': ['off'],
    'no-duplicate-imports': ['warn'],
    '@typescript-eslint/no-unused-vars': ['warn'],
    '@typescript-eslint/no-explicit-any': ['error'],
    'valid-typeof': ['error', {requireStringLiterals: true}],
    'prettier/prettier': ['warn'],
    'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
        'newlines-between': 'always',
        pathGroups: [
          {
            pattern: '@core/**',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['internal'],
      },
    ],
    'import/no-named-as-default-member': ['off'],
    'import/no-anonymous-default-export': [
      'error',
      {
        allowArray: false,
        allowArrowFunction: false,
        allowAnonymousClass: false,
        allowAnonymousFunction: false,
        allowCallExpression: true,
        allowNew: false,
        allowLiteral: false,
        allowObject: false,
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      typescript: {
        // @alwaysTryTypes always try to resolve types under `<root>@types`
        // directory even it doesn't contain any source code, like `@types/unist`
        alwaysTryTypes: true,
        project: './tsconfig.json',
        extensions: ['.ts', '.tsx'],
      },
    },
  },
}

We need to update .prettier.cjs file as well:

module.exports = {
  semi: false,
  singleQuote: true,
  jsxSingleQuote: true,
  bracketSpacing: false,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  useTabs: false,
  tabWidth: 2,
  printWidth: 100,
  trailingCommas: {
    array: true,
    object: true,
    function: false,
  },
}

Import as a group is responsible for the below eslint rules:

'import/order': [ 'warn', { groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']], 'newlines-between': 'always', pathGroups: [ { pattern: '@core/**', group: 'internal', position: 'after', }, ], pathGroupsExcludedImportTypes: ['internal'], }, ],

here we need to specifics the group here which group i want. if your import group is not setup correctly this will show you warning into your console.

We may check this reference from github: https://github.com/khalid7487/study/tree/master/React/vites-config-eslint

Matching search Text become small like google suggestions in Js

Md. Khalid Hossen — Mon, 21 Nov 2022 15:04:52 +0000

Making pain Text match data normal text and others become bold

 let term = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,';
      let search1 = 'Lorem';
      let parts = term.split(search);
      console.log("parts", parts)
      return parts.map((item, i) => (
        <>{item && <strong>{item}</strong>}{(i !== parts.length - 1) ? search1 : null}</>
      ))

*Array of Array match Make suggest text bold matching with search text *

let termData = [
       { "title": "apple orange banana" },
       { "title": "upload app koro na kn???" },
        { "title": "range ban apple ana" },
        { "title": "Hello world" },
        { "title": "Hello no world" },
    ];
    let search = 'app';
    const matchData = termData?.filter((product) => product.title.toLowerCase().includes(search.toLowerCase()));

    let newArray = [];

    matchData.map(item => {
        return newArray.push(item.title.split(search))
    })

    return newArray.map((item, index) => (
        <>
            {item.map((second, i) => (
                <span onClick={() => alert(`"hey MR.", ${index}`)}>{second && <strong>{second}</strong>}{(i !== item.length - 1) ? search : null}</span>
            ))}
            <br />
        </>
    ))