Forem: Anuradha Aggarwal

NPM v/s NPX

Anuradha Aggarwal — Wed, 03 Sep 2025 09:05:54 +0000

Hello Developers!! While working on any of your projects you might have come across NPM.

NPM stands for Node Package Manager and is a go to tool for managing NodeJS packages.

It helps you install libraries, manage dependencies & even define scripts to automate tasks.

Now switch to the term NPX which stands for Node Package Execute

it comes with the NPM, when you installed NPM above 5.2.0 version then automatically NPX will installed.
It is a NPM package runner that can execute any package that you want from the NPM registry without even installing that package.

Let’s take a simple example to understand the difference between the two:

🎯 NPM

📍 Example

Create a new directory

mkdir test-project
cd test-project

Now install the package cowsay using NPM

npm install cowsay

Now if you check your project directory there will be new entry created inside the node_modules

You can use this new package using that path like

./node_modules/.bin/cowsay hello

Or instead of using the whole path, directly use the package name like

cowsay world

So now you understand whenever we use NPM for any package update you have to install it which will occupy space in your system.

📍 Usage

You are working on a long-term project where you’ll frequently use the same packages and libraries.
You want to manage dependencies and ensure they are tracked in your package.json.

🎯 NPX

📍 Example

It is a NPM Package Executor that can execute any package that you want from the NPM registry without even installing that package.

Let’s try this out:

mkdir test-npx
cd test-npx

npx cowsay hello

Also if you check test-npx directory, it is empty that means this package does not occupy any space.

📍 Usage

You want to execute a package without permanently installing it.
You’re running one-off commands like create-react-app, eslint, or package binaries.
You need to run a specific version of a package or command without modifying your existing setup.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Building Your First CLI Tool

Anuradha Aggarwal — Sun, 24 Aug 2025 14:14:40 +0000

Hello developers!! You must have use multiple CLI tools in your everyday development like echo, ls, cd etc.

Let’s try to understand it in a better way by creating your own simple CLI tool.

In this article, we will create a simple Calculator CLI tool.

🎯 What is CLI Tool?

A CLI (Command Line Interface) tool is just a program you run in the terminal by typing commands with your keyboard, instead of clicking buttons in a GUI (Graphical User Interface).

🎯 Project Setup

Setup the Project with initial command

npm init

Create a folder named src in the root directory of your project.
Inside src create a file called index.js This is going to be the entry point of our CLI.
In the package.json file, change the “main” part to src/index.js.
Now manually add another entry into the package.json file called bin and set its key to calc and it's value to ./src/index.js.

Your resultant package.json file would look like this:

{
  "name": "calculator-cli-tool",
  "version": "1.0.0",
  "description": "A CLI tool used for calculations",
  "main": "src/index.js",
  "bin": {
    "calc": "./src/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

The key calc, is the keyword for calling the CLI. This is the keyword that user will type in the terminal for using your CLI.

🎯 Commander

Commander is a popular Node.js library that makes it easy to build CLI tools.

What `commander` gives you?

Commands → Define sub-commands like add, multiply.
Arguments → Easily get values like 5 7.
Options (flags) → Support things like --verbose or --format json.
Automatic help → Generates --help output for free.
Versioning → Add --version easily.

Let’s install commander:

npm install commander

In src/index.js file:

#!/usr/bin/env node
const { Command } = require('commander');
const program = new Command();

program
  .name('calc')
  .description('A simple calculator CLI')
  .version('1.0.0');

// Command: add
program
  .command('add <a> <b>')
  .description('Add two numbers')
  .action((a, b) => {
    console.log(Number(a) + Number(b));
  });

// Command: multiply
program
  .command('multiply <a> <b>')
  .description('Multiply two numbers')
  .option('-v, --verbose', 'Show detailed steps')
  .action((a, b, options) => {
    const result = Number(a) * Number(b);
    if (options.verbose) {
      console.log(`${a} * ${b} = ${result}`);
    } else {
      console.log(result);
    }
  });

program.parse();

🎯 Link it globally

Now if you run the below command in your project folder, this creates a global symlink so you can use calc anywhere.

npm link

Now your CLI tool is ready to use anywhere in your system. Let’s try it now:

🎯 CLI Building Blocks

As you noticed in the above examples, there are multiple parts in the single commands, let’s break it down.

calc is the main command (the tool itself).
add, multiply represents sub-command (an action inside calc).
5, 7 represents the arguments (values you pass)
—verbose is a option which acts like a flag & modifies behavior

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

React Design Patterns

Anuradha Aggarwal — Sun, 09 Jul 2023 16:35:41 +0000

Hello developers!! While developing apps in React, I'm sure you have come across different use cases which cannot be easy to solve using the same older approach.

Each use cases demand a different pattern to solve the problem in the most optimised way and also made our code more scalable.

React provides different design patterns to solve common problems. The list of commonly used design patterns in React are:

Presentational & Container Component
Higher Order Components
Render Props
Compound Components
Hooks

Let's explore them one by one.

🎯 1. Presentational & Container Component

Each component in React has two parts: One is logic to handle your data and the other is displaying data on screen.

This pattern helps separate concerns by splitting components into two categories. Container components handle the logic and state management, while Presentational components focus on rendering the UI based on the provided props.

export const DisplayList = ({ patientRecord }) => {
  return (
    <ul>
      {patientRecord.map((patient, id) => {
        return <li key={id}>{patient}</li>;
      })}
    </ul>
  );
};

Container components, on the other hand, keep track of the internal states and data-fetching logic and handles business logic.

export const PatientComponent = () => {
  const [patientList, getPatientList] = React.useState([]);

  React.useEffect(() => {
    // Fetch data through an API and apply business logic
    (async () => {
      const response = await fetchPatientList();

      setPatientList([...response]);
    })()
  }, []);

  // provide data to presentational component to display
  return <DisplayList patientRecord={patientList} />; 
};

The container component passes the state and any required callbacks as props to the presentational component. The presentational component is responsible for rendering the UI based on the provided props, without worrying about the data fetching or business logic.

🎯 2. Higher Order Components

HOCs take one component as an input and give a newly created component with additional functionalities as an output. It allows you to reuse component logic by wrapping components with additional functionality.

By using HOCs, we can easily add common functionality to multiple components without duplicating code.

import React from 'react';

function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    React.useEffect(() => {
      console.log(`Component ${WrappedComponent.name} mounted`);
      return () => {
        console.log(`Component ${WrappedComponent.name} unmounted`);
      };
    }, []);

    return <WrappedComponent {...props} />;
  };
}

// Usage
const MyComponent = (props) => {
  return <div>My Component</div>;
};

const EnhancedComponent = withLogger(MyComponent);

In the example above, withLogger is a HOC that takes a component (WrappedComponent) as input and returns a new component (WithLogger). The returned component logs a message to the console when it mounts and unmounts.

To use the HOC, we wrap our original component MyComponent with withLogger, creating a new component EnhancedComponent. The enhanced component has the same functionality as MyComponent, but it also includes the logging behaviour defined in the HOC.

🎯 3. Render props

In this pattern, a component receives a function as a prop and uses that function to render its content.

import React from 'react';

const MouseTracker = (props) => {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{props.renderPosition(position)}</div>;
};

// Usage
const DisplayMousePosition = () => (
  <MouseTracker
    renderPosition={({ x, y }) => (
      <div>
        Mouse position: {x}, {y}
      </div>
    )}
  />
);

A prop like renderPosition is called a render prop because it is a prop that specifies how to render a piece of the user interface.

🎯 4. Compound Components

Compound components are a pattern used in React to create components that work together as a group, allowing users to customize and control the rendering of multiple related components.

It allows you to define a parent component that encapsulates the behaviour and state of child components, while still giving flexibility to users to determine the composition and appearance of the child components.

Let's consider a use case where you need to create a List component in React which looks something like an unordered list in native HTML or an Accordion component.

<List>
 <ListItem>1</ListItem>
 <ListItem>2</ListItem>  
 <ListItem>3</ListItem>
 <ListItem>4</ListItem> 
</List>

Now in this scenario, we need some of the states of the List component to be transferred to its child component i.e. ListItem. It can be implemented either by using the context API or React.cloneElement API.

Let's explore how to develop the same scenario using Context API.

const ListContext = React.createContext();
const { Provider } = ListContext;

// Parent Component
export const List = (props) => {
  const { children, size } = props;

  const sharedProp = { size }

  return (
    <Provider value={sharedProp}>
      <ul>
        {children}
      </ul>  
    </Provider>
  )
}

// Child Component
export const ListItem = (props) => {
  const contextProp = React.useContext(ListContext);
  const { size } = contextProp;

  return (
   <li className={size === 'medium' ? bg-primary : bg-secondary}>
      {props.children}
   </li>
  )
}

// Usage
<List size='medium'>
 <ListItem>Item 1</ListItem>
 <ListItem>Item 2</ListItem>
 <ListItem>Item 3</ListItem>
</List>

In the above example, React Context is created to share the prop size between the parent (<List>) and child (<ListItem>) components. Also, the user has the flexibility to provide custom content inside each list item.

🎯 5. Hooks

Hooks are introduced in React Functional component as a replacement for Class components. There are multiple hooks available to manage states and different lifecycle methods of React.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <Button onClick={() => setCount(count + 1)}></Button>
  )
}

We can also create custom hooks to solve our specific use case and code reusability.

You can read about the most commonly used built-in react hooks here.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Configuration v/s Composition - Design Reusable Components

Anuradha Aggarwal — Thu, 29 Jun 2023 17:18:29 +0000

Hello folks!! In this article, we'll learn about how to design component APIs for your design system and make it reusable across different teams, fulfilling all the use cases in the most optimised way and following the design principles guidelines.

We'll look into the different approaches to building component APIs.

🎯 Component Requirements

While building a component, we'll consider into mind the different use cases and as we add more functionality, the complexity of components increases. So before building future-proof components let's first explore all the use cases:

Consider creating an Alert component which looks something similar to this:

Let's first break down the entire component into smaller subcomponents.

The Alert component consists of the following subparts:

Title

It can be a string or may be optional
Message

Message can consist of multiline text or any other component. So we can fix its type to string | ReactNode
Action buttons

It consists of any component where input from the user is required. It may consist of multiple buttons, or any other component or might be an optional field.

Its type is set to ReactNode | undefined
Icon
- We can define any icon to be shown.
- Along with the icon name, its position also matters. There might be a case when we need to show the icon to the right.
- The icon can also vary based on size.
Variants

The alert component can come under multiple variants and based on the type of variants colours, the font style of its subparts (title, message, icon) changes.
Patterns

As some of the subparts are optional in the Alert component and the user can also add its custom component, this will result in multiple patterns.

Now that we had go through all the requirements, let's move to the code part.

🎯 Configuration

In the Configuration approach, the user can pass data to the component via props, and the component should know exactly how to render itself based on that props.

Let's move with the above example of the Alert component and see how to design its API using a configuration approach.

const Alert = (props) => {
    const {
        title,
        description,
        actions,
        iconName, 
        iconSize, 
        iconPosition='left', 
        iconColor, 
        variant 
    } = props;

    return (
        <div className={variantClass}>
          {iconName && 
            <Icon 
              name={iconName} 
              size={iconSize} 
              position={iconPosition} 
              appearance={iconColor} 
            />
          }
          <div>
            {title && <Heading>{title}</Heading>}
            {message && <Paragraph>{description}</Paragraph>}
            {actions && (
              <div>{actions}</div>
            )}
         </div>
        </div>

    )
}

export default Alert;

Users can use this component using the following API:

<Alert 
  title='Title goes here'
  description='Message goes here'
  variant='warning'
  iconName='warning_check'
  iconPosition='right'  
  actions={
    <div>
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </div>
  }
/>

As you notice, for all the functionality user needs to pass a prop to the component but all the design decision and rendering is handled internally by the component.

📍 Pros:

Quick and easy to use. Different functionality and visual variants can be controlled by configuring props.
Configuration API via props makes it harder to diverge from the design system and keeps the UI and behaviour consistent.

📍 Cons:

Adding more features requires more props and conditional logic. Thus a component becomes harder to maintain.
Not easy to extend.
Not easy to override
If a component can't be extended, a new version might need to be built.

Using the above approach, the user does not need to worry about the design consistency across the app, they simply need to pass the prop to the component and all the design and visual aspects need to be handled by the component internally.

But it may be overhead as sometimes props provided by the component are not enough to satisfy all the use cases and the user may want some kind of customisation. Also for each functionality providing a different prop may to lead complex APIs which are not easy to extend.

Let's explore another approach for a similar use case.

🎯 Composition

In the Composition approach, Users should be able to take small building blocks and combine them together in whatever order they like.

Using this approach, the user is provided with multiple subcomponents which can be used in whatever order as per their use cases. Let's look at an example for better understanding.


<Alert variant='warning'>
    <Alert.Container>
        <Alert.Title>
            Title goes here
        </Alert.Title>
        <Alert.Description>
            <div>Hello World!!</div>
            <Badge>Description</Badge>
            <Paragraph>Short Description</Paragraph>
        </Alert.Description>
        <Alert.Action>
          <div>
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </div>
        </Alert.Action>
        <Alert.Icon name='warning_check' />
    <Alert.Container>
</Alert>

In the above code, instead of passing multiple props, the user can use smaller subcomponents for customisation. For example, Instead of passing a description as a string they can also pass a custom-designed description as per their use case. And also change the position of the icon to the right.

All these are just building blocks which are used to compose the functionality based on different use cases.

📍 Pros:

Extremely flexible
It's easy to create different functionality and UI variants and add new building blocks.
Makes a component library much more resistant to change

📍 Cons:

You need to compose the building blocks yourself to create a fully functioning component/feature.
Takes more time and code.
It's easy to diverge from the design system and ship inconsistent UI and behaviour.

🎯 Which Approach to use?

Both approaches as we see above have their advantages and disadvantages. Then the question is which one to use and when?

The approach you want to use totally depends on your use case and design pattern. There might be cases when we can use both approaches to satisfy our use case appropriately.

🎯 Summary

The Composition approach offers more flexibility, but it does require more knowledge of how to compose the building blocks and how they work.

On the other hand, the Configuration approach is less flexible, but it is simpler to use and makes it easier to stick to the design system.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Role of Service Worker In PWAs

Anuradha Aggarwal — Sun, 18 Jun 2023 18:07:44 +0000

Hello Folks!! In the previous article, we learnt about service workers and their lifecycles. In this article let's see service workers in practice.

🎯 Register a Service Worker

Create a service worker and register it in a browser from another javascript file.

In file js/app.js:

// Step 1: register a service worker
if('serviceWorker' in navigator){
  navigator.serviceWorker.register('/sw.js')
  .then((reg) => console.log('Service Worker Registered', reg))
  .catch((err) => console.log('Error in Registering Service Worker', err))
}

First, we will check if the browser supports the service worker or not.
navigator is an object in javascript that represents the browser and information about it.
In register method we need to provide the path to our service worker file.

Now you can check the result in the browser.

Points to remember:

Service workers only work on pages where they're served over a secure HTTPS connection. Also, localhost is an exception so that we can easily develop an app using service workers.

🎯 Install Event

The browser emits the install event automatically while the service worker is being installed. So we can listen to that install event.

Create a new file sw.js in the root directory so that it has access to the overall scope.

In file sw.js:

const staticCacheName = "site-static-v2";
const assets = [
  "/",
  "/index.html",
  "/js/app.js",
  "/css/styles.css",
  "https://unpkg.com/@innovaccer/design-system@2.15.3/css/dist/index.css",
  "https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap",
  "https://fonts.gstatic.com/s/nunitosans/v12/pe03MImSLYBIv1o4X1M8cc8GBs5tU1ECVZl_.woff2",
  "/pages/404.html"
];

// Step 2: Install Service Worker
self.addEventListener("install", (event) => {
  console.log("service worker has been installed!!");
  event.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      console.log("caching shell assets");
      cache.addAll(assets);
    })
  );
});

self inside a service worker refers to the service worker itself.
This event will occur only when we first install it or any changes in the file have been made.
We can use this event to add common assets to the cache so that users can still see those assets in the offline mode.

🎯 Activate Event

When the service worker is installed it becomes active. Once the service worker is active, it can access all the different pages and all the different files inside its scope.

const clearOldCaches = () =>
  caches.keys().then((keys) =>
    Promise.all(
      keys
        .filter((key) => key !== staticCacheName && key !== dynamicCacheName)
        .map((key) => {
          console.log("[sw] remove cache", key);
          caches.delete(key);
          return true;
        })
    )
  );

// Step 3: Activate Service Worker
self.addEventListener("activate", (event) => {
  console.log("service worker has been activated!!");

  event.waitUntil(clearOldCaches());
});

The service worker will wait to activate until all the instances of the app will be closed.

But it is a bit tedious as we have to first close all the tabs on which our app is running and then it reinstalls and comes under the running state. To avoid this we can use the following approaches:

use the skipWaiting option.
use Update on reload option.

🎯 Fetch Event

The fetch event occurs whenever we try to get something from a server like any CSS file or javascript file.

We have index.html file running in the browser which was initially fetched from a server. When an app requests a stylesheet or images or some other page it sends a request from the browser to the server and in response gets the requested resources.

We also have a service worker in the background listening for any fetch requests from our app. This service worker acts as a proxy between our app and a server.

Now whenever we make any request for resources it goes through the service worker and at this point, a fetch event is emitted and the service worker can listen for and react to it. We can either intercept the request or sent a custom response.

Service workers handle the cached asset and while making a fetch request we can prevent to sent the request directly to the server and instead send cached resources.

self.addEventListener("fetch", (e) => {
  e.respondWith(
    (async () => {
      const r = await caches.match(e.request);
      console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
      if (r) {
        return r;
      }
      const response = await fetch(e.request);
      const cache = await caches.open(dynamicCacheName);
      console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
      cache.put(e.request, response.clone());
      return response;
    })()
  );
});

Now we have seen all the lifecycle events of the service worker. A service worker is one of the steps in creating a Progressive web app. Let's see how to audit your application.

🎯 Lighthouse Audit

Chrome dev tools give us a way to audit our application using the lighthouse plugin which provides us with a checklist of required actions to make a site a valid PWA.

Go to the Lighthouse tab in Chrome dev tools and check the Progressive Web App option and press the Analyze page load button.

It provides us with the checklists to complete to create a valid PWA.

🎯 Install Prompt

We can also get an 'Install Banner' in our app by fulfilling certain criteria. This banner is similar to Add to home screen option which allows us to install the application into our device.

We can check all the criteria to show the install banner on this site.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Service Workers

Anuradha Aggarwal — Thu, 25 May 2023 03:11:02 +0000

Hello folks!! In this article, we'll learn about service workers and their role in creating progressive web apps.

🎯 Introduction

A service worker is a script that runs in the background of a web page, separate from the main page thread.

They are simply a javascript file but not exactly the same as a normal javascript file.

So whenever we create some kind of website we might have a mix of HTML, CSS and javascript files and then we upload those files to the server. When we request them by going to the web address we see them in the browser. Normal javascript file runs on a single thread inside the browser which is tightly coupled with the HTML page and it can access the DOM and manipulate the page content.

Now, when we create a service worker javascript file, it doesn't run on the same thread as our normal javascript file. It runs on a different thread in another part of the browser isolated away from the HTML page. That is why it does not have access to the DOM. So we cannot directly read, change or remove page content.

Service workers are background process. Their job is to provide an app-like functionality by listening and reacting to the events which occur in the browser.

Service worker listens to events such as fetch HTTP requests made by the browser.

🎯 Service Worker Life Cycle

Service Worker follows the following lifecycle:

Register: first register the service worker with the browser. From our normal javascript file (e.g. app.js), we register a service worker basically telling the browser that a certain javascript file (e.g. sw.js) should be registered as a service worker and put onto that separate thread.
Install: After the registration, the browser downloads and installs the service worker script. We can listen to this lifecycle event inside the sw.js\ file itself. This event is fired only once when the service worker is registered. Or the code inside the service worker file has changed since the last time it was installed in the browser.
Active: When the service worker is installed it becomes active. Once the service worker is active, it can access all the different pages and all the different files inside its scope.

If we made some changes in the service worker file then it will become active only when all the instances of our app are closed.
Fetch and Cache: When a fetch event occurs, the service worker intercepts the network request and can respond with cached assets instead of making a network request. This allows the service worker to serve content even when the user is offline. The service worker can also update the cache with fresh content from the network when available.
Update: When a new version of the service worker is detected by the browser, it is downloaded and installed in the background. The new version enters a "waiting" state while the currently active service worker handles any ongoing events. Once all tabs using the old service worker are closed, the new version takes control during the activation phase, and the cycle continues.

🎯 Advantages

Service workers help to achieve all the things that you would expect in a modern app that runs on a mobile device like:

Load Content Offline: you still open and view the app without any internet connection by using cached assets and data.
Use Background Sync: If a user tries to perform an action while they're offline that normally requires a connection, then it will perform an action in the background when a connection is re-established.
Use Push Notifications: Our app can notify users on a device

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Progressive Web Apps

Anuradha Aggarwal — Tue, 16 May 2023 13:26:46 +0000

Hello folks!! In this article, we'll learn about the Progressive web app in detail, its advantages and how to create one on your own.

Let's learn how to create simple PWA using HTML, CSS and vanilla JS.

🎯 What is PWA?

PWA stands for "Progressive Web App". PWAs are simply alternatives to creating a native mobile app. It is a web application that is designed to provide an app-like experience to users on their mobile devices or desktop browsers, without the need to download and install a native app from an app store.

Using PWAs we can create a mobile app with vanilla javascript that runs inside a browser just like a normal website does but which could also consist of the features of native mobile apps so that when we run that web app on a mobile it could do things that a native app could do as well like:

Be installed onto the home screen of the mobile
Access the application when offline
Get push notifications

🎯 Advantages of PWA

Can be made using vanilla JS, HTML & CSS
Accessed via a web address and not the app store
Can be installed on the mobile home screen
Runs in the browser but with access to device features
Can be used offline
Can use web push notifications

🎯 Technical components of PWA

We can simply create a progressive web app using the below components:

The Web App Manifest
Application Shell
Service Workers

Don't worry if this sounds like bit complicated, we'll look into these components one by one.

🎯 Basic Setup

We will create a simple web app with three pages Home , About , Contact and later on convert it into PWA.

Let's build a basic setup of our app. We'll start with a simple HTML file.

In index.html file:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PWA Application</title>
    <link rel="stylesheet" href="/css/styles.css" />
    <link
      href="https://unpkg.com/@innovaccer/design-system@2.15.3/css/dist/index.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
      rel="stylesheet"
    />
    <meta name="theme-color" content="#FFE1C4" />
  </head>
  <body
    class="d-flex h-100 align-items-center flex-column justify-content-center"
  >
    <nav class="p-10">
      <a class="links" href="/index.html">Home</a>
      <a class="links" href="/pages/about.html">About</a>
      <a class="links" href="/pages/contact.html">Contact</a>
    </nav>
    <div>
      <div class="bg-primary p-10">
        <h2>My PWA Application</h2>
      </div>
    </div>
  </body>
</html>

Similarly, create the other two pages About & Contact

🎯 Web App Manifest

This is a single JSON file which is going to provide information about our app to the browser like:

name of the application
home screen icon for the mobile
colour theme
start URL

By providing the above information, the browser would know how to display our app properly on a mobile when it's installed onto it.

By using the Web App Manifest, PWAs can be easily installed on a user's device and provide a more native-like experience, even when accessed through a browser.

On the root of the project, create a file manifest.json

{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#FFE9D2",
  "theme_color": "#FFE1C4",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/img/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/img/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/img/icons/icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/img/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/img/icons/icon-152x152.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "/img/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/icons/icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/img/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

name: the name of your app, this is going to be shown when you click on the application on the splash screen while the application loads in the mobile.
short_name: the name that displays underneath the icon on the home screen when someone installs your application.
start_url: the URL of the page that actually opens up when the user taps on the icon when we install it onto the home screen.
display: it specifies the developers' preferred display mode for the website. By selecting "standalone" it's not going to show the other browser things like the address bar at the top.
icons: An array of objects and each object represents a different icon. Depending on the device we are installing the app on, it's going to use a different-sized icon.

Don't forget to include this manifest.json file inside your all HTML files like this:

<link rel="manifest" href="/manifest.json" />

Now you can all those properties which you have provided inside the browser in the Application Tab:

Browser will take all the information and when we install this onto our mobile device it can make sure that our app displays properly.

You can read more about web app manifest here

🎯 Application Shell

Now let's move to the next component of PWA i.e. Application Shell.

The app shell is the minimum HTML, CSS, and javascript that is required to power the user interface of PWAs. It represents the static parts of the app that remain consistent across different views or pages. This includes components like the header, footer, navigation menu, and other UI elements that are visible on every page.

By caching the App Shell in the service worker, PWAs can load instantly and provide a smooth user experience even in offline or low connectivity scenarios.

The App Shell provides a consistent UI and navigation experience throughout the app, making it feel more like a native application.

There are more important concepts of PWA like service workers etc. which we will cover in the next article.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Serverless Functions & FaaS with Vercel

Anuradha Aggarwal — Tue, 04 Apr 2023 20:39:44 +0000

🎯 What are Serverless means?

At first glance, it looks like an application without a server. But it's not.
It basically means you're not responsible for managing and provisioning the servers.
These servers are managed by the cloud provider and you as a developer has to focus more on the development part or writing your business logic.

🎯 Serverless Function

A serverless function refers to a single-purpose piece of code.
It enables running code on-demand without the need to manage your own infrastructure, provision servers, or upgrade hardware.

🎯 Function as a Service

"Function as a Service" (FaaS) is actually a subset of serverless functions.
Serverless functions can fall into any service category where the configuration and management of servers are invisible to the end user.
FaaS, on the other hand, refers exclusively to event-driven computing wherein the code only runs in response to specific events or requests.

🎯 How does it work?

All the cloud providers have "Function as a Service" (FaaS). This is essentially a computing platform for serverless where you run your functions. Functions may contain your business logic or code you want to execute on the trigger of any event.

Event here refers to any action performed through your application like the click of a button or submitting a form, etc. which creates an event and then calls your function and runs your code.

Serverless functions are built using these steps:

create a serverless function
deploy it to a platform
call it through an API from your frontend code (using something like fetch or an Axios)

🎯 Advantages of Serverless

Pay for execution only: you only pay for the server resources you use. When your function is running, that's the only time you are paying for that and it's very cost-efficient.
Auto-scalable: Cloud providers automatically add server capacity when you need it and then take it away when you don’t, you don’t have to worry about maintaining and scaling servers to fit the evolving needs of your website or application.
Invest more time in development: Since you are not responsible for any of the management and deployment of any underlying infrastructure, you can build your apps faster.
High Availability: Cloud providers take care of all the fault tolerance and make sure that your app is always up and running.

🎯 Drawbacks of Serverless

Timeouts: These are basically stateless containers, they run for a little bit of time and are deleted afterwards. So if your execution code does not finish in that time, your app could fail.
Debugging: It is generally more challenging to debug serverless code.
Not handling Stateful applications: Serverless is not a good choice when it comes to stateful applications. A stateless application means that every transaction is performed as if it were being done for the very first time. There is no previously stored information used for the current transaction.

Now enough of the introduction!! Let's move to the code part.

🎯 Create a Serverless Function on Vercel

Vercel is a cloud platform for static frontends and serverless functions.

🔍 Step 1: Install Vercel CLI

npm i -g vercel@latest

You should have the latest version of Vercel CLI installed to proceed further.

🔍 Step 2: Create a Next.js project

npx create-next-app@latest --typescript

This will create a next.js project for you with a single API Route. This is where we create our Serverless Function.

🔍 Step 3: Create a Serverless Function

Inside pages/api/handler.ts file write your function:

import { NextApiRequest, NextApiResponse } from "next";

export default function handler(
  request: NextApiRequest,
  response: NextApiResponse
) {
  response.status(200).json({
    body: 'This is my Serverless Function',
    query: request.query,
  });
}

Use Vercel CLI to start a local development server:

vercel dev

Now navigate to the http://localhost:3000/api/handler to see the response:

🔍 Step 4: Deploy a Serverless Function

You can deploy your Serverless Function to Vercel's global Edge Network by running the following command from your terminal:

vercel deploy

The Serverless Function can then be accessed by navigating to the URL provided in the terminal.

Now if you open the URL provided in the terminal, you'll see your serverless function live on production.

🔍 Step 5: Check Logs

You can view all the details of your project on the Vercel web dashboard.

You can now use this as an API endpoint in your frontend application and trigger this function to execute your business logic when any event occurs from your application.

🎯 Resources

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Kubernetes - With Mongo & Express App

Anuradha Aggarwal — Sun, 01 Jan 2023 20:31:03 +0000

In this article, we'll see how kubernetes work in practice and will create a demo application using MongoDB and Express.

🎯 Minikube

Open source tool
One node kubernetes cluster that runs in a virtual box.
One node cluster where the master and worker processes both run on one node
It has docker container runtime pre-installed.
It runs on your machine using a virtual box or some other hypervisor. So minikube will create a virtual box on your laptop and the node will run inside that virtual box.

🎯 Kubectl

It provides a way to interact with the cluster, to create a pod or another K8s component.
kubectl is a command line tool for the K8s cluster.

🎯 Local Setup

🧩 1. Install hypervisor

Minikube needs virtualization or hypervisor so first install it.

brew install hyperkit

🧩 2. Install Minikube

brew install minikube

minikube has kubectl as a dependency, so the above command will install kubectl as well.

🧩 3. Create and start Cluster

Use the following command to start a K8s cluster

minikube start --vm-driver=hyperkit

Minikube needs to be run inside a virtual box so we need to tell Minikube which hypervisor it should use to start the cluster. Therefore in the start command, we mention the hyperkit hypervisor.

🧩 4. Minikube Dashboard

Use the following command to open the minikube dashboard UI in the browser

minikube dashboard

🎯 YAML Configuration File

Every configuration file in K8s has 3 parts:

Metadata: The first part contains information about the metadata of that component.

There is one key called kind mentioned in the configuration file which defines what K8s component we are targeting.

Status: It will be automatically generated and added by the K8s.
Specification: where we put every kind of configuration that we want to apply for that component. Attributes of "spec" are specific to the kind of component that we are creating.

Inside Specification, there is another section called Template.

Template

It has its own "metadata" and "spec" section.
The configuration mentioned inside the template is applied to a pod
Template specification specifies which image needs to be used, on which port it should run and its name.

The labels & Selectors

metadata part contains the label and the specification part contains the selectors.
In metadata, we give component labels in key-value pairs.

This label is matched by the selector to create a connection. So this way deployment will know which pods belong to it.

🎯 Demo Project

Now that we have enough understanding of the K8s concept, let's deep dive to create a demo project to get a more clear picture.

We will create a demo express application and connect it with the MongoDB database and will see step by step guide on how each K8s component comes into the picture.

🔍 Step 1: Create a MongoDB Deployment

In K8s we do not directly work with the Pods but there is an abstraction layer over a Pod called Deployment with which we will directly work.

In mongo-deployment.yaml file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mongodb-deployment
  labels:
    app: mongodb
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongodb
  template:
    metadata:
      labels:
        app: mongodb
    spec:
      containers:
      - name: mongodb
        image: mongo
        ports:
        - containerPort: 27017
        env:
        - name: MONGO_INITDB_ROOT_USERNAME
          valueFrom:
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-username
        - name: MONGO_INITDB_ROOT_PASSWORD
          valueFrom: 
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-password

In the image, we have specified "mongo", so it will fetch the latest mongo image from the docker hub.
These require 2 env. variables called MONGO_INITDB_ROOT_USERNAME & MONGO_INITDB_ROOT_PASSWORD . To get these values we will create a Secret from where we will reference that value.
secretKeyRef.name : specifies the name of the secret (which we have defined in Step 2)
secretKeyRef.key : specifies the key name which we have declared under the data section in Step 2.
Please note: Secret must be created before the deployment because this deployment step has dependency over the Secret step.
Create a deployment using the following command:
```
kubectl apply -f mongo-deployment.yaml
```

Use the following command to get all the K8s components:

```bash
kubectl get all
```

kubectl get events

🔍 Step 2: Create Secrets

We need credentials (username or password) to connect to the database.

So we're going to create a Secret that contains the credentials.

In mongo-secret.yaml file:

apiVersion: v1
kind: Secret
metadata:
    name: mongodb-secret
type: Opaque
data:
    mongo-root-username: dXNlcm5hbWU=
    mongo-root-password: cGFzc3dvcmQ=

Values inside the data are not plain text this should be encrypted in some way. Storing the data in a Secret component doesn't automatically make it secure.
We can easily generate the base64 encoded for any plain text using the following command:
```
echo -n 'plain text' | base64  

// Output: cGxhaW4gdGV4dA==
```
Secret must be created before the deployment. So let's first create a Secret component using the following command:
```
kubectl apply -f mongo-secret.yaml
```

To get the list of all secrets created:
```
kubectl get secret
```

🔍 Step 3: Create an Internal service for MongoDB

First, we created a MongoDB pod and to talk to that pod we will need an internal service, which means no external request to that pod is allowed. Only components inside the same cluster can talk to it.

In mongo-service.yaml file:

apiVersion: v1
kind: Service
metadata:
  name: mongodb-service
spec:
  selector:
    app: mongodb
  ports:
    - protocol: TCP
      port: 27017
      targetPort: 27017

app: mongodb this name should be the same as the label name given in Step 1 to connect to the pod through a label.
port: service port
targetPort: containerPort of deployment
```
kubectl apply -f mongo-service.yaml
```

🔍 Step 4: Create an Express deployment

In express-deployment.yaml file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mongo-express
  labels:
    app: mongo-express
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongo-express
  template:
    metadata:
      labels:
        app: mongo-express
    spec:
      containers:
      - name: mongo-express
        image: mongo-express
        ports:
        - containerPort: 8081
        env:
        - name: ME_CONFIG_MONGODB_ADMINUSERNAME
          valueFrom:
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-username
        - name: ME_CONFIG_MONGODB_ADMINPASSWORD
          valueFrom: 
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-password
        - name: ME_CONFIG_MONGODB_SERVER
          valueFrom: 
            configMapKeyRef:
              name: mongodb-configmap
              key: database_url

In the image, we have specified "mongo-express", so it will fetch the latest mongo-express image from the docker hub.
This image will require a database name to connect for which we will require a MongoDB address or internal service. We will specify the database URL inside config map in Step 5.
Next, we need credentials for authentication ME_CONFIG_MONGODB_ADMINUSERNAME & ME_CONFIG_MONGODB_ADMINPASSWORD . These are same secrets which we have created in Step 2.
```
kubectl apply -f express-deployment.yaml
```

🔍 Step 5: Create Config Map for Express App

First, we will need the database URL of MongoDB, so that our express app can connect to the database.

In Config Map, we'll specify all the centralised & external configuration.

So we will create Config Map that contains the database URL.

In express-configmap.yaml file:

apiVersion: v1
kind: ConfigMap
metadata:
  name: mongodb-configmap
data:
  database_url: mongodb-service

database_url : it is MongoDB internal service name which we have specify in Step 3 above.
ConfigMap must already be in the cluster when referencing it in previous step.
```
kubectl apply -f express-configmap.yaml
```

🔍 Step 6: Create an External Service for Express App

We need an external service so that it can be accessed through a browser.

In express-service.yaml file:

apiVersion: v1
kind: Service
metadata:
  name: mongo-express-service
spec:
  selector:
    app: mongo-express
  type: LoadBalancer  
  ports:
    - protocol: TCP
      port: 8081
      targetPort: 8081
      nodePort: 30000

We have exposed a service port at 8081.
TargetPort is where the container port is listening.
To make it external service:
- add type: LoadBalancer
- define nodePort where the external IP address is open. This nodePort actually has a range between 30000 - 32767.
```
kubectl apply -f express-service.yaml
```

    ```yaml
    kubectl get services
    ```

    ```bash
    minikube service mongo-express-service
    ```

This command will assign public IP address to an external service

🎯 Kubectl Basic Commands

✏️ Get Status of K8s Components

kubectl get nodes : get the status of nodes

kubectl version: get the latest version
kubectl get services: get a list of all services

✏️ Debugging Pods

kubectl logs [POD_NAME]: shows what the application inside the pod logs.
kubectl describe pod [POD_NAME]: shows additional information about pods and all the state changes that happen inside the pod.
kubectl exec -it [POD_NAME] -- bin/bash : start a shell session for containers running in a K8s cluster. It’s a bit like SSH for Kubernetes.

✏️ CRUD Operations

kubectl create deployment [DEPLOYMENT_NAME]: to create a deployment
kubectl get deployments: to get a list of all deployments
kubectl edit deployment [DEPLOYMENT_NAME]: to update the deployment
kubectl delete deployment [DEPLOYMENT_NAME]: to delete deployment

✏️ Resource Metrics

kubectl top pod : Display resource (CPU/memory) usage of pods
kubectl top node : Display resource (CPU/memory) usage of nodes

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

Kubernetes: Main Components Overview

Anuradha Aggarwal — Wed, 28 Dec 2022 18:10:19 +0000

🔍 What is K8s?

Kubernetes, also known as K8s, is an open-source system for automating the deployment, scaling, and management of containerized applications.

Open-source container orchestration tool
Developed by Google
Helps you manage containerized applications in different deployment environments (like physical machines, virtual machines, or cloud env.)

🔍 The need for a container orchestration tool?

Trends from monolith to microservices
Increased usage of containers
Demand for a proper way of managing thousands of containers

Containers offer the perfect host for small independent applications. After the increased usage of container technologies now managing those multiple containers across multiple environments using scripts and self-made tools can be complex which leads to the need for some container orchestration tool and then Kubernetes comes into the picture.

🔍 What features do K8s offer?

High Availability or no downtime: application is always accessible by the user.
Scalability or high Performance (scale out automatically): application loads fast and users have a very high response rate from the application
Disaster recovery- if infrastructure has some problems like data is lost or the server explodes, a containerized application can be brought back to the latest state after recovery.

🔍 K8s Components

Let's learn about some of the components of K8s:

Clusters
Master node & Worker node
Pods
Services
Ingress
Config map
Secrets
Volumes
Deployment & Replica set

Before jumping over these components directly, let's take a case of some javascript application with a simple database and now let's look at how each component of K8s helps you to deploy our application and what is the role of each of the components.

🎯 Cluster

K8s lets you deploy containers on a set of nodes called a cluster.
A cluster is a set of master components that control the system as a whole & a set of worker nodes that run containers.

🎯 Pod

The smallest unit of the K8s cluster
It's an abstraction layer over a container and can contain a group of containers
It creates a running environment or layer on top of the container
The main reason for this abstraction layer is K8s wants to abstract away the container runtime. So we don't have to directly work with container technology.
Each Pod is meant to run one application container inside of it. You can also run multiple containers inside one Pod but that's usually the case when there is one main application container and many helpers containers or services that need to be run inside that container.
Each Pod contains a unique IP address using which they can communicate with each other. This is an internal IP address.

One important thing about Pod is that they can die very easily and if that happens new Pod is created in its place and a new IP address is assigned to them which may be inconvenient if we are communicating with our database using that IP address because we now have to adjust it every time new Pod restarts. To tackle this problem another component of K8s comes into the picture called Services.

🎯 Services

It's a static IP address or permanent IP address that can be attached to each Pod.
A service groups a set of pods together & provides a stable endpoint for them.
The lifecycle of pods and services is not connected so even if the pod dies, the service and its IP address will stay the same.

🎯 Ingress

Ingress exposes HTTP and HTTPS routes from outside the cluster to services within the cluster.
The role of Ingress is to maintain the DNS routing configurations.
This enables you to access your application through a browser. For this, you need to create an external service. External service is a service that opens communication through external sources.
But we don't want our database to be accessible through public request so for that we will create an internal service.

🎯 Config Maps

Pods communicate with each other using services. For example, our application will have a database endpoint using which we can communicate with our databases but where should we configure this endpoint??
Config map provides external configuration to your application or some other services that you use and in K8s you just connect it to the Pod so that pod gets the data that configMap contains. So in future, if we change the name of a service or endpoint for that service we just need to update the configMap.
Configuration may also contain the credentials of the database or any other private information which cannot be stored in a plain text format so for that we will use Secret.

🎯 Secret

Just like config maps but used to store secret data.
It's not stored in a plain text format but in a base64 encoded format.
This may contain things like credentials, passwords, certificates etc. which you don't want other people to have access to.
We will connect this secret to the pods so that pods can have access to that information.

🎯 Volumes

We have a database which our application uses and it regenerates some data but if the database pod gets restarted, the data would be lost but we want our data to be persistent for the long term. So to avoid this scenario here comes the role of Volumes.
It attaches physical storage to a hard drive to your pod and that storage could be either on a local machine meaning the same server node where the pod is running or it could be on the remote storage meaning outside of the K8s cluster maybe cloud storage.
This is used to overcome the problem of data loss whenever pods get restarted.
K8s cluster explicitly doesn't manage any data persistence so taking a backup of the data is the responsibility of the user.

🎯 Deployments & Replica Set

Till now our application is running perfectly fine and the user can access it through a browser but what happens if my application pods die or crash or we have to restart the pod because we have built a new container image? This will cause a downtime where a user cannot reach my application. So that is exactly where the advantage of distributed systems and containers comes into the picture.

Instead of relying on 1 application pod or 1 database pod, we will replicate everything on multiple servers. So we would have another node where a replica or clone of our application would run which will also be connected to the same service.

Service also acts as a load balancer. It will catch the request and forward it to whichever pod is least busy.

To create a replica we'll define a blueprint for My-App pod and specify how many replicas of that pod you would like to run. That blueprint is called Deployment.
In K8s we will not directly work with pods instead we will create deployments where we can specify how many replicas we actually want. You can also scale up or scale down the number of replicas you want.
In the case of the database pod, we will create its replica also but here is a catch:- We can't replicate a database using a deployment because the database has a state. If we clone or replicate the database they would all need to access the same shared data storage and there you would need some kind of mechanism that manages which pods are currently writing to that storage and which pod is currently reading from that storage to avoid data inconsistencies. This is managed by Stateful Set.
Deployments for stateLESS Apps.
Stateful Set for stateFUL Apps or databases.

🔍 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

useState Hook In React

Anuradha Aggarwal — Sun, 18 Sep 2022 18:29:50 +0000

🎯 What are Hooks?

Hooks are a new feature addition in React version 16.8 which allows you to use React features without having to write a class.
Previously you could use state only within class components but with hooks now it is possible to use state without writing a class.
Hooks don't work inside classes.

🎯 Why Hooks?

To work with classes you have to understand how this keyword works in javascript. You also need to remember to bind event handlers in class components.
Classes don't minify very well and make hot reloading very unreliable.
Hooks help to reuse stateful component logic without changing the component hierarchy.
Rather than forcing a split based on the lifecycle methods, hooks let you split one component into smaller functions based on what pieces are related.

🎯 Rules of Hooks

Only call hooks at the "Top Level" of your react functions
Don't call hooks inside loops, conditions, or nested functions.
Only call hooks from React functions. Call them from within React functional components and not just any regular javascript function.

Now let's learn about the very first hook- useState hook.

We will try to understand this using a simple example.

In our example, we'll create a simple button that will increment the value of the counter on the onClick event.

🎯 Manage State using Class Component

First, we'll look at how to implement the same using the class component.

Create a class component
Create a state variable and initialized it to 0.
Create a method that is capable of setting this state value.

import React, { Component } from 'react';

class ClassCounter extends Component {

  constructor(props){
    super(props);

    this.state = {
      count: 0
    }
  }

  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>
           Increment Value
        </button>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

export default ClassCounter;

🎯 useState Hook

useState is a hook that lets you maintain react state to functional components.
Hooks are just functions so we simply call them.
This hook accepts an argument defining the initial value of the state property.
It returns the pair of values. current value of the state property and a method that is capable of updating that state property.

📌 Manage State using Functional Component

Now let's take a look at how to implement the above example using a functional component.

Create a functional component
We need a state property initialized to 0.
We need a method capable of setting that state property value.
Syntax which we have used below in const [counter, setCounter] = useState(0); is called Array Destructuring
The variable counter will always contain the current state value and setCounter will accept an argument and set a counter value to that argument.

import React, { useState } from 'react';

export const FunctionalCounter = () => {
  const [counter, setCounter] = useState(0);

  const handleIncrement = () => {
    setCounter(counter + 1);
  }

  return (
    <div>
      <button onClick={handleIncrement}>
         Increment Value
      </button>
      <p>{counter}</p>
    </div>
  )
}

Notice the usage of useState hook in the above code snippet.

A very first time the component renders a state variable is created and initialized with the default value of 0. The default value is never used on re-renders.
When you click on the button the setCounter method is called which will add 1 to the current counter value.
setCounter method will cost the component to re-render.
After the re-render counter will contain the updated value.

📌 useState with previous state

Now let's take a look at an example where we'll see how to update the state based on the previous state.

Let's say, we want to implement the count value by 5 each time user clicks on the button.

Let's write a code for the same.

import React, { useState } from 'react';

export const FunctionalCounterWithPreviousState = () => {
  const [counter, setCounter] = useState(0);

  const handleIncrement = () => {
    for(let i = 0; i < 5; i++){
      setCounter(counter + 1);
    }
  }

  return (
    <div>
      <button onClick={handleIncrement}>
          Increment Value
      </button>
      <p>{counter}</p>
    </div>
  )
}

When we'll run the above code snippet you will notice that it will not work as expected. But Why??

Here comes the concept of Batch Rendering.

✏️ Batch Rendering

React may batch multiple setState() calls into a single update for performance.

The main idea is that no matter how many setState calls you make inside a React event handler or synchronous lifecycle method, it will be batched into a single update. That is only one single re-render will eventually happen.

This functionality is relevant for both hooks and regular class components, and its purpose is to prevent unnecessary rendering.

As React updates the state Asynchronously, you should not rely on their values for calculating the next state.

So what other way we can use to achieve our target? Now we'll use the second form of the setCounter function.

Basically, instead of passing in a value of the new state variable, we pass in the function that has access to the old state value.

So now we'll update our code as follows:

import React, { useState } from 'react';

export const FunctionalCounterWithPreviousState = () => {
  const [counter, setCounter] = useState(0);

  const handleIncrement = () => {
    for(let i = 0; i < 5; i++){

       // Update the value based on the previous value
      setCounter(prevCounter => prevCounter + 1);
    }
  }

  return (
    <div>
      <button onClick={handleIncrement}>Increment Value</button>
      <p>{counter}</p>
    </div>
  )
}

Now it will work as expected.

📌 useState with Objects

Now we will use an object as a state variable with the useState hook.
So instead of storing a variable, we will work with objects this time.

In the below example, we will initialize the state variable with an object with firstName & lastName as a key.

Let's take a look at the code first.

import React, { useState } from 'react';

const HooksWithObject = () => {
  const [name, setName] = useState({firstName: '', lastName: ''});

  return(
    <div>
      <div>
        <label>Enter FirstName: </label>
        <input 
          type='text' 
          value={name.firstName} 
          onChange={e => setName({firstName: e.target.value})} 
        />
      </div>
      <div>
      <label>Enter LastName: </label>
        <input 
          type='text' 
          value={name.lastName} 
          onChange={e => setName({lastName: e.target.value})} 
        />
      </div>
      <p>firstName: {name.firstName}</p>
      <p>lastName: {name.lastName}</p>
    </div>

  )
}

export default HooksWithObject;

In the above code snippet, there are input fields that will update the values of firstName & lastName as a user types in the input fields.

As you notice above, whenever a user updates the lastName input field, the firstName input field gets reset to an empty string and removed from the state variable

This is happening because useState does not automatically merge and update the object.
This is the key difference between the setState in Class Component and useState in the functional Component. setState will merge the state whereas useState hook setter function will not merge the state. You can use spread operator to handle this situation.

So now update our code accordingly.

import React, { useState } from 'react';

const HooksWithObject = () => {
  const [name, setName] = useState({firstName: '', lastName: ''});

  return(
    <div>
      <div>
        <label>Enter FirstName: </label>
        <input 
          type='text' 
          value={name.firstName} 
          onChange={e => setName({...name, firstName: e.target.value})} 
        />
      </div>
      <div>
      <label>Enter LastName: </label>
        <input 
          type='text' 
          value={name.lastName} 
          onChange={e => setName({...name, lastName: e.target.value})} 
        />
      </div>
      <p>firstName: {name.firstName}</p>
      <p>lastName: {name.lastName}</p>
    </div>

  )
}

export default HooksWithObject;

In the above code snippet, while setting the name variable on onChange event, we'll first copy every property in the name object and then just overwrite the firstName field with a different value.

Now when we'll check our result. It will work as expected.

🎯 Summary

The useState hook allows you to maintain a state inside functional components.
In classes, the state is always an object. With the useState hook, the state doesn't have to be an object. It can be an array, number, boolean or string, etc.
The useState hook returns an array with 2 elements. The first element is the current value of the state and the second element is a state setter function.
State setter function will cause the component to re-render.
In case your new state value depends on the previous state value you can pass a function to the setter function. The setter function will receive the previous state as its argument.
When dealing with objects or arrays, always make sure to spread your state variable and then call the setter function.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

How to create dynamic pages in Gatsby from MDX and YAML?

Anuradha Aggarwal — Sun, 06 Mar 2022 16:23:44 +0000

Gatsby allows you to tie data from many different sources together and present them in a unified way.

In this article, we'll discuss how to set up Node JS and Gatsby to pull the data, transform it into usable nodes, and auto-generate pages based on templates.

🔍 Data from Yaml File

We can store our data in a YAML file and then it acts as one of our data sources.

We'll store all our data sources inside the content folder.

In content/records.yaml file:

- name: Gatsby
  description: Static Site Generator

- name: HTML
  description: Static Website

- name: Node JS
  description: Server side rendering

🔍 Source Plugin

We know gatsby can work with multiple data sources and it can add them all to our graphQL layer, however, to do this for each source that we use we need to install and register a source plugin, and that way gatsby knows how to connect to that data source.
Source plugins are all registered inside the gatsby config file inside the plugin array.
plugins also need to be installed into our project using npm, so gatsby can find them as well.

📍gatsby-source-filesystem Plugin

A gatsby source plugin for sourcing data into your gatsby application from your local filesystem.
Install it using npm install gatsby-source-filesystem.
Register them inside the plugins array in the gatsby-config.js file.

module.exports = {
  siteMetadata: {
    title: 'Learn Gatsby',
    description: 'step-by-step guide to learn gatsby',
    author: 'Anuradha Aggarwal',
    lang: 'en',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `records`,
        path: `${__dirname}/content/`
      }
    },
  ]
}

In the above code snippet, we'll provide the path of the directory which contains our yaml file.

graphQL treats each file as an individual node. Now we can check in graphiQL that it will create a separate node in the graphQL layer.

We can have multiple instances of the filesystem source plugin.
For every different folder that we have, we need a different instance in the gatsby-config.js file.

Now let's see how Gatsby transforms this YAML file.

🔍 Transformer Plugins

We want gatsby to know that this file exists and we want you to process it as a YAML file so that we get a JSON object in return we can parse through GraphQL. That's done using the gatsby-transformer-yaml plugin.

There are transformer plugins present for almost any type of data.
The transformer plugin takes a data source & transforms it into something easier to use in our components that we can query in our graphql layer.
Firstly, install transformer plugin for yaml file using npm install gatsby-transformer-yaml
Now in gatsby-config.js file, register this plugin.

  plugins: [
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `records`,
        path: `${__dirname}/content/`
      }
    },
  ]

Now in graphiQL, we'll have a new type of content, which contains nodes related to our yaml file as well. Now if you run graphQL query you'll get the exact content that we have stored in our yaml file.

With the help of this plugin, we have full access to the data and we can use it to display on the front-end.

Once gatsby is able to access the data from the YAML file through GraphQL we can work with the data the same way as we have done in the previous post using graphQL queries.

This is one example to show how gatsby works with the data present in a different format. But what if we have data and we want to transform it into a separate page.
Most common use case of gatsby is blogging platform.

Now let's see how gatsby works with Markdown files.

🔍Generate Pages from Markdown File

We'll follow the following directory structure for the below code:

📦gatsby-project
 ┣ 📂content
 ┃ ┣ 📜blog.mdx
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┗ 📜Layout.js
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜about.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂styles
 ┃ ┗ 📂templates
 ┃ ┃ ┗ 📜Blog.js
 ┣ 📜gatsby-config.js
 ┣ 📜gatsby-node.js
 ┗ 📜package.json

📍Step 1: Create Markdown file

In the first step, we'll create a markdown file inside the content folder.

In content/blog.mdx file, create your markdown file

---
title: "My first blog"
description: "This file is to show how to use markdown in the gatsby site"
---

## What is Lorem Ipsum?
Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Leeriest sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Lauds PageMaker including versions of Lorem Ipsum.

## Why do we use it?
It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem Ipsum will uncover many websites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like)

As you notice in the above file we have some data inside triple dashes. This data is known as frontmatter

🪄 Frontmatter

Frontmatter in markdown file represents metadata or extra information about that particular file. It is denoted by the triple dashes at the start and end of the block.

📍Step 2: Register markdown content using source plugin

Now before we'll dynamically pump this data inside our graphQL layer, we need to inform gatsby that these markdown files are present here which will act as one of our data sources. So to do this we will register them inside the gatsby-config.js file using the source plugin as we have done before for yaml files.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blogs`,
        path: `${__dirname}/content/`
      }
    }
  ]
}

📍Step 3: Use Transformer plugin for Markdown

Transformer plugins in gatsby take a data source and transform it into something easier to use in our components that we can query in our graphQL layer.

For the markdown file we'll use the gatsby-plugin-mdx plugin:

First, install it using npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
Register it inside gatsby-config.js file, in plugin array.

module.exports = {
     plugins: [
        `gatsby-plugin-mdx`
     ]
}

By default, only files with the .mdx file extension are treated as MDX when using the gatsby-source-filesystem. To use .md or other file extensions, you can define an array of file extensions in the gatsby-plugin-mdx section of your gatsby-config.js.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          default: require.resolve("./src/templates/Blog.js"),
        },
      },
    },
  ],
}

Now when we check on graphiQL, it will show our markdown file content embed into the graphQL layer.

As shown in the above image, this plugin comes with the additional feature which gives you the ability to query out tableOfContent or frontmatter for each markdown file which you can further use in your site.

📍Step 4: Create a template for Markdown

Inside the src folder, create a new folder called templates, this will store the template required to display the content of our markdown file.

In src/templates/Blog.js file:

import { MDXRenderer } from "gatsby-plugin-mdx";
import React from "react";
import Layout from "../components/Layout";

const Blog = ({ pageContext }) => {
  const { blogDescription, blogTitle, body } = pageContext;
  return (
    <div>
      <Layout>
        <h1>{blogTitle}</h1>
        <p>{blogDescription}</p>
        <br />
        <MDXRenderer>{body}</MDXRenderer>
      </Layout>
    </div>
  );
};

export default Blog;

pageContext prop has its special meaning. It gives you access to all the required information of your markdown file.

🪄 pageContext

Using the pageContext props in the template component can come with its performance advantages, of getting in all the data you need at build time; from the createPages API.
This removes the need to have a GraphQL query in the template component.

🪄 MDXRenderer

MDXRenderer is a React component that takes compiled MDX content and renders it. You will need to use this if your MDX content is coming from a GraphQL page query or StaticQuery.

📍Step 5: Use gatsby createPage API

We want gatsby to automatically generate pages for each markdown file via NodeJS.

To do this we'll use the file called gatsby-node.js.

gatsby-node.js file will run at the build time in a node environment so we can run certain functions inside this file to do things like fetch data & then generate pages with that data based on a template file that we have created earlier.

To create a page dynamically we'll use the gatsby createPage API.

🪄 createPage API

Create pages dynamically. This extension point is called only after the initial sourcing and transformation of nodes plus creation of the GraphQL schema are complete so you can query your data in order to create pages.

In gatsby-node.js file:

exports.createPages = async ({ actions, graphql, reporter }) => {
  const result = await graphql(`
    query {
      allMdx {
        nodes {
          body
          slug
          frontmatter {
            title
            description
          }
        }
      }
    }
  `);

  if (result.errors) {
    reporter.panic("failed to create posts ", result.errors);
  }

  const pages = result.data.allMdx.nodes;

  // The context object **is** supplied to MDX templates through the pageContext prop.

  pages.forEach((page) => {
    actions.createPage({
      path: page.slug,
      component: require.resolve("./src/templates/Blog.js"),
      context: {
        pathSlug: page.slug,
        body: page.body,
        blogTitle: page.frontmatter.title,
        blogDescription: page.frontmatter.description
      },
    });
  });
};

In the above code snippet, first we'll make an graphQL query and use the gatsby createPage API to create new page. Inside this we can define:

component: It refers to the template you want to use for your markdown file.
context: this object contains all the data you want to pass to the template as a pageContext prop.

Now if you navigate to http://localhost:8000/blog it will show your newly created page from markdown:

Finally we have created our first dynamic page 🎉🎉. But there are lot more we can do with the markdown files. Let's see more cool features of MDX.

📍More about MDX

🪄 What is MDX?

According to Gatsby's Official documentation:

MDX is a markdown for the component era. It lets you write JSX embedded inside markdown. It’s a great combination because it allows you to use markdown’s often terse syntax (such as # heading) for the little things and JSX for more advanced components.

MDX allows you to use React components alongside Markdown.
You can also import and reuse your own React components and even other MDX documents.

In your markdown file:

--
title: Example to show how to use React Components inside Markdown
---
import { CustomHeading } from "./components/Headings";

## You can import your own components.
<CustomHeading>This will show my custom heading component</CustomHeading>

To avoid having to import the same component inside of every MDX document, you can add components to an MDXProvider to make them globally available in MDX pages. This pattern is sometimes referred to as shortcodes.

🪄 MDXProvider

MDXProvider is a React component that allows you to replace the rendering of tags in MDX content.
You can also expose any custom component to every mdx file using MDXProvider

To use MDXProvider just make changes in your src/components/Layout.js file:

import React from 'react';
import Header from './Header';
import { MDXProvider } from "@mdx-js/react"

export default function Layout({ children }) {

  const CustomHeading = props => <h2 style={{ color: "green" }} {...props} />

  const components = {
    h2: CustomHeading,
  }

  return (
    <div className="layout">
      <Header />
      <div className="content">
        <h1>{title}</h1>
        <p>{description}</p>
        <hr />
        {/* content for each page */}
        <MDXProvider components={components}>{children}</MDXProvider>
      </div>
    </div>
  )
}

Using this, now all the H2 heading inside the mdx file will be updated with our custom heading component.

🔍 Other Useful Resources

🔍 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

Forem: Anuradha Aggarwal

NPM v/s NPX

🎯 NPM

📍 Example

📍 Usage

🎯 NPX

📍 Example

📍 Usage

🎯 Wrap Up!!

Building Your First CLI Tool

🎯 What is CLI Tool?

🎯 Project Setup

🎯 Commander

What commander gives you?

🎯 Link it globally

🎯 CLI Building Blocks

🎯 Wrap Up!!

React Design Patterns

🎯 1. Presentational & Container Component

🎯 2. Higher Order Components

🎯 3. Render props

🎯 4. Compound Components

🎯 5. Hooks

🎯 Wrap Up!!

Configuration v/s Composition - Design Reusable Components

🎯 Component Requirements

🎯 Configuration

📍 Pros:

📍 Cons:

🎯 Composition

📍 Pros:

📍 Cons:

🎯 Which Approach to use?

🎯 Summary

🎯 Wrap Up!!

Role of Service Worker In PWAs

🎯 Register a Service Worker

🎯 Install Event

🎯 Activate Event

🎯 Fetch Event

🎯 Lighthouse Audit

🎯 Install Prompt

🎯 Wrap Up!!

Service Workers

🎯 Introduction

🎯 Service Worker Life Cycle

🎯 Advantages

🎯 Wrap Up!!

Progressive Web Apps

🎯 What is PWA?

🎯 Advantages of PWA

🎯 Technical components of PWA

🎯 Basic Setup

🎯 Web App Manifest

🎯 Application Shell

🎯 Wrap Up!!

Serverless Functions & FaaS with Vercel

🎯 What are Serverless means?

🎯 Serverless Function

🎯 Function as a Service

🎯 How does it work?

🎯 Advantages of Serverless

🎯 Drawbacks of Serverless

🎯 Create a Serverless Function on Vercel

🔍 Step 1: Install Vercel CLI

🔍 Step 2: Create a Next.js project

🔍 Step 3: Create a Serverless Function

🔍 Step 4: Deploy a Serverless Function

🔍 Step 5: Check Logs

🎯 Resources

🎯 Wrap Up!!

Kubernetes - With Mongo & Express App

🎯 Minikube

🎯 Kubectl

🎯 Local Setup

🧩 1. Install hypervisor

🧩 2. Install Minikube

🧩 3. Create and start Cluster

🧩 4. Minikube Dashboard

🎯 YAML Configuration File

What `commander` gives you?