Forem: RiyaNegi

Web Page Not updating on back navigation? The bfcache Problem and Fix

RiyaNegi — Fri, 21 Feb 2025 17:06:04 +0000

TLDR -> For developers looking to directly jump to the solution
➡️ click here

Imagine you're building a simple To-Do List app. Your app has two pages:

To-Do List Page (/todos) – Displays all tasks and has a "Create Task" button.
Task Details Page (/todos/:id) – Shows details of a specific task.

The Problem

A user creates a new task on the To-Do List page. ✅ It appears in the list.
The user clicks the new task, goes to its details page, and updates something.
The user clicks the browser back button to return to the To-Do List.
💥 The newly created task is missing from the list! But when they manually refresh, it reappears.

At first, I thought it was a react state update issue and tried to debug in that direction. However, on deeper investigation, I noticed that the API calls were made as expected on the initial render, but were getting old data as the response. This was weird because the API was working perfectly fine in every other case except for this backwards-navigation case.
After searching for this issue I found out there's something called as Back/Forward Cache (bfcache) in modern browsers which is an optimization technique used to reduce load times. However, in pages that require updated data, this can prove to be an issue.

Here’s a technical breakdown of how it works:

1. Freezing the Page (Page Lifecycle Management)

When a user leaves a page (e.g., clicking a link or using the back button), the browser pauses all JavaScript execution and freezes the page state.
Instead of destroying the page (like a normal navigation would), it is kept in memory, including the DOM, JavaScript heap, and event listeners.
The page is put into a "suspended" state where it stops running scripts but keeps all its data intact.

2. Storing in bfcache

Unlike normal caching (which only stores fetched resources like images, CSS, and HTML), bfcache stores the entire page, including JavaScript memory.
This means when you return, there’s no need to re-run scripts, make API calls, or reload assets.

3. Restoring the Page (pageshow Event)

When the user navigates back or forward, the browser instantly restores the frozen page, unfreezing JavaScript execution from where it left off.
The pageshow event fires, with event.persisted === true, indicating that the page was loaded from bfcache instead of reloading from the server.

4. When Does bfcache Not Work?

bfcache won't work if:

The page has unload event listeners (old websites used this).
Certain security restrictions apply (e.g., authentication headers, no-store cache).
The page uses window.opener or specific JavaScript APIs like IndexedDB in ways that prevent caching.

The Solution

When the page is loaded from the BFCache, the onload event won't be triggered. So, in order to determine if the page was restored from the bfcache, we must instead listen to the pageshow event and examine the event.persisted attribute. This can be useful for determining whether data is outdated or not. If it is restored from bfcache, it will be stale so then update it accordingly using an API re-fetch or update function.

You can use the following event listener to see whether or not the user came from the BFCache, like:

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // The page was restored from the bfcache
    // Re-fetch data
  }
});

Alternate solution

Adding headers to your API call like the "Cache-Control": "no-store" and "Pragma": "no-cache" headers ensure that the browser and intermediate caches do not store any response, forcing a fresh API call on every request.

Best for:

Real-time data that must always be up-to-date.
Financial transactions, live dashboards, or frequently changing content.

Avoid for:

Static or rarely updated data (e.g., images, documents, or user profiles).
Situations where reducing server load and improving performance is a priority.

const response = await fetch(
      `api-url-call`,
      {
        headers: {
          "Cache-Control": "no-store",
          Pragma: "no-cache"
        },
        cache: "no-store"
      }
    );

Essential vs. Optional

✅ Cache-Control: "no-store" → Most important

Ensures the browser and intermediate caches do not store the response at all.
Works in modern browsers and is the recommended approach.

⚠️ Pragma: "no-cache" → Optional

A legacy header from HTTP/1.0; mainly useful for compatibility with older systems.
Can be omitted if you're dealing only with modern browsers.

✅ cache: "no-store" (fetch option) → Recommended for fetch calls

Ensures fetch() bypasses the cache entirely.
This is only for fetch requests and does not affect browser cache behavior for other requests.

Why Doesn't bfcache Work in Local but Works in Staging/Production?

Localhost Behaves Differently 🏠

Some browsers disable bfcache by default for localhost or treat it differently to avoid issues during development.
In local, navigation may always trigger a full page reload instead of restoring from memory.

Hot Reloading & Code Changes 🔄

In local, tools like React Fast Refresh or Webpack invalidate page states when code updates.
Even without refreshing, this can prevent bfcache from storing the page.

Missing Production Headers & Settings ⚙️

Staging/production environments often have caching headers that enable bfcache.
Local development servers might lack these, preventing pages from being stored in memory.

Service Workers & API Behavior 🌐

In production, service workers or caching strategies might allow bfcache to work properly.
Locally, APIs might behave differently (e.g., not using caching rules), leading to different navigation behavior.

Keep learning!

Solving Issues with og: Meta Tags: A Comprehensive Guide

RiyaNegi — Sat, 25 May 2024 07:46:47 +0000

Meta tags are snippets of text that describe a page's content; the og: meta tags, in particular, are essential for social media sharing. They control how your content appears when shared on platforms like Facebook, LinkedIn or Twitter, playing a crucial role in attracting clicks and engagement for your website.

The Issue

Despite setting up my og: meta tags correctly, I faced a frustrating problem: the shared links on Facebook or linkedin were not displaying the correct thumbnail of the post. It showed the general thumbnail of my website, but not the specific post thumbnail I wanted from within the website. This inconsistency not only marred the appearance of my website's link but also potentially reducing traffic and engagement.

Ruby version



set_meta_tags :og => {
      :title    => template.name,
      :description     => template.description,
      :site_name      => 'XYZ',
      :image    => template.cover_image_url
}
  end

JavaScript version



<head>
      <meta property="og:title" content="${template.name}" />
      <meta property="og:description" content="${template.description}" />
      <meta property="og:site_name" content="XYZ" />
      <meta property="og:image" content="${template.cover_image_url}" />
      <title>My App</title>
</head>

Troubleshooting Steps

When troubleshooting issues with og: meta tags, it's essential to follow a systematic approach to identify and resolve the problem. Here are the steps I took:

1. Initial Checks
First, ensure that the meta tags are correctly placed within the <head> section of your HTML document. Incorrect syntax, placement or indentation can cause social media platforms to misinterpret the tags.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta property="og:title" content="Sample Title" />
  <meta property="og:description" content="Sample Description" />
  <meta property="og:site_name" content="XYZ" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <title>My App</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

2. Check the URL
Ensure that the URLs used in your meta tags are absolute and correct. Relative URLs might not be interpreted correctly by social media platforms.

3. Use Debugging Tools
Each major social media platform provides tools to help debug and validate your meta tags. These tools can be immensely helpful in identifying issues.

Facebook Debugging Tool: Sharing Debugger
Twitter Debugging Tool: Card Validator
LinkedIn Debugging Tool: Post Inspector

Enter your URL in these debugger tools. Review the link preview and make necessary adjustments based on the feedback.

4. Common Pitfalls
Ensure that your images meet the size and format requirements of each platform. For example:

Facebook: Minimum 200x200 pixels. Recommended size is 1200x630 pixels.
Twitter: Minimum 120x120 pixels. Recommended size is 1200x628 pixels.
LinkedIn: Minimum 1200x627 pixels. Recommended size is 1200x627 pixels.

Ensure the images are in the correct format (JPEG, PNG, etc.) and are accessible via the URL provided.

5.Cache Issues
Sometimes, even after fixing the meta tags, social media platforms might still show old data due to caching. Use the debugging tools mentioned above to refresh the cache. For Facebook, you can force a rescrape using the Sharing Debugger.

The Solution

After extensive testing, I discovered that the issue was due to the absence of the og:url meta tag. Social media platforms sometimes rely on this tag to properly link the meta information to the specific page. Here's how I fixed it:

Adding the og:url Meta Tag

Ruby Version



def apply_meta_tag(template)
  set_meta_tags og: {
    title: template.name,
    url: request.original_url, ##Add url explicitly
    description: template.description,
    site_name: 'XYZ',
    image: template.cover_image_url
  }
end

JavaScript version



<head>
      <meta property="og:url" content="${currentUrl}" /> // Add url explicitly
      <meta property="og:title" content="${template.name}" />
      <meta property="og:description" content="${template.description}" />
      <meta property="og:site_name" content="XYZ" />
      <meta property="og:image" content="${template.cover_image_url}" />
      <title>${template.name}</title>
</head>

After making these changes, I verified the updated link preview on all platforms. The link previews now displayed the correct image consistently across Facebook, Twitter, and LinkedIn.

If you've encountered similar issues with og: meta tags, share your experiences and solutions in the comments below!

Dummy guide to building scalable react web architecture

RiyaNegi — Tue, 30 Jan 2024 07:30:38 +0000

Over the years, working as a frontend engineer, I've been involved in multiple React projects. Every time I start a new project, the question that comes in my mind is, "How can I establish a stable, scalable, yet quick foundation to support the app?" The answer varies depending on the project's size, but the core question remains the same. In this article, we will delve into this question, providing a straightforward, no-nonsense insight into building a robust foundation for your project so that you can quickly get started!

Building a scalable architecture from the outset and conducting necessary research is crucial. A strong foundation allows you to make various edits and adjustments to your projects later on. React is unopinionated, meaning you can flexibly use it according to your convenience.
However, over-engineering your codebase for small, one-page apps, MVP demos or feature modules can be counterproductive. In these cases, opting for a basic file structure like the one shown below is preferable and saves you from spending unnecessary extra time maintaining it

> src
   > Components
      > Module.js
      > ModuleContainer.js
      > styles.css
   > App.js
   > App.css
   > Index.js

But on the other hand, for more complex structures, involving a full-fledged backend, frontend, reducers, and context, you should ask yourself three important questions when building its foundation.

- How to design a loosely coupled React architecture?

If React components are too interdependent, it can lead to the over-rendering of unnecessary components, slowing down the app. Aim to separate the concerns of components as much as possible.

- How to decompose your application UI into components?

Decomposing React components is essential for code readability and maintainability, especially when working in a team. Aim for a file with a maximum of 150-200 lines of code, ideally keeping it around 100 lines for better clarity.

- How to Implement data fetching with Redux/Flux?

Middleware/global state store can add extra complexity to your app. Ensure your folder structure is neatly laid out, as it requires some boilerplate code setup. Once in place, it becomes a valuable tool for handling complex interactions and dynamic updates in larger, more complex apps. It's an extremely good investment for larger complex apps.

Lay out a plan addressing these questions according to your project, and you'll end up with a structure similar to the one below.

Ps - If you want a working example here's a repo link to one of my projects to understand the structure better
https://github.com/RiyaNegi/Social-Monitoring

> Backend(server)
> Frontend(client)
  > assets (comprising of media files)
  > components
    > Module 
      > index.js
      > index.css
    > Module2
      > index2.js
      > index2.css
  > context
    > actions
    > reducers
    > InitialState.js
    > Provider.js
  > helpers 
    > AxiosInstance.js (an instance of Axios with customized settings that are resuable throughout the application. )
    > Constants (variables that can be reused throughout the app)
  > routes
  > utils (Comprising of functions that will be repeatedly used throughout the app)
  > App.css
  > App.js
  > App.test.js
  > index.css
  > index.js

Starting a new project can be overwhelming. The easiest way to navigate this challenge is to refer to good GitHub repositories and study their folder structure. Don't spend too much time worrying about building the perfect foundation structure, as changes and adjustments are part of the learning process. There will always be unforeseen changes, no matter how hard you try to plan. Just do your best to be curious about everything and get started with it as soon as possible!!

Getting started with Typescript with React Hooks

RiyaNegi — Wed, 23 Jun 2021 17:26:43 +0000

Typescript is the next big thing in the Front End Development domain and if you are looking to upgrade your skills from a junior to an intermediate frontend developer, then it is a must have skill.
Typescript is a a superscript of javascript, so if you know javascript you are already half way there! What Typescript brings to the table is more error-free code with type checking during run time and a code which can be easily documented.

This article is for developers who already know react and javascript and want to shift to typescript, so I won't be focusing on any react concepts. This is a crash course on understanding the basics of using Typescript with React.

Index

We will be covering all the topics necessary for understanding the basics of using react with typescript.

Info
Setup
Handling State
Handling Props
Handling Functions
Handling Events

In this article we will be building a simple personal watch list that records the movies you input by taking it's name, rating and review. It looks something like.(It is a little stylised but the underlying code is basic)

Info

Github repo for the project

Online Demo of the Project

Setup

Let's start with initializing our project! I am naming my project typescript-with-react but you can go with anything you like.
npx create-react-app --template typescript typescript-with-react

Okay now change directory to get into your project folder and proceed usually as you do with any react project.

cd typescript-with-react/
code .
npm start

Your code structure should be looking something like this

Notice how the files have .ts or .tsx extension. That denotes that those files are transpiled in typescript.
Okay now let's get into the Typescript nitty gritty!

Handling state

In typescript it's necessary to mention type definitions of all variables and functions and what they return.

For handling state in react you need to first create an interface where you mention the data type of the variables.
In the example below, we have created an interface called IState (You can name it whatever you like).
The interface IState is where we will write our type definition of how we want the state variables to be, which in this case is an array of objects. To denote that we add square bracket after the type definitions. And then while using useState, add <IState["form"]> which denotes that the state should be accepting values in the specified format only(IState format in this case which is taking the object 'form' as input format)

We have exported IState so that we can use it in another file later on.
An alternate inline method of adding state would be as follows :

const [counter, setCounter] = useState<{name:string,rate:number,review?:string}[]>([])

In our case project, we want review to be an optional field while name of the movie and rating of the movie to be compulsory field.
Thus for review we have done review?:string where the question mark denotes the value of review could either be a string or undefined. However for name and rate we have strict type definitions which won't accept anything apart from the assigned type definitions.
You can add more than one type definitions to a variable in the following way:

inputValue:number | string | null

Here the variable inputValue can either be a data type of number, string or even a null value
Note: null and undefined are not the same data types.

Handling Props

For handling props in react, both the sending and recieving side of the component should make a clear declaration of the type and number of variables or functions involved.Typescript will give an error if anything is missing either on the sending or receiving side

This is the sending side.

<List form={form} />
<Form form={form} setForm={setForm} />

From App.tsx we are sending one object ie. form to List.tsx

Let's take a look at the List component's recieving side now.

import { IState as IProps } from "../App"

const List: React.FC<IProps> = ({ form }) => {
...
}

List is a react functional component that accepts props. In typescript to show that we addReact.FC<IProps> after the List component declaration.
We can import the IState under the alias IProps since we know that the type definitions of the object form are exactly the same as the IState object.
We can then destructure form in the parameters and use it in the function component.

In the second example, from App.tsx we are sending one object ie. form and one function ie.setForm to Form.tsx
Let's take a look at the Form component's recieving side now.

As you can see here in this component as well we imported IState under the alias Props, however we have made some customized changes here.

Here we created a new interface called IProps that specifies the type defintion of props incoming since we had to specify the type of setForm.
We mention form: Props["form"] which means form should be assigned the type definition of IState which is imported under the alias Props
And then similarly we will now do it for setForm

Protip : to know the type definitions of something you don't have a clue about, just hover over that element like this and copy the type definitions.

Since we have already declared the type definitions of props as Props["form"], we can cut short the type definition of setForm and write it this way instead

 setForm: React.Dispatch<React.SetStateAction<Props["form"]>>

Then simply destructure form and setForm in the parameters of the Form function and use it in the component.

Handling Functions

In react-typescript, you need to mention the type of output that function is giving.

Here in this example we have called mapList() function to map through the array of list and give table row as an output, which is a JSX element.

To mention the output type of this function, add : JSX.Element[] after the parameters, which denotes that the function is supposed to return an array of JSX elements.
An interesting thing to note is that we have written a nested return statement because the first return points towards the mapping function.
However we aren't supposed to return the mapping function and thus typescript would give an error if we had only one return statement since we have mentioned our return type as JSX.Element[].
We did a nested return statement inside the map function so that it specifically returns a pure JSX element ie. a table row in this case.

Protip: If you aren't sure what the return type is,hover over the function to know it's return type.

Alternatively if a function isn't returning anything, mention it's null return type as :void after parameters in this way :

const randomFunction = (): void => {
...
}

Handling Events

For handling events with react typescript we will take a look at the following DOM events called by the following JSX elements in Form component:

<input className="inputBox" type='text' name="name" value={input.name} onChange={(e) => handleChange(e)} />

<textarea className="inputBox" name="review" value={input.review} onChange={(e) => handleChange(e)}></textarea>

Here the input tag has a DOM property called onChange which calls handleChange when an event is triggered.
For this we create a function which knows that it will be recieving an HTML element in parameters.

 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        })
    }

Here we are declaring that e will either be of type React.ChangeEvent<HTMLInputElement> which is what the input tag will send.
And since for the movie review field we are using a textarea tag instead of an input tag the e could also be React.ChangeEvent<HTMLTextAreaElement>.
Thus the entire type definition of e can be written as e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>.
We need to add :void to specify that this function won't be returning anything.

In the second example we will take a look at the onClick event called by the form submit button.

<button className="button" type="submit" onClick={(e) => handleClick(e)}>Submit</button>

const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
        e.preventDefault();
        if (!input.name || !input.rate) {
            return
        }
        setForm([...form, {
            name: input.name,
            rate: parseInt(input.rate),
            review: input.review
        }])
    }

Similar to handleChange function the handleClick function takes a proper type definition of e which in this case is React.MouseEvent<HTMLButtonElement>.

Conclusion

That's it for this crash course! Hope this gives you a fair enough idea of how to use typescript in react. Keep learning and have a great day!

Setting up Webpack 5 with React and Babel from scratch

RiyaNegi — Sun, 21 Mar 2021 09:33:38 +0000

Creating your own Webpack configurations sounds intimidating to even intermediate React developers. But the best way to tackle a problem is to face it head on! This blog will help you setup your own basic Webpack bundler with React and Babel for your next React project! It is also suitable for people who are trying to understand basics of Webpack, how Webpack is setup or exactly what happens under the hood. So let's dive into it!

TLDR

For coders who want to straightaway take a look at the code.
Github repo

Step 1 (Setting up folder and downloading dependencies)

Start with creating a folder and name it whatever you like. I named mine react-webpack.
Go inside the file and initialize the package manager. -y stands for “yes” to all general development questions asked on the command line. ```bash

npm init -y


This is what it will look like.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4413ji1g3rtmpxb2cxmc.jpg)

- Next we will install react dependencies. 
```bash


npm i react react-dom

Your dependencies in the package.json file will now have following: ```jsx

"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}

- Next we will install dev dependencies and loaders
```bash


npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader css-loader style-loader webpack webpack-cli html-webpack-plugin

This is how the devDependencies will look like in package.json: ```jsx

"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"css-loader": "^5.1.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^2.0.0",
"webpack": "^5.27.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}



##Step 2 (Setting up Webpack with Babel)

- Next we will create a file called `.babelrc` which will transpile our react code from jsx to regular js. We need to include the following presets :
```jsx


{
   "presets": [
       "@babel/preset-env",
       "@babel/preset-react"
   ]
}

Our code and file structure by far looks like this.

Next we will create the webpack file. We will name it webpack.config.js. This webpack folder essentially runs in the node environment and not the browser. Therefore we can write vanilla js code here.

This is how the file will look like:



const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // Where files should be sent once they are bundled
 output: {
   path: path.join(__dirname, '/dist'),
   filename: 'index.bundle.js'
 },
  // webpack 5 comes with devServer which loads in development mode
 devServer: {
   port: 3000,
   watchContentBase: true
 },
  // Rules of how webpack will take our files, complie & bundle them for the browser 
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /nodeModules/,
       use: {
         loader: 'babel-loader'
       }
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     }
   ]
 },
 plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
}

Understanding webpack.config.js

In output we mention where the files should be sent once they are bundled.
- path mentions the name of the directory to be created where all the bundled files will be stored. We have named our folder dist, which is a common practice.
- And filename is the name we set for the new bundled file that will be created after webpack runs it's magic(basically bundles all the js code into one file).
devServer is used to quickly develop an application, which is contrary to the production mode, which takes slighlty more time to build the application since it minifies the file, which doesn't happen in development mode.
- With port we can set a port number of our choice. I have set it to 3000.
- watchContentBase triggers a full page reload when any changes are made in any file.It is disabled by default.
module is where you pass the rules for bundling files.
- test is where we mention the extension of file which needs to be targetted by the specific loader. All .js or .jsx files need to be bundled by the babel loader.
- exclude is where we mention files that are needed to be ignored by the bundler.
- Same goes for the css files.It is important to take in note that the array of use :['style-loader', 'css-loader'] needs to be written in that exact order.
- When webpack bundles the css files,this is the order it follows :
  - It first runs the css-loader which turns css files to common js.
  - Then it runs style-loader which extracts css into files as string.
Lastly we add a plugin called HtmlWebpackPlugin which ensures that the webpack knows which html file template to follow for running the app.

Step 3 (Setting up react folder)

Okay so the complicated part is done!Let us build our react app files now!😄
Create a src folder and inside it create 4 files.

src

index.html
index.js
App.js
App.css

index.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack App</title>
</head>

<body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
</body>

</html>

index.js



import React from "react"
import ReactDom from "react-dom"
import App from "./App"
import "./App.css"

ReactDom.render(<App />, document.getElementById('app'))

App.js

I am creating a very basic app for example but you can add in more stuff you like.



import React from "react"

function App() {
    return (<div>
        <h2>Welcome to React App</h2>
        <h3>Date : {new Date().toDateString()}</h3>
    </div>)
}

export default App

App.css



h1{
    color: teal
}

package.json

Okay so now we have to create a script for running our app in package.json file. Add the following scripts :



"scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  }

Step 4 (Running the app)

Now simply run it through the CLI using the run command and you can see your code running on the mentioned port. In my case it is running on port 3000. This how the bundle looks in development mode. ```bash

npm run serve


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0apvkk2jyd7eqoo3blb.jpg)

- You can then do build to see how the dist folder is build in production mode.
```bash


npm run build

-Once the dist folder is built, right click on the index.html file in the dist folder and click on 'Open in live server' to check out how it will look in production mode. This is how the bundle looks in production mode. It is minfied.

Bonus: Optimizations!

For optimizng the react web app, we will separate the JS/JSX files and CSS/SASS files.
The reason why this is good practice is because in Webpack, loaders like style-loader and css-loader pre-process the stylesheets and embed them into the output JavaScript bundle, instead of the HTML file.
And sometimes because of this there might be a flash of unstyled content (FOUC) where for a second you can see ugly plain HTML without any styling. To avoid this bad visual experience we need to split files and link CSS in the HTML file so that they load at the same time and there is no FOUC.

Plugins like MiniCssExtractPlugin can help in separating and minifying the CSS files and embedding them as a link into the HTML file, and thus avoiding FOUC. Install it with the following command: ```bash

npm install --save-dev mini-css-extract-plugin


- Here's how we can add it. First `require` it in your webpack.config.js and replace the MiniCssExtractPlugin loader with `style-loader` and also add it in the plugin.

- It should look something like this (I have highlighted the 3 places where changes are required):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m46j02h1gjmwdiyot948.jpg)

- Finally run build command again and in your `dist` folder you can see your new `main.css` file.
```bash


npm run build

This is the final look. I added a generic form element to show how we can build various components with their own CSS files and build a React web app similar to CRA.

Credits

If you are a visual learner and want a video explanation, check out this amazing video by James Bubb. I followed his Youtube Video to learn and build this react starter template.