DEV Community: Hidayt Rahman

A Modern Alternative to Create React App

Hidayt Rahman — Fri, 14 Mar 2025 12:26:08 +0000

Introducing `template-rtw`: A Modern Alternative to Create React App

With the deprecation of Create React App (CRA), many developers are left searching for a reliable, modern, and customizable way to set up React projects. Enter template-rtw, a GitHub template repository designed to provide a production-ready, fully customizable React starter kit using React 19, TypeScript 5, and Webpack 5.

Whether you're building a small application or a large-scale project, this template is here to save you time and effort, so you can focus on writing great code instead of configuring your build tools.

Why I Built This

CRA was a game-changer for React developers, offering a simple way to set up projects without worrying about configuration. However, with its deprecation, there’s a growing need for a modern alternative that balances simplicity with flexibility.

I created template-RTW to address this gap. It’s a zero-config starter that’s easy to use but fully customizable for advanced needs. Whether you're a beginner or an experienced developer, this template provides a solid foundation for your React projects.

Key Features

Here’s what makes template-rtw stand out:

React 19: Leverage the latest features and improvements in React.
TypeScript 5: Write type-safe, scalable, and maintainable code.
Webpack 5: Optimized build and bundling for modern web development.
MUI 6: Pre-integrated Material-UI for beautiful, responsive designs.
React Router v7: Seamless routing out of the box.
Axios Integration: Ready-to-use services for making API calls.
Hot Reloading: Faster development with a smooth dev server experience.
Production-Ready Build: Optimized configuration for deployment.

Getting Started

Using template-rtw is simple:

Click the "Use this template" button on the GitHub repository to create your own project.
Clone your new repository:

   git clone https://github.com/hidaytrahman/template-rtw.git

Final Thoughts

The deprecation of CRA has left a void in the React ecosystem, but it also opens the door for better, more flexible solutions. template-rtw is my attempt to fill that void and provide developers with a modern, customizable, and production-ready alternative.

Give it a try, and let me know what you think! Happy coding! 🚀

Serve localhost with custom domain

Hidayt Rahman — Sat, 10 Feb 2024 09:26:11 +0000

We are going to use your preferred custom domain in local instead of the dull localhost URL on our local system.

How?

For this example, I am using the domain name webtechpie.io, but you can use your own.

Open the hosts file in your machine.

For Window:
To update the hosts file in Windows, you can follow these steps:

Press the Windows key
Type Notepad in the search field
In the search results, right-click Notepad and select Run as - administrator
Open the hosts file at C:\Windows\System32\Drivers\etc\hosts
Make the necessary changes to the file
Select File > Save to save your changes

For Mac:
Open terminal and run the command below

$ sudo nano /private/etc/hosts

And update the hosts file, replace the domain name with your domain.

Example

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       webtechpie.io
255.255.255.255 broadcasthost
::1             localhost
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section

# This entry was appended by Docker Desktop because `localhost` did not resolve
# to a list of addresses which included 127.0.0.1. This can happen due to a bug
# in the macOS migration assistant, or possibly because another tool has
# corrupted the file.
127.0.0.1       localhost

Save the file and restart the machine.

Try to access the localhost app by your domain, in my case it will be webtechpie.io

Do not forget to add the port :PORT
http://YOUR_DOMAIN:PORT

http://webtechpie.io:8080

It should start running the app with the custom domain.

Happy.Coding :)

Prevent app crashes with ExpressJS

Hidayt Rahman — Thu, 14 Sep 2023 09:57:22 +0000

Most annoying experience of any app when it get crashed so basically it blocks the entire operation in expressJS

Lets fix this using the middleware, so even if the app has some issue will work continually and wont impact user on other part of the app

// An error handling middleware
app.use(function (err, req, res, next) {
  console.log(err.message);
  res.status(500);
  res.json({ message: "Oops, something went wrong :(", error: err.message });
});

Thats it!

Let me know if you have any other suggestions :)

Manual Trigger on Github action - #2

Hidayt Rahman — Mon, 03 Jul 2023 15:15:12 +0000

Intro

In the Github action session, In this article we will be learning about Manual Trigger action for the specific task.

Why we need this?
We often require some short of actions that we only do when we need any specific action.
For example, you wanna release your app from dev env to qa env after fixing a new bug.
In this case we can use Manual trigger that will deploy app from dev to qa once we trigger the action.

Also Read
In the last article We learnt Greet on first PR and Issue

How can we do that?
We can achieve the manual trigger feature using Workflow Dispatch It enables a workflow to be triggered manually, you need to configure the workflow_dispatch event. You can manually trigger a workflow run using the GitHub API, GitHub CLI, or GitHub browser interface

Lets create a brand new workflow under the .github/workflows/manualTrigger.yml

Paste the below code and push your changes to the main branch.

name: "Workflow Manual Trigger"

on: 
  workflow_dispatch:
    inputs:
      author:
       description: 'Choose author'
       required: true
       type: choice
       options:
                - admin
                - editor
                - contributor
      location:
        description: 'Choose Location'     
        required: true
        default: 'in'
        options:
                - us
                - uk
                - in



jobs:
  printInputs:
    runs-on: ubuntu-latest
    steps:
    - run: |
        echo "Author : ${{ github.event.inputs.author }}"
        echo "Location : ${{ github.event.inputs.location }}"

Now go the actions tab and select Workflow Manual Trigger

Click on the Run Workflow button

Choose the fields.

After selecting the specific field click on green Run workflow button

It will start running the workflow. Once done you can verify the actions while opening the logs.

You can see we have the selected data in the logs.

Feel free to utilise the action based on your requirement.

Happy Action!

Greet to the new PR and issue creator in Github Action - #1

Hidayt Rahman — Thu, 25 May 2023 16:45:22 +0000

Github action greeting

Github action is the great tool to automate the manual stuff for your project.

What

The below action will greet to the contributor who will create first Pull Request and also the first issue.

How?

Create a folder .github/workflows in the root folder

create a new workflow called greeting.yml inside the .github/workflows/ directory.

Copy the below code and paste in the greeting.yml

name: Greetings

on: [pull_request_target, issues]

jobs:
  greetings:
    runs-on: ubuntu-latest
    permissions:
      issue: write
      pull-requests: write
    steps:
      - uses: actions/first-interaction@v1
        with:
          repo-token: ${{secrets.GITHUB_TOKEN}}
          issue-message: "We appreciate you pointing us to the problem, and as soon as time allows, we will look into it. Thank you!"
          pr-message: "We appreciate you creating your first pull request and look forward to reviewing your future contributions."

Push the file in the main branch and try to create a first issue and first Pull request.

This will send a greeting message in the comment of the PR and issue.

Happy Automation!

Handle protected page routes in NextJS using NextAuth

Hidayt Rahman — Tue, 25 Apr 2023 13:44:39 +0000

For this article, we will use the middleware technique.

To use this functionality, you must have at least NextAuth.js 4.2.0 and Next.js 12 installed.

Configuration

Let's configure the server by adding a new environment variable to the .env.local file.

NEXTAUTH_SECRET=addAnythingYouLike

Create a Middleware

Create a file named middleware.js or .tsx in the src folder.

Note: if you don't have src folder create the middleware.js on the root folder

Lets add code for middleware

Protect all routes
Use the piece of code below to make all pages protected.

export { default } from "next-auth/middleware";

Protect selective routes
Lets protect profile and posts route with the help of matcher. You can put the route based on your requirements

export { default } from "next-auth/middleware";

export const config = { matcher: ["/profile", "/posts"] };

Protect routes inside directory
Lets protect all routes inside dashboard folder.

export { default } from "next-auth/middleware";

export const config = { matcher: ["/dashboard/", "/dashboard/:path*"] };

Read more about matcher and NextAuth Middleware

Thats It!

Happy Coding!

Top 9 JavaScript Flavours

Hidayt Rahman — Wed, 01 Mar 2023 06:33:33 +0000

1. TypeScript

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

https://www.typescriptlang.org/

2. Reason

Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems.

https://reasonml.github.io/

3. Flow

FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.
https://flow.org/

4. Elm

Elm uses type inference to detect corner cases and give friendly hints. ... benchmarks show that this helps us generate particularly fast JavaScript code.

https://elm-lang.org/

5. ClojureScript

Clojure is a dynamic, general-purpose programming language supporting interactive development. Clojure is a functional programming language featuring a rich set of immutable, persistent data structures. As a dialect of Lisp, it has a code-as-data philosophy and a powerful macro system.

https://clojurescript.org/

6. PureScript

A strongly-typed functional programming language that compiles to JavaScript

https://www.purescript.org/

7. CoffeeScript

CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart.

https://coffeescript.org/

8. ReScript

ReScript is a robustly typed language that compiles to efficient and human-readable JavaScript.
https://rescript-lang.org/

9. Imba

Imba is a Web programming language that's fast in two ways: Imba's time-saving syntax with built-in tags and styles results in less typing and switching files so you can build things fast.
https://imba.io/

Which one is your favorite ?

Outstanding Monorepo Tools

Hidayt Rahman — Thu, 16 Feb 2023 17:10:11 +0000

A monorepo is a code repository with version control that houses several projects. Although they could be connected, these initiatives are frequently conceptually distinct and managed by several teams. Some businesses keep all of their source code in a single, public repository.
https://monorepo.tools/

These are Eight widely used monorepo utilities.

1. Rush

Rush: a scalable monorepo manager for the web

https://rushjs.io/

2. Turborepo

Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.

https://turbo.build/

3. Yarn Workspaces

Workspaces are a new way to set up your package architecture that's available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass
Yarn Workspaces

4. Yalc

yalc acts as very simple local repository for your locally developed packages that you want to share across your local environment
Yalc

5. Lerna

Lerna is a tool for managing JavaScript projects with multiple packages. Lerna manages monorepos, which can hold projects containing multiple packages within itself. Monorepos can be challenging to manage because sequential builds and publishing individual packages take a long time.

https://lerna.js.org/

6. npm Workspaces

Workspaces is a generic term that refers to the set of features in the npm cli that provides support to managing multiple packages from your local file system from within a singular top-level, root package.

NPM Workspaces

7. pnpm

What is PNPM? PNPM is an alternative package manager for Node. js which stands for “Performant NPM”. The main purpose of PNPM is to hold all the packages at a global (centralized) store and use them if needed by other projects too by creating hard links to it.

https://pnpm.io/

8. Nx

Nx is a framework that allows you to architect, test, and build your project at any scale with the most popular modern Front-end frameworks like React and Angular, and Back-end ones like NestJs or Express. To make this possible, Nx comes shipped with a large toolset that simplifies your Monorepo management.

https://nx.dev/

Deploy Vite React App on Github

Hidayt Rahman — Tue, 07 Feb 2023 18:40:19 +0000

Follow two step to publish

Step: 1

Configure repo in vite.config.js

Set the base in vite.config.js.

If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to "/".

If you are deploying to https://<USERNAME>.github.io/<YOUR_REPO_NAME>/, for example your repository is at https://github.com/hidaytrahman/chepo, then set base to "/chepo/".

Example:

export default defineConfig({
  base: "/<YOUR_REPO_NAME>/", // add the base as repo name as "/yourRepoName/"
  plugins: [react()],
});

Step: 2

Install and setup gh-pages

Now, Install the gh-pages package

yarn add -D gh-pages or npm install gh-pages --save-dev

Add below line in the package.json file

 "homepage": "https://<USERNAME>.github.io/<YOUR_REPO_NAME>/",

Also add these beautiful scripts

 "predeploy": "npm run build",
 "deploy": "gh-pages -d dist"

we are done with the configuration, let's run the command to deploy.

yarn run deploy

npm run deploy

Yayyy!!! see it in action in 2-3 minutes.

Rendering Frameworks JavaScript

Hidayt Rahman — Tue, 31 Jan 2023 10:18:31 +0000

Next.js

Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites
https://nextjs.org/

Nuxt

Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js. The framework is advertised as a "Meta-framework for universal applications"
https://nuxtjs.org/

Gatsby

Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX, images, and numerous Content Management Systems such as WordPress, Drupal and more
https://www.gatsbyjs.com/

Remix

Focused on web standards and modern web app UX, you’re simply going to build better websites
https://remix.run/

Astro

Astro Islands represent a leading paradigm shift for frontend web architecture. Astro extracts your UI into smaller, isolated components on the page. Unused JavaScript is replaced with lightweight HTML, guaranteeing faster loads and time-to-interactive (TTI).
https://astro.build/

Eleventy

Eleventy, a simpler static site generator.
https://www.11ty.dev/

SvelteKit

While Svelte handles code that runs in the browser — like interactivity and reactivity — SvelteKit gives you infrastructure for the server hosting your app. SvelteKit will provide routing, layouts, static-site generation, API endpoints, and other app features that can only run on a server
https://kit.svelte.dev/

Docusaurus

Docusaurus is a tool designed to make it easy for teams to publish documentation websites without having to worry about the infrastructure and design details.
https://docusaurus.io/

flat array from the multi dimensional zig-zag array

Hidayt Rahman — Thu, 29 Dec 2022 09:15:39 +0000

To flatten a multi-dimensional zig-zag array in JavaScript, you can use a combination of loops and array manipulation techniques.

Here is an example of how you might flatten a multi-dimensional zig-zag array:

const array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

// Flatten the array using a loop
const flatArray = [];
for (const subArray of array) {
  flatArray.push(...subArray);
}

console.log(flatArray); // Outputs: [1, 2, 3, 4, 5, 6, 7, 8, 9]

In this example, the flatArray array is initialized as an empty array. A loop is used to iterate over the elements of the array variable, which represents the multi-dimensional zig-zag array. For each element, the spread operator (...) is used to add the elements of the subarray to the flatArray array.

This will result in a flattened array that contains all of the elements of the original array in the order they appear.

Alternatively, you can use the Array.prototype.flat method to flatten the array, as follows:

const array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flatArray = array.flat();
console.log(flatArray); // Outputs: [1, 2, 3, 4, 5, 6, 7, 8, 9]

The flat method will return a new array that is one level deeper than the input array. To flatten a multi-dimensional array with more than one level of nesting, you can call the flat method multiple times or pass it a depth parameter. For example:

const array = [[1, 2, 3], [4, [5, 6], 7], [8, 9]];
const flatArray = array.flat(2);
console.log(flatArray); // Outputs: [1, 2, 3, 4, 5, 6, 7, 8, 9]

This will result in a flattened array that contains all of the elements of the original array in the order they appear.

Strict object type using Proxy in JavaScript

Hidayt Rahman — Fri, 16 Dec 2022 15:12:08 +0000

Javascript object field can be overwrited by any data types. Can we strict it? yes of course we can strict it with the help of Proxy.

Example

We have employee object which has some related keys

const employee = {
 name: "hidayt rahman",
 salary: 12000,
 isActive: true,
}

We can overwrite the value with any data types.
for example we can set salary with string value and JS will not complain any error because this is how it works.

employee.salary = "12000" // it will overwrite number with string value

Sadly, This is not weird for javascript, but its buggy if we are not using Typescript, So here is the solution in JS itself using Proxy

lets create a target object where we will be using set to configure the object keys according to the requirements.

We will restrict data type for salary and name field that will only accept valid data type.

Name will only accept string
Salary will not accept non integer data


const target = {
    set(target, prop, value) {

        if (prop in target) {
            if (prop === 'name' && typeof value !== 'string') {
                throw new Error(`Type '${typeof value}' is not assignable to type 'string' for '${prop}' field.`);

            }

            if (prop === 'salary' && typeof value !== 'number') {
                throw new Error(`Type '${typeof value}' is not assignable to type 'number' for '${prop}' field.`);

            }

             return target[prop] = value;

        } else {
            throw new Error(`'${prop}' is not a valid prop`)
        }
    }

}

const strictedEmployee = new Proxy(employee, target);

Now if we use the strictedEmployee proxy object and set salary with non numeric data type, it will throw an error.

strictedEmployee.salary = "2000";

Uncaught Error: Type 'string' is not assignable to type 'number' for 'salary' field.

DEV Community: Hidayt Rahman

A Modern Alternative to Create React App

Introducing template-rtw: A Modern Alternative to Create React App

Why I Built This

Key Features

Getting Started

Final Thoughts

Serve localhost with custom domain

How?

Prevent app crashes with ExpressJS

Manual Trigger on Github action - #2

Intro

Greet to the new PR and issue creator in Github Action - #1

Github action greeting

What

How?

Handle protected page routes in NextJS using NextAuth

Configuration

Create a Middleware

Top 9 JavaScript Flavours

1. TypeScript

2. Reason

3. Flow

4. Elm

5. ClojureScript

6. PureScript

7. CoffeeScript

8. ReScript

9. Imba

Outstanding Monorepo Tools

1. Rush

2. Turborepo

3. Yarn Workspaces

4. Yalc

5. Lerna

6. npm Workspaces

7. pnpm

8. Nx

Deploy Vite React App on Github

Step: 1

Step: 2

Rendering Frameworks JavaScript

Next.js

Nuxt

Gatsby

Remix

Astro

Eleventy

SvelteKit

Docusaurus

flat array from the multi dimensional zig-zag array

Strict object type using Proxy in JavaScript

Introducing `template-rtw`: A Modern Alternative to Create React App