Forem: harshchandwani

Middleware to Asp.net Core MVC Application + Custom Middleware

harshchandwani — Sun, 02 Jun 2024 05:02:01 +0000

Hello everyone,

Today, I’m excited to guide you through the process of adding custom middleware to your application. Middleware is a vital component of any application, and understanding how to effectively use it can greatly enhance your development process.

Why Middleware Matters

Middleware is crucial in handling all requests and responses in your application. By leveraging middleware, you can streamline and manage various tasks such as:

Authentication: Verifying user identity.
Authorization: Checking user permissions.
Logging: Recording details about requests and responses.
Error Handling: Catching and managing exceptions.

Using middleware can save you significant time and effort by centralizing and simplifying these common tasks.

What is Middleware?

Middleware is a piece of code (or a component) that sits in the HTTP request-response pipeline. It has access to all incoming requests and outgoing responses, allowing it to process or manipulate them. Middleware can log information, modify requests/responses, or even terminate requests early.

Common Examples of Middleware

Some commonly used middleware includes:

Authentication Middleware: Verifies user identity.
Authorization Middleware: Checks user permissions.
Logging Middleware: Logs details about requests and responses.
Exception Handling Middleware: Catches and handles exceptions.
Static Files Middleware: Serves static files like images, CSS, and JavaScript.

public class Startup
{
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        // Add custom middleware
        app.Use(async (context, next) =>
        {
            await context.Response.WriteAsync("Hello from Middleware");
            await next(); // Call the next middleware in the pipeline
        });

        // Other middleware registrations
        app.UseStaticFiles();
        app.UseAuthentication();
        app.UseMvc();
    }
}

Adding Custom Middleware

Let’s walk through the process of adding a custom middleware that writes "Hello from Middleware" to every response.

Steps to Add Custom Middleware
Open Startup.cs: This file configures your application's request pipeline.
Modify the Configure Method: Add your custom middleware within the Configure method.

I hope this helps you understand how to integrate custom middleware into your application. Happy coding!`

Recoil: Cheatsheet

harshchandwani — Fri, 19 Jan 2024 12:58:27 +0000

Hello Developers,
This article was written when I was reading and learning to use Recoil for a project. I know about Redux, but Recoil is much more used in Open-Source and is gaining popularity, so this is a small article with shortcuts to use Recoil.

For more information: https://recoiljs.org/

Installation:
For npm: npm install recoil
For CDN: <script src = "https://cdn.jsdelivr.net/npm/recoil@0.0.11/umd/recoil.production.js"></script>

To use Recoil, you need to make every component use Recoil.

//App.js
import React from 'react'
import { RecoilRoot } from 'recoil'
import ChildComponent from './component/ChildComponent'
const App = () => {
  return (
      <RecoilRoot>
        <ChildComponent />
      </RecoilRoot>   
  )
}

Atoms are the smallest units of state in Recoil, serving as fundamental variables. This article guides you through creating and using an Atom, providing a clean structure for managing state variables within React components.

Setting Up Your Atom:
Organize your state-related code in a 'utils' file for better project structure management.

//Atom.js
import { atom } from "recoil"
export const counterAtom = atom({
    key: 'counterAtom', //A unique identifier for the Atom, ensuring uniqueness across your application.
    default: '12' //The initial value of the Atom, is set to '12'. Adjust based on your desired initial state.
});

Now, as you have created an atom or variables, how to access them?
There are multiple ways.
Let's go🚀

//Component.js

export const Component = () => {
  const xAtom = useRecoilValue(xAtom); //only access to value
  const [yAtom, setyAtom] = useRecoilState(yAtom); //same as useState
  const setZAtom = useSetRecoilState(zAtom); //on set function, no access to the current value, but can change using set variable
  return (
    <>
      <p>xAtom</p>
      <button onClick={() => setyAtom(yAtom+ 1)}>yAtom</button>
      <button onClick={() => setZAtom(c + 1)}>zAtom</button>
    </>
  )
}

But what if I want to combine two atoms?

One way is to do that in component [useMemo]
Other is to use a selector

//Atom.js
import { atom, selector } from "recoil"
export const xAtom = atom({
    key: 'xAtom',
    default: 10
})
export const yAtom = atom({
    key: 'yAtom',
    default: 11
})

export const sum = selector({
    key: 'sum',
    get: ({get}) => {
        return (
            xAtom.xAtom + 
            yAtom.yAtom
        )
    }
})

How to accept and store backend calls

import { atom, selector } from "recoil"
import axios from "axios";
export const information = atom({
    key: 'information',
    default: selector({
        key: "informationSelector", 
        get: async () => {
            const res = await axios.get("somerandomsite");
            return res.data
        }
    })
})

What is Atom Family

When you are making Todo, how will store multiple todo, creating different atom for different todo?
No, for this Atom Family is here
Let's have an example

//Atom.js
import { atomFamily } from "recoil"
const TODOS = [{
    id: 1,
    title: "Go to GYM",
    description: "Hit the gym"
}, {
    id: 2,
    title: "Go to Office",
    description: "Code something new"
}]

export const todoAtomFamily = atomFamily({
    key: "todoAtomFamily",
    default: id => {
        return TODOS.find(x => x.id === id)
    },
});

//App.js
import {todoAtomFamily } from './Atom'
const App = () => {
  return (
      <RecoilRoot>
        <Main />
      </RecoilRoot>   
  )
}
const Main = () => {
      <Todo id={1} />
  )
}
function Todo({id}){
  const currentTodo = useRecoilValue(todoAtomFamily(id));
  return (
    <>
      {currentTodo.title}
      {currentTodo.description}
    </>
  )
}

Selector Family

//Atom.js
import { atomFamily, selectorFamily } from "recoil";
import axios from "axios";

export const todosAtomFamily = atomFamily({
  key: 'todosAtomFamily',
  default: selectorFamily({
    key: "todoSelectorFamily",
    get: (id) => async ({get}) => {
      const res = await axios.get(`https://sum-server.100xdevs.com/todo?id=${id}`);
      return res.data.todo;
    },
  })
});

//App.js
const [todo, setTodo] = useRecoilState(todosAtomFamily(id));

That's all about it. Hope you get an idea of what recoil is and how to use it.
I know the Recoil selector family is a little difficult and hard to understand, but it also used less.

Thanks
Harsh Chandwani
Follow for more: https://twitter.com/heyy_harshh

Understanding Middlewares

harshchandwani — Wed, 27 Dec 2023 05:19:57 +0000

Hello Coders! Hope you are getting no bugs in the code, today, I want to share a little bit about what I am learning in MIDDLEWARES, as the name suggests, it is something that comes into the middle. It is the pre-computing of something. Let's take an example and understand.

const express = require("express");
const app = express();
function userMiddleware(req, res, next) {
    const username = req.headers.username;
    const password = req.headers.password;

    if (username !== "carlover" || password !== "carpassion") {
        res.status(403).json({
            msg: "User doesn't exist",
        });
        return;
    } else {
        next();
    }
}
function carMiddleware(req, res, next) {
    const carId = req.query.carId;

    if (carId !== "sedan" && carId !== "suv") {
        res.status(411).json({
            msg: "Wrong car type",
        });
        return;
    } else {
        next();
    }
}
app.get("/car-checkup", userMiddleware, carMiddleware, function (req, res) {
    // do health checks here
    const carId = req.query.carId;

    //Do something with the car here
    res.json({
        msg: `Your ${carId} is in great condition!`
    });
});

app.listen(3000, () => {
    console.log("Ready");
});

Here we have 2 functions, userMiddleware and carMiddleware,
and we are calling the functions in the app.get, why because we want to pre-check the same as we will only get into the 3rd function when the 2nd function is successfully computed and the 2nd will only compute when the 1st will be successfully computed.

But where do we use Middlewares?

Authentication: Middlewares can validate user credentials, ensuring only authorized users access protected routes, and enhancing application security.

Logging: Implementing logging middleware helps track requests, errors, and user activities, aiding in debugging and performance monitoring.

Data Validation: Middlewares validates incoming data, ensuring it adheres to specified formats or rules, preventing invalid or malicious inputs from impacting the application.

CORS Handling: Middleware can manage Cross-Origin Resource Sharing (CORS), permitting or restricting resource access based on defined policies, and enhancing web application interoperability.