DEV Community: Navin Prasad

10 Easy Steps to Effortlessly Build RESTful API CRUD Operations in Ruby on Rails

Navin Prasad — Fri, 21 Jun 2024 04:57:01 +0000

Building a RESTful API with CRUD (Create, Read, Update, Delete) operations using Ruby on Rails (RoR) can seem daunting at first. However, Rails’ conventions and powerful features make it a smooth and efficient process. In this guide, we’ll walk you through the steps of setting up a RESTful API with CRUD operations using Ruby on Rails, from setting up the environment to deploying the application.

Introduction
Setting Up the Environment
Creating a New Rails Application
Generating a Scaffold
Configuring Routes
Understanding the Controller Actions
Testing the API Endpoints
Handling Errors and Validations
Securing the API
Deploying the Application
Conclusion

1. Introduction

RESTful APIs follow a set of principles that allow clients to interact with server-side resources via HTTP requests. CRUD operations represent the four basic functions of persistent storage: Create, Read, Update, and Delete. Ruby on Rails, with its elegant syntax and rich library of features, is an excellent framework for building such APIs.

2. Setting Up the Environment

Before we start, ensure you have the following installed on your machine:

Ruby (version 2.7.0 or higher)
Rails (version 6.0 or higher)
PostgreSQL (or another preferred database)

3. Creating a New Rails Application

Create a new Rails application by running:

rails new blog_api --api -d postgresql
cd blog_api

The --api flag generates a slimmed-down version of Rails specifically for API-only applications. The -d postgresql flag sets PostgreSQL as the database.

4. Generating a Scaffold

Rails scaffolding quickly generates a set of CRUD operations for a resource. Let’s create a scaffold for a Post resource with title and body attributes:

rails generate scaffold Post title:string body:text

This command generates:

Model (post.rb)
Database migration (db/migrate)
Controller (posts_controller.rb)
Routes
JSON views

Run the migration to create the posts table in your database:

rails db:create
rails db:migrate

5. Configuring Routes

Rails automatically adds routes for the Post resource. Open config/routes.rb to confirm:

Rails.application.routes.draw do
  resources :posts
end

This sets up RESTful routes for the Post resource.

6. Understanding the Controller Actions

The generated PostsController includes actions for CRUD operations:

index: Retrieves all posts
show: Retrieves a single post by ID
create: Creates a new post
update: Updates an existing post by ID
destroy: Deletes a post by ID

Each action corresponds to a specific HTTP method and endpoint:

GET /posts
GET /posts/:id
POST /posts
PUT/PATCH /posts/:id
DELETE /posts/:id

7. Testing the API Endpoints

Start the Rails server:

rails server

You can use tools like Postman or curl to test the API endpoints. Here’s how you can test each action:

Create a post:

curl -X POST http://localhost:3000/posts -d "post[title]=First Post&post[body]=This is the body of the first post."

Retrieve all posts:

curl http://localhost:3000/posts

Retrieve a single post:

curl http://localhost:3000/posts/1

Update a post:

curl -X PATCH http://localhost:3000/posts/1 -d "post[title]=Updated Title"

Delete a post:

curl -X DELETE http://localhost:3000/posts/1

8. Handling Errors and Validations

Add validations to the Post model to ensure data integrity. Open app/models/post.rb and add:

class Post < ApplicationRecord
  validates :title, presence: true, length: { minimum: 5 }
  validates :body, presence: true
end

Modify the create and update actions in PostsController to handle invalid data:

def create
  @post = Post.new(post_params)

  if @post.save
    render json: @post, status: :created, location: @post
  else
    render json: @post.errors, status: :unprocessable_entity
  end
end

def update
  if @post.update(post_params)
    render json: @post
  else
    render json: @post.errors, status: :unprocessable_entity
  end
end

9. Securing the API

To secure the API, you can implement authentication. One simple way is to use devise for user authentication and devise-jwt for token-based authentication.

Install the necessary gems:

gem 'devise'
gem 'devise-jwt'

Set up devise:

rails generate devise:install
rails generate devise User
rails db:migrate

Configure devise-jwt in the User model:

class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :jwt_authenticatable, jwt_revocation_strategy: JwtDenylist
end

Create the JWT denylist model:

rails generate model JwtDenylist

10. Deploying the Application

To deploy your application, you can use platforms like Heroku. First, ensure your app is ready for production by adding the necessary gems and configurations. Then, deploy to Heroku with the following commands:

heroku create
git push heroku master
heroku run rails db:migrate

11. Conclusion

You’ve now built a RESTful CRUD API with Ruby on Rails. This guide covered setting up a Rails API, generating a scaffold, configuring routes, handling errors and validations, securing the API, and deploying it. With Rails’ powerful tools and conventions, building and maintaining robust APIs becomes an effortless task.

Feel free to extend this application by adding more features, improving security, or integrating it with a frontend framework like React or Vue.js. Happy coding!

The post 10 Easy Steps to Effortlessly Build RESTful API CRUD Operations in Ruby on Rails appeared first on CodeLila.

Mastering Data Fetching with React’s useSWR Hook

Navin Prasad — Sun, 31 Dec 2023 06:00:07 +0000

In the realm of React development, efficient data fetching is a cornerstone for delivering seamless user experiences. As applications grow in complexity, the need for a robust data fetching solution becomes more apparent. Enter useSWR, a React hook that simplifies and optimizes data fetching, ensuring your application remains responsive and performant.

Introduction

Data fetching in React traditionally involves managing the state of asynchronous requests, handling loading states, errors, and updating the UI accordingly. The useSWR hook, part of the SWR (stale-while-revalidate) library, streamlines this process, providing a powerful toolset for handling data fetching in React applications.

In this blog post, we’ll explore the key features of the useSWR hook, dive into its usage with real-world examples, and discuss how it aligns with React’s vision, including compatibility with React Suspense. Whether you’re a seasoned React developer or just starting your journey, understanding and mastering useSWR can significantly enhance your ability to manage and fetch data efficiently.

What is `useSWR`?

At its core, useSWR is a React hook designed to handle data fetching with a focus on simplicity, performance, and reactivity. The hook is part of the SWR library, which adopts a “stale-while-revalidate” strategy. Let’s break down the key aspects:

Automatic Caching: One of the standout features of useSWR is its automatic caching mechanism. When you fetch data using the hook, it caches the result, allowing subsequent requests for the same data to be served from the cache rather than making redundant network requests.
Stale-While-Revalidate Strategy: The SWR library employs a “stale-while-revalidate” strategy. When data is requested, it returns the cached data immediately (if available), and concurrently revalidates the data in the background. This ensures that the user sees immediate results while the app remains up-to-date with the latest data.
Error Handling: useSWR simplifies error handling by providing a built-in mechanism to retry failed requests. This allows developers to implement custom error handling strategies and gracefully recover from network or server issues.

To use the useSWR hook, you’ll need to follow a few steps.

Step 1: Install SWR

First, you need to install the swr library in your project. You can do this using npm or yarn:

Using npm:

npm install swr

Using yarn:

yarn add swr

Step 2: Import the `useSWR` Hook

In your React component file, import the useSWR hook:

import useSWR from 'swr';

Step 3: Define a Fetcher Function

Create a function that fetches your data. This function will be passed to useSWR as the second argument. It can be a simple function that fetches data from an API endpoint using fetch:

const fetchData = (url) => fetch(url).then(response => response.json());

Step 4: Use the `useSWR` Hook

Use the useSWR hook in your React component. Pass the key (a unique identifier for your data, such as the API endpoint URL) and the fetcher function:

function MyComponent() {
  const { data, error } = useSWR('https://api.example.com/data', fetchData);

  if (error) {
    return <div>Error fetching data</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  // Render your component with the fetched data
  return (
    <div>
      <h1>My Component</h1>
      <p>Data: {data}</p>
    </div>
  );
}

Step 5: Handle Loading and Errors

Check the data and error properties returned by useSWR to handle loading states and errors in your component.

If data is undefined, it means the data is still being fetched.
If error is truthy, it means an error occurred during data fetching.

Optional Step: Customize Configuration

You can customize the behavior of the useSWR hook by passing an optional configuration object as the third argument. For example, you can set the refreshInterval to control how often the data should be revalidated.

const { data, error } = useSWR('https://api.example.com/data', fetchData, {
  refreshInterval: 5000, // Refresh every 5 seconds
});

This is a basic example to get you started. Depending on your use case, you may need to explore more advanced features and configurations provided by the useSWR hook, such as revalidation, focus revalidation, suspense mode, and more. The official documentation for SWR is a great resource for further details and examples: SWR Documentation.

How automatic caching works in useSWR hook?

Automatic caching is one of the powerful features of the useSWR hook. Here’s a basic code example illustrating how automatic caching works:

// Import necessary libraries
import useSWR from 'swr';

// Function to fetch data (replace with your actual API endpoint)
const fetchData = () => fetch('https://api.example.com/data').then(response => response.json());

// React component using useSWR for automatic caching
function DataComponent() {
  // Using useSWR with the key (e.g., API endpoint) and the fetcher function
  const { data, error } = useSWR('https://api.example.com/data', fetchData);

  // Loading state
  if (!data && !error) {
    return <p>Loading...</p>;
  }

  // Error state
  if (error) {
    return <p>Error fetching data: {error.message}</p>;
  }

  // Render the data
  return (
    <div>
      <h1>Data Component</h1>
      <p>Data: {data}</p>
    </div>
  );
}

// Example usage of DataComponent in your main App component
function App() {
  return (
    <div>
      <h1>Your App</h1>
      <DataComponent />
    </div>
  );
}

In this example:

The fetchData function is a placeholder for your actual data-fetching logic. It could be a function that makes an API request and returns the response.
useSWR is used within the DataComponent to automatically fetch and cache data. The first parameter is a key that identifies the data, and the second parameter is the fetcher function.
If the data is not available in the cache, useSWR triggers the fetcher function (fetchData in this case) to get the data. Once the data is fetched, it is cached for subsequent requests.
The component renders loading, error, or data based on the state of the useSWR hook.

This example demonstrates the automatic caching behavior of useSWR. Subsequent renders of the DataComponent will use the cached data (if available) without triggering additional network requests unless a revalidation is triggered.

How to do error handling with useSWR hook?

Error handling is crucial when working with data fetching, and useSWR provides a convenient way to handle errors. Here’s an example that includes error handling:

// Import necessary libraries
import useSWR from 'swr';

// Function to fetch data (replace with your actual API endpoint)
const fetchData = () => fetch('https://api.example.com/data').then(response => {
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
});

// React component using useSWR with error handling
function DataComponent() {
  // Using useSWR with the key (e.g., API endpoint) and the fetcher function
  const { data, error } = useSWR('https://api.example.com/data', fetchData);

  // Loading state
  if (!data && !error) {
    return <p>Loading...</p>;
  }

  // Error state
  if (error) {
    return <p>Error fetching data: {error.message}</p>;
  }

  // Render the data
  return (
    <div>
      <h1>Data Component</h1>
      <p>Data: {data}</p>
    </div>
  );
}

// Example usage of DataComponent in your main App component
function App() {
  return (
    <div>
      <h1>Your App</h1>
      <DataComponent />
    </div>
  );
}

In this example:

The fetchData function is modified to check if the HTTP response is successful (response.ok). If not, it throws an Error with a custom message.
The useSWR hook captures this error, and if an error occurs during the data fetching process, it populates the error property with information about the error.
The DataComponent renders an error message if the error property is truthy.

This way, you can handle errors gracefully in your React components, providing feedback to users when data fetching fails. You can customize the error message and add more sophisticated error-handling logic based on your application’s requirements.

Conclusion

In conclusion, React’s useSWR hook emerges as a game-changer for simplifying data fetching. With automatic caching, seamless error handling, and a focus on reactivity, useSWR streamlines the development process. Its real-world applicability and performance benefits make it a must-have tool in the toolkit of React developers. As you dive into using useSWR, embrace its simplicity, experiment with configurations, and elevate your React applications to new levels of responsiveness and efficiency. Happy coding!

The post Mastering Data Fetching with React’s useSWR Hook appeared first on CodeLila.

Exploring the Power of Multiple Instances of the Same Interface in ASP.NET Core

Navin Prasad — Wed, 27 Dec 2023 02:19:25 +0000

Introduction

While ASP.NET Core’s built-in dependency injection brings great ease to development, managing multiple implementations of an interface can be a bit challenging. In this article, I’ll guide you through the process of dynamically selecting a service from various implementations in ASP.NET Core, making the details more accessible for your projects. Let’s dive in and simplify the intricacies together.

Let’s consider a real-world scenario involving a web application that supports multiple payment gateways. In this example, we’ll create an interface for payment processing and implement different payment gateway providers as separate classes.

Prerequisites:

Install Visual Studio: Ensure you have Visual Studio installed on your machine. You can download Visual Studio from the official Microsoft website.
Install .NET SDK: Make sure you have the .NET SDK installed. You can download it from the official .NET website.

Creating “ApiGatewayExample” ASP.NET Core WebAPI Project:

Open Visual Studio: Launch Visual Studio on your machine.
Create a New Project:
- Click on “Create a new project” or go to File > New > Project....
Select Project Template:
- In the “Create a new project” window, search for “ASP.NET Core Web API”.
- Choose the template labeled “ASP.NET Core Web API” and click “Next.”
Configure the Project:
- Enter “ApiGatewayExample” as the project name.
- Choose a location to save the project and click “Next”
- Select a framework version (.Net 7.0(Standard Term Support)).
Configure Authentication (Optional):
- If you want to add authentication, you can configure it in this step. For a WebAPI project, you might choose “None” as Authentication Type or configure as needed.
Create the Project:
- Click “Create” to generate the “ApiGatewayExample” ASP.NET Core WebAPI project.

Adding payment interface and its implementations.

Create new folder name “Interfaces” and add “IPaymentGateway.cs” interface as below.

namespace ApiGatewayExample.Interfaces
{
    public interface IPaymentGateway
    {
        string Name { get; }
        bool ProcessPayment(decimal amount);
    }
}

Create new folder named “Gateway” and add below implemenations in it.

PayPalGateway.cs

using ApiGatewayExample.Interfaces;

namespace ApiGatewayExample.Gateway
{
    public class PayPalGateway : IPaymentGateway
    {
        public string Name => "PayPal";
        public bool ProcessPayment(decimal amount)
        {
            // Implement PayPal payment processing logic
            Console.WriteLine($"Processing {Name} payment: ${amount}");
            // Return success or failure based on the actual implementation
            return true;
        }
    }
}

StripeGateway.cs

using ApiGatewayExample.Interfaces;

namespace ApiGatewayExample.Gateway
{
    public class StripeGateway : IPaymentGateway
    {
        public string Name => "Stripe";
        public bool ProcessPayment(decimal amount)
        {
            // Implement Stripe payment processing logic
            Console.WriteLine($"Processing {Name} payment: ${amount}");
            // Return success or failure based on the actual implementation
            return true;
        }
    }
}

BraintreeGateway.cs

using ApiGatewayExample.Interfaces;

namespace ApiGatewayExample.Gateway
{
    public class BraintreeGateway : IPaymentGateway
    {
        public string Name => "Braintree";
        public bool ProcessPayment(decimal amount)
        {
            // Implement Braintree payment processing logic
            Console.WriteLine($"Processing {Name} payment: ${amount}");
            // Return success or failure based on the actual implementation
            return true;
        }
    }
}

Register Payment Gateways in Dependency Injection Container:

// Add services to the container.

builder.Services.AddSingleton<IPaymentGateway,PayPalGateway>();
builder.Services.AddSingleton<IPaymentGateway, StripeGateway>();
builder.Services.AddSingleton<IPaymentGateway,BraintreeGateway>();

Create new Interface “IPaymentProcessor” in interfaces and add below code in it.

namespace ApiGatewayExample.Interfaces
{
    public interface IPaymentProcessor
    {
        bool ProcessPayment(decimal amount, string gatewayName);
    }
}

Create new class “PaymentProcessor” and add below code in it to retrive the selected payment gateway and process payment using it.

using ApiGatewayExample.Interfaces;

namespace ApiGatewayExample
{
    public class PaymentProcessor:IPaymentProcessor
    {
        private readonly IEnumerable<IPaymentGateway> paymentGateways;

        public PaymentProcessor(IEnumerable<IPaymentGateway> paymentGateways)
        {
            this.paymentGateways = paymentGateways;
        }

        private IPaymentGateway GetPaymentGateway(string gatewayName)
        {
            // Retrieve the selected payment gateway instance based on the gatewayName
            return this.paymentGateways.
                FirstOrDefault(gateway => 
                gateway.Name.Equals(gatewayName, StringComparison.OrdinalIgnoreCase));
        }

        public bool ProcessPayment(decimal amount,string gatewayName)
        {
            IPaymentGateway gateway = GetPaymentGateway(gatewayName);
            if(gateway == null)
            {
                throw new NotImplementedException("Payment Gateway not found for "+ gatewayName);
            }
            return gateway.ProcessPayment(amount);
        }

    }
}

Register PaymentProcessor in DI Container (Program.cs file)

builder.Services.AddScoped<IPaymentProcessor,PaymentProcessor>();

Add new WebAPI Controller named “PaymentController” in Controller folder and update its code as below.

using ApiGatewayExample.Interfaces;

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.Mvc;

namespace ApiGatewayExample.Controllers

{

[Route(“api/[controller]”)]

[ApiController]

public class PaymentController : ControllerBase

{

private readonly IPaymentProcessor paymentProcessor;

    public PaymentController(IPaymentProcessor paymentProcessor)
    {
        this.paymentProcessor = paymentProcessor;
    }

    [HttpPost]
    public IActionResult ProcessPayment(decimal amount, string selectedPaymentGateway)
    {
        try
        {
            var success= paymentProcessor.ProcessPayment(amount, selectedPaymentGateway);
            return Ok(success ? "Payment successful" : "Payment failed");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
            if(ex is NotImplementedException)
            {
                return BadRequest("Gatway not found");
            }

            return StatusCode(500, "Internal Server Error");
        }
    }
}

}

Run the project and execute the api in swagger as below.

This is the output.

you can see in above snaps that we are able to select and use the expected implemenatation from the list of multiple implemenatations in asp.net core.

Conclusion

In this exploration of handling multiple implementations in ASP.NET Core’s dependency injection, we’ve uncovered the intricacies of dynamically selecting services. From interfaces and classes to the dynamic processing of payments, our journey through the creation of an “ApiGatewayExample” project has showcased the flexibility and power of ASP.NET Core.

By implementing interfaces and services, we’ve laid the foundation for a robust API gateway system. The introduction of a PaymentProcessor class highlighted the seamless integration of specific implementations, providing a glimpse into the extensibility of the ASP.NET Core framework.

As developers, the ability to manage and utilize various implementations efficiently is a valuable skill. Whether orchestrating complex API interactions or handling payment gateways dynamically, ASP.NET Core empowers us to create versatile and scalable solutions.

In conclusion, our exploration into ASP.NET Core’s dependency injection world emphasizes not just the technical aspects but also the creative potential it unlocks. As you embark on your own projects, leverage the insights gained here to build systems that are not only functional but also adaptable to the ever-evolving landscape of software development. May your coding endeavors be as dynamic as the services you create in ASP.NET Core.

Happy coding!

The post Exploring the Power of Multiple Instances of the Same Interface in ASP.NET Core appeared first on CodeLila.

React Security: Understanding XSS Attacks and the Risks of dangerouslySetInnerHTML

Navin Prasad — Sat, 16 Dec 2023 06:57:45 +0000

Introduction:

Think of React as the wizard behind interactive websites. But, just like any wizard, it needs protection. This blog is like a shield against a specific danger called Cross-Site Scripting (XSS), especially when using React’s dangerouslySetInnerHTML attribute.

Imagine you’re building something cool online, but there’s a sneaky threat. It’s like keeping your door locked against burglars. XSS is a kind of online burglar, and even React needs help staying safe. We’re here to talk about how this threat works and why we need to be careful with dangerouslySetInnerHTML.

What is dangerouslySetInnerHTML attribute in React.

dangerouslySetInnerHTML is a specific React attribute that allows you to render HTML content inside a component. The name itself implies that using this attribute can be risky and requires caution.

Here’s where dangerouslySetInnerHTML comes into play. Instead of converting the HTML content into React elements, you can directly set the HTML using this attribute. The “dangerous” part of the name emphasizes that using this attribute can expose your application to Cross-Site Scripting (XSS) attacks if not handled carefully.

Here’s a basic example of how you might use dangerouslySetInnerHTML in a React component:

function MyComponent({ htmlContent }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

Senarios when we might need to use dangerouslySetInnerHTML in React.

There are specific scenarios where using dangerouslySetInnerHTML may be necessary. Here are a few cases:

Rendering HTML from User Input :

When your application needs to render HTML content provided by users, such as in a comment section or a rich text editor. Ensure that the user input is thoroughly validated and sanitized to mitigate security risks.

function Comment({ text }) {
  return <div dangerouslySetInnerHTML={{ __html: text }} />;
}

Integration with Third-Party Libraries:

Some third-party libraries might generate HTML content that you want to include in your React component. In such cases, you should trust the source of the HTML content and ensure it doesn’t contain malicious code.

function ThirdPartyIntegration({ htmlContent }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

Embedding External Widgets or Components:

If you’re integrating external widgets or components that provide HTML markup, using dangerouslySetInnerHTML might be necessary. Again, ensure that the source is trusted to avoid security issues.

function ExternalWidget({ widgetMarkup }) {
  return <div dangerouslySetInnerHTML={{ __html: widgetMarkup }} />;
}

Rendering Pre-rendered Content:

When you have pre-rendered HTML content (e.g., from a server or CMS) that needs to be injected into your React component. Ensure the pre-rendered content comes from a trusted source to prevent XSS attacks.

function PreRenderedContent({ htmlContent }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

Now as we have understood what is ‘dangerouslySetInnerHTML’ and the situations when we might need to use this. Let us undestand it how to make it secure.

How to make it secure?

Below is a sample code which defines a component with a search box input. The input’s value is captured using the useState hook and displayed in a div. The onSearchBoxChange function logs the input value to the console on every change. dangerouslySetInnerHTML is used to render the input value in the div.

import React from "react";
function App() {
  const [value, setValue] = React.useState("");
  function onSearchBoxChange(e: any) {
    e.preventDefault();
    setValue(e.target.value);
    console.log(e.target.value);
  }

  return (
    <div className="App">
      <input type="text" name="searchBox" onChange={onSearchBoxChange}></input>
      <div
        dangerouslySetInnerHTML={{
          __html: value,
        }}
      />
    </div>
  );
}

export default App;

When we run this and try to put some script in text box , it logs it on console and inject it on browser too. you can see in below screen shots.

In above you can see that script tag is injected which we do not want to be there. so lets us see how we can solve this.

DOMPurify package.

DOMPurify is a JavaScript library that provides a way to sanitize and clean up HTML content, making it safe to use in your web applications. Its primary purpose is to prevent Cross-Site Scripting (XSS) vulnerabilities by removing or neutralizing potentially harmful code from user-generated or external HTML content.

Install DOMPurify package

npm install dompurify

If you are using TypeScript then you also need to install its type definition using below command

npm i --save-dev @types/dompurify

Next update the above sample code to use DOMPurify package and sanatize the input coming from user as below.

import React from "react";
import DOMPurify from "dompurify";
function App() {
  const [value, setValue] = React.useState("");
  function onSearchBoxChange(e: any) {
    e.preventDefault();
    const purifiedValue = DOMPurify.sanitize(e.target.value);
    setValue(purifiedValue);
    console.log(purifiedValue);
  }

  return (
    <div className="App">
      <input type="text" name="searchBox" onChange={onSearchBoxChange}></input>
      <div
        dangerouslySetInnerHTML={{
          __html: value,
        }}
      />
    </div>
  );
}

export default App;

Now let use see how it looks with the same input.

You can see that it prevented the injection of script code in div example here. This is how you can prevent dangerous input like script to be injected in code.

Summary

In this blog, we delved into the world of React security, specifically focusing on the dangerouslySetInnerHTML attribute and the potential risks associated with Cross-Site Scripting (XSS). We began by drawing an analogy between React and a wizard, highlighting the need for a shield to protect against online burglars, where XSS acts as a stealthy threat.

Exploring the purpose and risks of dangerouslySetInnerHTML, we identified scenarios where it becomes necessary, such as rendering user input, integrating third-party libraries, embedding external components, and handling pre-rendered content. The blog then introduced DOMPurify as a potent defense mechanism, demonstrating its integration to sanitize user inputs effectively.

Key Takeaways:

Mind the Wizard’s Shield:
- React, akin to a wizard, requires a shield against online threats. Recognizing and addressing vulnerabilities is paramount for safeguarding applications.
Understanding dangerouslySetInnerHTML:
- This React attribute allows rendering HTML content but demands caution due to its potential security risks, especially with XSS attacks.
Scenarios for Caution:
- User input, third-party integrations, external components, and pre-rendered content are scenarios where dangerouslySetInnerHTML might be needed, but careful handling is crucial.
Enter DOMPurify:
- DOMPurify emerges as a robust solution to mitigate XSS risks. Its integration ensures sanitized user inputs, bolstering the security of React applications.
Continuous Vigilance:
- Web security is an ongoing commitment. Regular updates, awareness of emerging threats, and adherence to best practices are vital for maintaining a resilient defense.

In conclusion, this blog equips developers with insights into React security, offering practical solutions to fortify applications against potential vulnerabilities. By embracing secure coding practices and staying vigilant, developers can confidently navigate the dynamic landscape of web development, ensuring both functionality and user safety.

The post React Security: Understanding XSS Attacks and the Risks of dangerouslySetInnerHTML appeared first on CodeLila.

Unlocking Seamless Data Sharing: A Deep Dive into React Router v6 and Context for Multi-Page Dashboards

Navin Prasad — Fri, 15 Dec 2023 04:02:56 +0000

Imagine this: You’re building a multi-page dashboard. Each page needs access to user information, but traditional prop drilling makes your code spaghetti-like. Enter context! We’ll leverage React’s built-in context API to effortlessly inject props into Outlet and seamlessly share them across your child components, all while maintaining clean and maintainable code.

Introducing Outlet Context: The Superhero of Data Sharing

Enter the mighty outlet context API , built-in to React Router V6. Think of it as a magic portal that seamlessly transports data between components, regardless of their nesting level. With context, you can share global state, user information, and any other data you need, all without prop drilling.

The Magic of Outlet Context and Outlet Props

React Router v6 comes with a powerful component called Outlet. It acts as a placeholder for child routes, rendering the content they define. But here’s the exciting part: you can leverage context to inject props into Outlet, making them accessible to all its child components!

Benefits of Passing Props to Outlet with Context:

Clean and maintainable code: Ditch the prop drilling spaghetti and structure your code like a well-organized garden.
Improved data sharing: Share data effortlessly across any level of nested components, keeping your state management centralized and efficient.
Enhanced flexibility: Dynamically change props based on routes or user interactions, adding a whole new level of control to your app.
Reduced boilerplate code: No more prop drilling rituals! Context takes care of data flow, leaving you with more time to focus on building amazing features.

Let’s Dive in: A Step-by-Step Guide

Create an react app named “outlet-context-example” with typescript as template using below command.

npx create-react-app outlet-context-example --template typescript

now open the project in vs code and install the react-router dom package as below

Create a components folder in src and then create “ChildComponent1.tsx”, “ChildComponent2.tsx”, “ChildComponent3.tsx” and HomeDashboard.tsx file in component folder as below.

Next Update the App.tsx file with below code.

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import HomeDashboard from "./components/HomeDashboard";
import ChildComponent1 from "./components/ChildComponent1";
import ChildComponent2 from "./components/ChildComponent2";
import ChildComponent3 from "./components/ChildComponent3";

const routes = createBrowserRouter([
  {
    path: "/",
    element: <HomeDashboard />,
    children: [
      {
        path: "component1",
        element: <ChildComponent1 />,
      },
      {
        path: "component2",
        element: <ChildComponent2 />,
      },
      {
        path: "component3",
        element: <ChildComponent3 />,
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={routes} />;
}

export default App;

The above code uses the react-router-dom library for handling navigation. It defines a set of routes, including a main route (“/”) that renders a HomeDashboard component and three child routes (“component1,” “component2,” and “component3”) that render corresponding child components (ChildComponent1, ChildComponent2, and ChildComponent3). The App component serves as the main entry point and utilizes the RouterProvider from react-router-dom to provide routing information to the rest of the application.

Update Homedashboard.tsx with below code.

import { Outlet, useNavigate, useOutletContext } from "react-router-dom";

const sampleServerData = {
  employeeInfo: {
    id: 1,
    name: "John",
  },
};

type EmployeeInfoContextType = {
  empInfo: {
    id: number;
    name: string;
  };
};

function HomeDashboard() {
  const navigate = useNavigate();
  function loadComponent1(e: any) {
    e.preventDefault();
    navigate("/component1");
  }

  function loadComponent2(e: any) {
    e.preventDefault();
    navigate("/component2");
  }
  function loadComponent3(e: any) {
    e.preventDefault();
    navigate("/component3");
  }

  return (
    <>
      <h1>Header area</h1>
      <button onClick={loadComponent1}>Load Component1</button>
      <button onClick={loadComponent2}>Load Component2</button>
      <button onClick={loadComponent3}>Load Component3</button>
      <Outlet
        context={{
          empInfo: sampleServerData.employeeInfo,
        }}
      />
      <footer>footer area</footer>
    </>
  );
}

export function useEmployeeInfoData(): EmployeeInfoContextType {
  return useOutletContext<EmployeeInfoContextType>();
}

export default HomeDashboard;

The above code defines a React component named HomeDashboard, representing a dashboard with navigation buttons and an outlet for rendering child components. Here’s a succinct breakdown:

Navigation and Outlet:
- The component uses buttons (Load Component1, Load Component2, Load Component3) to trigger navigation to different routes using the react-router-dom library.
- It employs the Outlet component to specify where child components will be rendered.
Context and Data:
- A sample data structure (sampleServerData) simulates employee information.
- A context type (EmployeeInfoContextType) is defined to represent the structure of employee information.
Functions and Footer:
- The useNavigate hook is used to navigate to different components when buttons are clicked.
- The useEmployeeInfoData function is exported for child components to access the employee information context.
- The component includes a header, buttons for navigation, an outlet for child components, and a footer.

This setup provides a structured and navigable interface for a React application, and the use of context allows for the efficient sharing of data between components. This blog post can delve deeper into the importance of routing, context, and component composition in building maintainable and scalable React applications.The useEmployeeInfoData hook uses useOutletContext from react-router-dom to access the shared context, ensuring consistent data retrieval across child components.

Update ChildComponent1.tsx with below code.

import { useEmployeeInfoData } from "./HomeDashboard";

function ChildComponent1() {
  const empInfoData = useEmployeeInfoData();
  return (
    <>
      <h1>Child Component 1 loaded</h1>
      <p>Employee Info:</p>
      <p> id:{empInfoData.empInfo.id}</p>
      <p>name: {empInfoData.empInfo.name}</p>
    </>
  );
}

export default ChildComponent1;

ChildComponent1 is a React component that leverages the useEmployeeInfoData function from the HomeDashboard module. This component displays a simple user interface with a heading indicating its loaded status and paragraph elements showcasing employee information such as ID and name. The use of context allows ChildComponent1 to seamlessly access and present data shared by its parent component (HomeDashboard). This coding structure demonstrates the efficiency of React context for managing and passing data across different parts of a React application.

Update ChildComponent2.tsx with below code.

import { useEmployeeInfoData } from "./HomeDashboard";

function ChildComponent2() {
  const empInfoData = useEmployeeInfoData();
  return (
    <>
      <h1>Child Component 2 loaded</h1>
      <p>Employee Info:</p>
      <p> id:{empInfoData.empInfo.id}</p>
      <p>name: {empInfoData.empInfo.name}</p>
    </>
  );
}

export default ChildComponent2;

ChildComponent2 is another React component that relies on the useEmployeeInfoData function imported from the HomeDashboard module. Like its counterpart, ChildComponent1, it renders a user interface indicating its loaded status and displays employee information retrieved from the shared context. This consistent approach highlights the modularity and ease of data sharing facilitated by React’s context management.

Update ChildComponent3.tsx with below code

import { useEmployeeInfoData } from "./HomeDashboard";

function ChildComponent3() {
  const empInfoData = useEmployeeInfoData();
  return (
    <>
      <h1>Child Component 3 loaded</h1>
      <p>Employee Info:</p>
      <p> id:{empInfoData.empInfo.id}</p>
      <p>name: {empInfoData.empInfo.name}</p>
    </>
  );
}

export default ChildComponent3;

ChildComponent3 is a React component that leverages the useEmployeeInfoData function from the HomeDashboard module, emphasizing the shared employee information context. Following a similar structure to its counterparts, this component displays a loaded status, along with employee information (ID and name) retrieved from the context. The uniformity in approach across these child components highlights the efficiency and simplicity of React’s context management for data sharing in a modular and maintainable manner.

This is the running application output on browser.

Conclusion

In the ever-evolving landscape of React development, React Router v6 stands out as a powerful ally for efficient navigation and state management. The journey we’ve embarked upon in this blog has unraveled the complexities of traditional prop drilling and illuminated a path paved with the simplicity of React’s context API.

As we conclude, let’s reflect on the key takeaways:

Cleaner and Maintainable Code:
- By bidding farewell to the tangled web of prop drilling, we’ve embraced a coding style that resembles a well-organized garden—structured, readable, and easy to maintain.
Effortless Data Sharing:
- The introduction of the Outlet context API serves as our superhero, effortlessly transporting data between components. This seamless sharing mechanism ensures that data flows harmoniously across various nested levels.
Flexibility in Prop Passing:
- React Router v6, with its Outlet and context combination, provides a dynamic approach to prop passing. React to route changes or user interactions by adjusting props, adding a newfound level of control and flexibility to your application.
Boilerplate Code Reduction:
- The era of prop drilling rituals has come to an end. With context gracefully handling data flow, developers can now allocate more time to crafting remarkable features rather than wrestling with boilerplate code.

As you integrate these practices into your React projects, consider the profound impact on the scalability, readability, and overall developer experience. React Router v6, armed with the Outlet context API, empowers you to build applications that are not just functional but also elegantly structured.

So, go ahead, dive into the world of React Router v6, wield the Outlet context API, and let your code flourish with the simplicity and efficiency it deserves. Happy coding!

The post Unlocking Seamless Data Sharing: A Deep Dive into React Router v6 and Context for Multi-Page Dashboards appeared first on CodeLila.

𝐘𝐨𝐮𝐫 𝐈𝐦𝐩𝐞𝐫𝐟𝐞𝐜𝐭𝐢𝐨𝐧 𝐢𝐬 𝐘𝐨𝐮𝐫 𝐀𝐮𝐭𝐡𝐞𝐧𝐭𝐢𝐜𝐢𝐭𝐲

Navin Prasad — Thu, 05 Oct 2023 06:24:55 +0000

In the professional world, there's often a tendency for individuals to project an image of perfection. We strive to talk perfectly, walk perfectly, and present our work as flawless. However, the pursuit of constant perfection can sometimes feel artificial, like an impeccably crafted artificial flower that remains unchanged regardless of the weather conditions.

But in reality, people are drawn to authenticity. They want to see the real truth rather than a facade. Over time, people gravitate towards those who are real, those who show the ups and downs of life. It's perfectly okay not to be perfect all the time. It's okay to acknowledge and even celebrate your imperfections. It's okay to showcase works in progress alongside your well-completed projects. It's okay to discuss the challenges you're facing, even when it seems like nobody else wants to talk about them.

The swagger of showmanship may get attention initially, but it rarely sustains in the long run because it lacks authenticity. Over time, people tend to appreciate and respect those who are genuine and who show the real picture, warts and all.

In fact, the Japanese tradition of wabi-sabi beautifully embodies this philosophy. Wabi-sabi celebrates the beauty found in imperfections, impermanence, and simplicity. It reminds us that authenticity and the acknowledgment of our flaws can be profoundly powerful in both our personal and professional lives.

So, remember that your imperfections are making you unique and authentic. Embrace them, share your journey, and watch as people connect with you on a deeper level because you're genuine and real.

If you like such post, follow me for more.

Implementing Code Splitting in React for Improved Performance

Navin Prasad — Sat, 30 Sep 2023 07:55:07 +0000

Introduction

In today’s fast-paced digital landscape, where users demand lightning-fast experiences, web developers face a pressing challenge: how to create web applications that are not only feature-rich but also load quickly. When it comes to React applications, one powerful technique that can significantly enhance performance is code splitting.

Imagine this scenario: You’re building a large-scale React application with numerous components, libraries, and features. Traditionally, all of your JavaScript code is bundled into a single massive file. As a result, when a user lands on your site, they have to wait for this behemoth of a bundle to download and execute before they can interact with your app. This can lead to frustratingly long loading times, especially on slower connections or less powerful devices.

This is where code splitting comes to the rescue. Code splitting is a strategy that allows you to break down your application’s JavaScript bundle into smaller, more manageable pieces. Instead of loading everything upfront, you can load only the code that’s necessary for the current user’s journey through your app. This not only dramatically reduces the initial load time but also optimizes the overall performance of your React application.

In this blog post, we’ll explore the concept of code splitting in React and dive into various techniques and best practices for its implementation. Whether you’re working on a massive enterprise-level application or a smaller project, understanding code splitting can be a game-changer for your development workflow and user experience. So, let’s embark on this journey to harness the power of code splitting and ensure that your React applications are not just feature-rich but also blazingly fast. Let’s get started!

Step 1: Set Up Your Development Environment

Before you start, make sure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official website if you haven’t already.

Step 2: Create a New React Project

Open your terminal and run the following command to create a new React project with Create React App:

npx create-react-app code-splitting-example

Once you the above command completes, you may have the output similar to below.

Step 3: Navigate to Your Project Directory

Navigate to your project directory using the following command:

cd code-splitting-example

Step 4: Open the project directory in vscode

Open the project directory in vscode using the following command:

code .

You should see the project structure as below.

Step 4: Create Some Sample Components

In this step, you can create some sample components that you’ll later split into separate bundles. For example, let’s create “components” directory in src and then create two components named Home.js and About.js inside a components directory:

Create and update src/components/Home.js:

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
    </div>
  );
}

export default Home;

Create and update src/components/About.js:

import React from 'react';

function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a passionate team of developers.</p>
    </div>
  );
}

export default About;

Step 5: Create a Sample Routing Structure

npm install react-router-dom

You should see similar output as below:

Now, create a simple routing structure. Edit src/App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

Step 6: Implement Code Splitting

To implement code splitting, we can use the React.lazy() function. Modify src/App.js to use React.lazy() for loading the components:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <hr />
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;

Step 7: Start the Development Server

You’re all set! Now, start your development server:

npm start

This will launch your React application, and you can navigate between the “Home” and “About” pages. Code splitting is automatically applied, and each component will be loaded on-demand when you access its respective route.

You’ve now created a simple React project named “code-splitting-example” that demonstrates code splitting using React.lazy() and React Router. You can expand on this project by adding more components and experimenting with different code splitting scenarios to showcase its benefits further.

Summary

In the fast-paced world of web development, optimizing React applications for speed and responsiveness is essential. Code splitting offers a powerful solution. It breaks down the JavaScript bundle into smaller parts, loading only what’s needed for improved performance.

Key Takeaways:

Code Splitting Benefits: Code splitting reduces initial load times, making web applications more responsive.
When to Use It: Code splitting is ideal for large apps, complex routing, and dynamic imports.
Techniques: We explored dynamic imports with import() and how to use React.lazy() with <Suspense> for code splitting.
Best Practices: Follow component grouping, Webpack optimization, and error handling for effective code splitting.

Code splitting empowers developers to strike the right balance between feature-rich applications and exceptional performance, delivering an elevated user experience.

The post Implementing Code Splitting in React for Improved Performance appeared first on CodeLila.

Enhancing Reliability: Global Exception Handling in ASP.NET Core Web APIs

Navin Prasad — Fri, 29 Sep 2023 12:31:21 +0000

In today’s digital landscape, the demand for robust and reliable web APIs is ever-growing. Whether you’re developing a RESTful service, a microservice, or a full-fledged web application, handling exceptions gracefully is a fundamental aspect of ensuring your API’s stability and usability. After all, the real world is far from perfect, and unexpected errors can occur at any time.

Imagine this scenario: You’ve built a sophisticated ASP.NET Core Web API, and everything seems to be running smoothly. Users are interacting with your application, but suddenly, an unhandled exception disrupts the flow, resulting in a confusing error message or, even worse, a crash. How can you prevent such mishaps and deliver a seamless experience to your users?

Enter global exception handling in ASP.NET Core, a powerful mechanism that allows you to intercept and manage exceptions at a central level within your application. This approach ensures that no matter where an exception originates—be it in your controller actions, middleware, or service layer—it can be caught, processed, and transformed into a clear, consistent error response.

In this blog post, we will delve into the world of global exception handling in ASP.NET Core Web APIs. We’ll explore the concept, its significance, and most importantly, how to implement it effectively in your projects. By the end of this journey, you’ll have the tools and knowledge needed to fortify your APIs against unexpected errors, enhance user experiences, and maintain the reputation of your application’s reliability.

So, let’s embark on this journey of learning how to build resilient ASP.NET Core Web APIs by mastering the art of global exception handling.

Setting Up an ASP.NET Core Web API Project

To get started with learning about global exception handling in ASP.NET Core Web APIs, let’s create a sample project. Follow these steps to set up a new ASP.NET Core Web API project using Visual Studio:

Launch Visual Studio : Open Visual Studio on your development machine.
Create a New Project : Navigate to the “File” menu, select “New,” and then choose “Project…” from the dropdown.
Select the Project Template : In the “Create a new project” window, locate and select the “ASP.NET Core Web API” project template. This template is tailored for building RESTful Web APIs.
Configure Project Settings : Provide a meaningful name for your project, such as “ ExceptionHandlingDemo ,” and specify the project’s location. Additionally, choose the target framework version. Typically, ASP.NET Core projects use the latest LTS (Long-Term Support) version of the .NET Core framework for stability and long-term compatibility.
Optional: Authentication and Authorization : Depending on your project’s security requirements, you can configure authentication and authorization settings during project creation. For instance, you might opt to implement JWT (JSON Web Tokens) authentication to secure your API endpoints.
Create the Project : Click the “Create” button to initiate the creation of your ASP.NET Core Web API project with the specified settings.

Adding Exception Handling to the WeatherForecastController

Now that we have our ASP.NET Core Web API project set up, let’s focus on enhancing the error-handling capabilities of our API by implementing exception handling within the “WeatherForecastController.” Additionally, we’ll take advantage of the async-await pattern to improve responsiveness and scalability.

Async-Await in ASP.NET Core Web APIs

In modern ASP.NET Core Web APIs, asynchronous programming using async and await is essential for handling I/O-bound operations efficiently. The async-await pattern allows your API to remain responsive while waiting for time-consuming tasks to complete, such as accessing a database or making external API requests.

Updated GET Method

Here’s an updated version of the GET method within the “WeatherForecastController” that incorporates async-await:

        [HttpGet(Name = "GetWeatherForecast")]
        public async Task<ActionResult<IEnumerable<WeatherForecast>>> Get()
        {
            try
            {
                return await Task.WhenAll(
                    Enumerable.Range(1, 5).Select(async index => new WeatherForecast
                    {
                        Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
                        TemperatureC = await Task.Run(() => Random.Shared.Next(-20, 55)), // Simulate async operation
                        Summary = Summaries[Random.Shared.Next(Summaries.Length)]
                    })
                );

            }
            catch (Exception ex)
            {
                // Log the exception (you can use a logging framework like Serilog or NLog)
                Console.WriteLine($"An error occurred: {ex}");

                return StatusCode(StatusCodes.Status500InternalServerError, "something went wrong");
            }

        }

In this code:

We continue to use the async and await keywords to ensure non-blocking execution, especially when performing potentially time-consuming operations.
The Task.WhenAll method is used to asynchronously generate weather forecasts. We generate forecasts for the next 5 days, simulating this as an asynchronous operation.

Exception Handling

Exception handling remains a pivotal aspect of our API’s reliability. Here’s how we handle exceptions:

Inside the try block, we attempt to generate weather forecasts. If an exception occurs during this process, it’s caught by the catch block.
In the catch block, we log the exception using Console.WriteLine. In a production environment, it’s recommended to use a dedicated logging framework like Serilog or NLog for comprehensive error logging.
We return a 500 Internal Server Error status code (StatusCodes.Status500InternalServerError) along with a user-friendly error message, “Something went wrong.” This provides meaningful feedback to the client while not exposing sensitive error details.

Now run the project and execute on swagger, you should see similar output as below

let’s introduce intentional errors into the try block of the Get method to simulate real-world scenarios where errors can occur. Here’s the updated code with simulated errors:

try
{
    throw new Exception("Some error occured!");
    return await Task.WhenAll(
        Enumerable.Range(1, 5).Select(async index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = await Task.Run(() => Random.Shared.Next(-20, 55)), // Simulate async operation
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        })
    );

}

Next run the application and call the same api, you should see output as below.

here you can see we are getting the response 500 and the message which we set in catch block. The actual exception is logged in console as below.

In the code provided, we’re returning a 500 Internal Server Error response to the client along with a user-friendly error message, “Something went wrong,” while logging the actual exception to the console. This is a common practice in web APIs to provide a meaningful error response to clients while keeping detailed error information for debugging and monitoring purposes.

We can certainly improve our error handling by incorporating unique identifiers for each error and implementing code to log exceptions in databases or log files. These steps are valuable.

However, a significant challenge arises when dealing with multiple APIs. Do we really need to update the code of each API individually and insert try-catch blocks? And what if we need to modify the exception response—would that mean altering the response for every API’s catch block?

These are substantial concerns, and if we answer ‘yes’ to these questions, it could consume a substantial amount of development time. This may not be the most efficient use of our resources. So, what is the solution?

The solution is adding global exception handling. Let us see how we can use it.

Add a new folder “Middleware” and a new class file “ExceptionHandler” in it.

Update the “ExceptionHandler” file code as below.

namespace ExceptionHandlingDemo.Middleware
{
    public class ExceptionHandler
    {
        private readonly ILogger<ExceptionHandler> logger;
        private readonly RequestDelegate request;

        public ExceptionHandler(ILogger<ExceptionHandler> logger, RequestDelegate request)
        {
            this.logger = logger;
            this.request = request;
        }

        public async Task InvokeAsync(HttpContext httpContext)
        {
            try
            {
                await request(httpContext);
            }
            catch (Exception ex)
            {
                // Generate a new GUID to log and send to client so that we able
                // to match the error with details exception
                var exceptionId = Guid.NewGuid().ToString();

                //log the details exception

                logger.LogError(ex, "ExceptionId:" + exceptionId, "Message:" + ex.Message);

                // return the custom exception to client 

                httpContext.Response.StatusCode = StatusCodes.Status500InternalServerError;
                httpContext.Response.ContentType = "application/json";

                await httpContext.Response.WriteAsJsonAsync(new
                {
                    Id = exceptionId,
                    error = "Some Internal error occured while processing the request"
                });
            }
        }
    }
}

The above code demonstrates the creation of custom exception handling middleware for ASP.NET Core applications. This middleware intercepts and handles exceptions that occur during the processing of HTTP requests, ensuring consistent error responses.

Key Points:

The ExceptionHandler class resides in the ExceptionHandlingDemo.Middleware namespace.
It accepts an ILogger for logging and a RequestDelegate to pass the request along.
In the InvokeAsync method, exceptions are caught, logged with unique identifiers, and sent as structured JSON responses to clients.
This middleware promotes better error management and a standardized approach to handling exceptions across your ASP.NET Core application.

Now our Exception handling middleware is ready , next we need to inject this so that the framework knows about it.

add below line of code in program.cs file

app.UseMiddleware<ExceptionHandler>();

now comment out or remove try catch handling in the WeatherForecastController GET method. The method should be like below.

The code on line 26 simulates the occurrence of an exception during the processing of an API request. To observe this behavior in action, run the application and then make a request to the API. You should expect the following output:

The response includes an Id field, which serves as a unique identifier for the error. This identifier can be used to retrieve detailed information about the specific error. Additionally, the code employs a logger to record exception details, which are typically logged to the console by default. Below, you can find an example of the console output, showcasing the logged error information:

As you can observe, the response contains an Id field, which is a unique identifier for the error. This identifier remains consistent between the logged error details and the response, making it convenient for associating errors.

To further enhance error management, consider extending the logging functionality beyond console output. You can customize the logging mechanism to store error information in a database, text file, or any other suitable storage medium. This approach ensures comprehensive error tracking and facilitates thorough analysis and troubleshooting.

This is how we can implement the Global exception handling in asp.net core Web APIs.

Summary

In this blog post, we’ve explored the implementation of custom exception handling middleware in ASP.NET Core applications. This middleware intercepts exceptions globally, ensuring consistent and user-friendly error responses. Key takeaways include setting up the middleware, handling exceptions, and the flexibility of logging. By adopting such middleware, ASP.NET Core applications can maintain a uniform approach to error management, enhancing overall reliability and maintainability.

The post Enhancing Reliability: Global Exception Handling in ASP.NET Core Web APIs appeared first on CodeLila.

My Top 5 learning from the Book “REWORK”

Navin Prasad — Thu, 28 Sep 2023 17:43:09 +0000

In the world of business, where complexity often reigns supreme, “REWORK” by Jason Fried and David Heinemeier Hansson emerges as a refreshing departure from the norm. It’s a book that challenges conventional wisdom, advocating for simplicity, practicality, and unconventional thinking.

“REWORK” isn’t your typical business manual filled with jargon and elaborate strategies. Instead, it’s a call to action—a guide for those who value getting things done without being bogged down by unnecessary complexity.

In this blog post, I’ll share my top 5 takeaways from “REWORK” and how they’ve reshaped my approach to work and productivity. These lessons are not just theory; they’re actionable principles that can revolutionize your career and projects. Let’s explore the world of “REWORK” together.

Learning #1: Embrace Unconventional Thinking

One of the most impactful lessons from “REWORK” is the power of unconventional thinking. In a world where seeking advice and opinions is the norm, Fried and Heinemeier Hansson remind us that, more often than not, the world will offer convincing reasons why your innovative idea won’t work.

They urge us to reflect on history and consider the countless groundbreaking inventions and innovations that were initially dismissed as impractical. From human flight to global communication, these achievements were once considered impossible.

The key takeaway here is to not be discouraged by naysayers or conventional wisdom. Instead, embrace the idea that sometimes the most transformative ideas defy the status quo. “REWORK” encourages us to march to the beat of our own drum, to challenge the norm, and to explore possibilities beyond what the world may deem feasible.

In the quest for innovation and progress, it’s essential to have the courage to pursue your vision, even when it appears unattainable to others. As “REWORK” reminds us, the world can be a discouraging place, but it’s those who dare to dream differently that often change it for the better.

Learning #2: Act on Your Ideas

In the realm of entrepreneurship and innovation, ideas are abundant. Yet, as “REWORK” passionately argues, the true value of an idea lies not in its conception, but in its execution.

One of the resounding messages from the book is the importance of taking action. Rather than merely discussing and debating ideas, “REWORK” urges us to roll up our sleeves and start building. After all, a thousand brilliant ideas, left unimplemented, hold little value.

The book emphasizes that implementation is where ideas truly come to life. It’s in the process of building, testing, and refining that ideas take shape and evolve into something meaningful. This hands-on approach aligns with the belief that action is the ultimate litmus test for any concept.

So, whether you’re contemplating a business venture, a creative project, or a personal goal, “REWORK” encourages you not to overthink or overanalyze. Instead, dive headfirst into the act of creation. The sooner you start building, the sooner you can learn, iterate, and transform your ideas into tangible results.

In a world where ideas are a dime a dozen, it’s those who act on them that leave an indelible mark. As “REWORK” reminds us, action, not ideation, is the catalyst for progress and innovation.

Learning #3: Prioritize Minimal Viable Products (MVPs)

In a world where complexity often masquerades as progress, “REWORK” advocates for a fundamental principle: prioritize simplicity and focus on building a Minimal Viable Product (MVP).

It’s natural to get caught up in the excitement of creating a sophisticated, feature-rich product or project. However, “REWORK” reminds us to pause and consider what is absolutely essential for a go-to-market offering.

The authors emphasize that an MVP should contain only the core features required to meet your initial goals. This stripped-down version allows you to launch quickly and gather valuable feedback from users. In essence, it’s about getting your creation into the hands of users as soon as possible.

By doing so, you can validate your concept, identify areas for improvement, and adapt to real-world feedback. This iterative approach to development aligns with the belief that perfection can be the enemy of progress.

“REWORK” encourages us to resist the temptation to over-engineer and instead focus on delivering a product or project that addresses the immediate needs and pain points of your target audience. It’s the most direct path to market and the most effective way to refine your offering based on real-world usage.

In a landscape where time-to-market can be a critical factor, “REWORK” underscores the importance of agility and the value of getting your creation out there, even in its simplest form.’

Learning #4: Learning from Success, Not Just Failure

The conventional wisdom often tells us that success is born from a long string of failures. While “REWORK” acknowledges the value of learning from mistakes, it boldly challenges the notion that failure is a mandatory prerequisite for success.

In the pursuit of our goals and ventures, it’s common to hear the adage, “If you fail a thousand times, you’ll discover a thousand ways that don’t work.” “REWORK,” however, invites us to reevaluate this perspective. It argues that focusing solely on failure can blind us to the path of success.

The book contends that success stories, rather than being mere anomalies, provide valuable insights. By examining what works, we can actively seek out and replicate successful strategies. This proactive approach, often overlooked in the shadow of failure, can significantly expedite our journey to success.

“REWORK” encourages us to study success stories, not just for inspiration, but as tangible roadmaps for our own endeavors. By understanding the elements and decisions that contributed to success, we can make informed choices and increase our chances of achieving our goals without the need for a trail of failures.

The key takeaway here is that while failures may teach us resilience and perseverance, they are not the sole teachers of success. “REWORK” invites us to embrace the idea that learning from the achievements of others can be equally—if not more—valuable on our quest for greatness.

Learning #5: Build Products That Are “In-Home-Good”

In the world of business, it’s easy to be captivated by products that are “in-store-good.” These are the items that dazzle us on store shelves, often sparking impulse purchases driven by their allure. Yet, as “REWORK” astutely points out, the initial excitement often fades, and these products end up collecting dust in a corner of our homes.

“REWORK” imparts a critical lesson: successful products aren’t just those that look appealing in stores; they’re the ones that genuinely solve a problem or fulfill a need in our everyday lives. These are the products that are “in-home-good.”

The authors emphasize that, as creators and entrepreneurs, our focus should be on crafting solutions that address specific customer problems. Instead of designing products that merely dazzle on the surface, we should strive to create offerings that make a meaningful difference in people’s lives.

This concept aligns with the idea that lasting success comes from understanding and empathizing with the end-users’ needs. “REWORK” reminds us that flashy features and marketing hype may attract attention initially, but it’s the utility and value a product brings to its users that ensures its longevity.

The takeaway here is clear: prioritize creating products that people genuinely need and want in their daily routines. By aligning your efforts with solving real-world problems, you’re not only more likely to achieve sustained success but also to make a lasting impact in the lives of your customers.

In a world filled with fleeting trends and short-lived novelties, “REWORK” encourages us to be the creators of products that stand the test of time and truly enhance the human experience.

By applying these principles, you can approach your work, projects, and entrepreneurial endeavors with a fresh perspective, embracing simplicity, innovation, and a focus on solving real-world problems.

Link to “REWORK” on Amazon: REWORK by Jason Fried and David Heinemeier Hansson

The post My Top 5 learning from the Book “REWORK” appeared first on CodeLila.

Load .env Files in Node.js: The Old and New built-in Way

Navin Prasad — Thu, 28 Sep 2023 15:16:08 +0000

Introduction

Hello Friends, When developing Node.js applications that require configuration variables to be kept separate from the code, developers often create a .env file to store these variables. Traditionally, the popular approach has been to use the dotenv package to load these configuration variables. However, with the release of Node.js v20.6.0, the Node.js team has introduced built-in support for loading .env files, eliminating the need for a third-party package.

The dotenv is a great package which helped the developers to load configuration variables from .env file in many years but now the NodeJs team decided to support loading .env files as a build in feature and good news is this is released in Node.js v20.6.0.

In this blog post we will see how we used to load .env files using dotenv package and then we will learn new way of loading .env file in NodeJs without installing any third party package.

How to Load .env Files with `dotenv` (Traditional Method):

Lets us create a Node.js Project.

Create an folder and open that on VSCode as below

In terminal run npm init command as below, it give you couple of prompt, just press enter

At the end a package.json file should be created for you.

Create a new file index.js in the same folder.

Create any .env file with some configuration for this demo I have created a .env file and named it “.env” at the root of the project. add a example cofiguration key.

You can keep actual configuration in this file in your real Node.js Projects.

Now to explore old way of loading .env file, Lets us install the dotenv package using below command.

npm install dotenv

once done, you should see similar terminal output as below.

Create a index.js file just to see if we are able to read the configuration or not. The code is as below.

require('dotenv').config()
console.log("Running...")
console.log("DATABASE_SERVER_NAME", process.env.DATABASE_SERVER_NAME)

Now run the application and you should see the output in console as below.

You can see in above output that we are able to read the configuration value. This is how we used to load the env file till date.

How to Load .env Files in Node.js Without `dotenv` (New Method):

Now Lets us see the new way which is the loading the .env file in NodeJs without any third party package. Here the the steps.

Make sure you are on Node.js v20.6.0 or latest. If not install the latest Node.js. If you manage the multiple Node.js version too using node version manager(nvm) , follow this post if you do not know how to install and use multiple nodeJs on same machine.

How to use nvm to install multiple nodeJS versions on windows? – CodeLila

Now switch to Node.js v20.6.0.

remove the dotenv config line from the index.js as below.

console.log("Running...")
console.log("DATABASE_SERVER_NAME", process.env.DATABASE_SERVER_NAME)

run the application using below line.

node --env-file .env index.js

you should see the below output.

You can see this output is same as when we loaded the .env file with dotenv packge.

You can read more about this release here: https://nodejs.org/en/blog/release/v20.6.0

Conclusion:

Node.js v20.6.0 introduced a new built-in way to load .env files, eliminating the need for the dotenv package. This simplifies the process of managing configuration variables in Node.js applications. Developers can now choose between the traditional method and the new built-in approach based on their project’s requirements.

The post Load .env Files in Node.js: The Old and New built-in Way appeared first on CodeLila.

Effortless Port Forwarding with VS Code: Accessing Local Services Online

Navin Prasad — Wed, 20 Sep 2023 12:38:20 +0000

Hello friends, suppose you are developing a Web Application or a API and you want to expose it to few peoples or may be your clients. You want them to try the application/API quickly, ( which is not hosted yet ) and give their valuable feedback, so that you can make the necessary changes and then finally deploy it.

It was tiresome task previously. Rather I would say, we hardly thought that this could also be a possible way to implement and test the APIs or Web Applications. As sharing the application from local development environment was not so easy.

Now it has become simple and smooth by the use of VS code editor for development.

Let us see how we can do it stepwise.

Let us setup a sample react app. Go to the desired folder in command prompt and run this command to create a sample React app.

npx create-react-app my-demo-app

Wait for it to complete. You may get the similar window as below.

Open the app in VS code using the given command on same terminal.

Now go to VS Code editor you just opened and then open its terminal.

Note: Be sure you are on VS Code version 1.82 or the latest one. You can check for it by going to the about section.

Run the application, then type the below command on the terminal and press Enter.

npm start

By now the demo app must be ready and running.

PORT FORWARDING: HOW TO SET PORT VISIBLITY TO PRIVATE.

Go to PORTS tab on same panel where you run the above command. You will encounter the below options.

Here you have to configure the port that you want to forward.

Right now the demo app is running on port 3000, and you want that to be accessible to your clients over the internet. For that you need to specify port 3000 in port column.

It will ask you to signin to GitHub, as given below.

Click on “ Allow” and sign in on GitHub. After successful sign in, it will ask for permission to open the URI.

Allow by clicking “ Open “. You may get the notification as below while it is progressing.

On completion, the port tab will have the entry for your port.

By default the visibility will be private and it will allow to access the forwarded address only if you signin in GitHub. This is one way to use the forwarded address.

Let us copy the forwarded address and open it on broswer.

It will ask you to verify your identity.

Click “ Authorize Dev Tunnels” , and it will redirect you to the application. You might encounter somewhat similar warning window as below.

Click “ Continue” as we trust the URI/Application we are trying to access. You will see the application running on forwarded addess.

You can change the forwaded address to public, so that you are not asked for any GitHub authorizations. Let us expore that too.

PORT FORWARDING: HOW TO SET PORT VISIBLITY TO PUBLIC.

Right click on the forwarded port entry and go to “ Port Visibility “.

make it “ Public “

Now, access the same forwarded address on browser. Here also, you will get some similar warning window as below.

click “ Continue “

and you will see the app runnning on forwarded port without doing any GitHub authentication/authorization.

You can also edit the port protocal. For this Right click on the port entry and go to “ Change Port Protocol “, then select “ HTTPS ” over there.

You can read more about port fowarding feature here.

Summary

In this blog post, we explored how Visual Studio Code (VS Code) simplifies the process of sharing and testing web applications and APIs. We started by creating a sample React app, then used VS Code to manage and run it effortlessly. VS Code’s “PORTS” tab allowed us to expose our app over the internet, with the option for GitHub authentication or making it public. We also learned how to enhance security by switching to the “HTTPS” protocol. Ultimately, VS Code proves to be an invaluable tool for developers, streamlining collaboration and ensuring polished results in web development.

The post Effortless Port Forwarding with VS Code: Accessing Local Services Online appeared first on CodeLila.

Mastering API Versioning in ASP.NET Core WebAPI: 3 Proven Methods to implement it

Navin Prasad — Fri, 15 Sep 2023 12:49:06 +0000

Introduction

When I started learning Asp.net WebAPIs few year back for a client project, I learned how to implement webAPI and how that can be exposed. There was a chapter in the book which talked about API versioning. I read that but I thought it might be for letter stage of application, or large applications only.

But what I realized while doing actual API project development , The API versioning is as important as exposing the API for the client to consume. It gives your application the direction for the future enhancements without lots of breaking changes due to technical debts.

You might have came across third party APIs like “/api/v1/Products” , where “v1” is actually API version1. So, here we are going to learn all about API versioning in this blog with actual implemetation in a sample project.

Ways to implement API Versioning

We can implement Api vesioning basically in three ways :-

URL based API Versioning
Header based API Versioning
Query Parameter based API Versioning

Sample Project to implement API versioning.

Open Visual studio 2022 , go to File->New->Project, select ASP.NET Core Web API Project template and click on Next.

Give a name to the project , for instance “api-versioning-example” and click on Next.

Select “.Net 7.0 (Standard Term Support)” as a Framework and Click on Create.

After successful creation, you would able to see a window somewhat like the below one.

We will add another assembly project to keep the API projects Models seperate. It is always a good practice to divide the code based on their logic and functions.

Select the solution and then Right click then Add->New Project and select the DLL category and then select the Class Library(.Net Framework) Project template from the List.

Click on Next. You need to provide the name for the DLL project now. name it like “api-versioning-Models” and click on Create.

A new Project should be added to your solution now.

Delete the “Class1.cs” file and add the two folders names “Domains” and “DTOs” in it.

In Domains folder add a new Class name “Product” and update its code to have some sample properties as below.

using System;

namespace api_example_Models.Domains
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Category { get; set; }

        public double Price { get; set; }
    }
}

In DTOs folder add a new class name “ProductDTO” and update it as below.

using System;

namespace api_example_Models.DTOs
{
    public class ProductDTO
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Category { get; set; }
        public double Price { get; set; }
    }
}

The final structure should be as below.

Now add a new DLL project in solution and name it “api-example-DataContext” , once Done, delete the “Class1.cs” file from it.

Now Select the “api-example-DataContext” Project and add the “api-example-Models” project as reference in it.

Add a new Class “Products” in “api-example-DataContext” and update its code to return a sample product list. In actual application this would be returned from some storage(databases).

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Xml.Linq;
using api_example_Models;
using api_example_Models.Domains;

namespace api_example_DataContext
{
    public class Products
    {
        public List<Product> GetProducts()
        {
            // Sample Product List
            var products = new List<Product>();
            products.Add(new Product()
            {
                Id = 1,
                Name = "Product 1",
                Description = "Product 1 descrition",
                Category = "Fasion",
                Price = 250
            }
            );
            products.Add(new Product()
            {
                Id = 1,
                Name = "Product 2",
                Description = "Product 2 descrition",
                Category = "Electronics",
                Price = 150
            });

            return new List<Product>();
        }
    }
}

Now select the api project and add other two projects as reference.

Now select the “Controllers” and add a new API controller , name it “ProductController”. Now we will be creating a GET api which should returns all products, Update the ProductController with below code.

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using api_example_Models.DTOs;
using api_example_DataContext;

namespace api_versioning_example.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ProductController : ControllerBase
    {
        [HttpGet]
        public ActionResult<List<ProductDTO>> GetAllProducts()
        {
            var productDTOs = new List<ProductDTO>();
            var products = new Products().GetProducts(); 
            if(products != null)
            {
                foreach (var product in products)
                {
                    productDTOs.Add(new ProductDTO()
                    {
                        Id = product.Id,
                        Name = product.Name,
                        Description = product.Description,
                        Price = product.Price,
                        Category = product.Category,
                    });
                }
            }
            return productDTOs;
        }
    }
}

Out basic API is ready now. Lets test it once on browser.

URL based API Versioning

Now Lets start implementing the URL based API Versioning .

Right click on “api-versioning-example” project and then click on “manage Nuget package”. Search for “Microsoft.AspNetCore.Mvc.Versioning” package and install in your project.

Once installed, you should see message as below.

Now Open Program.cs file and enable api versioning by adding below line of code just after the “builder.Services.AddControllers();” line

builder.Services.AddApiVersioning();

Now go we have to build two version of DTOs as the new DTO would going to return the resired changes in newer API version.

Lets go to “api-example-DataModels” Project and create new folder under the DTOs folder, I have named it “V2”, next add a new class file named “ProductDTOV2”. Update it code with below code given. Let us suppose we need to rename few fields in new api version

using System;

namespace api_example_Models.DTOs.V2
{
    public class ProductDTOV2
    {
        public int Id { get; set; }
        public string ProductName { get; set; }
        public string LongDescription { get; set; }
        public string Category { get; set; }
        public double Price { get; set; }
    }
}

In above code I have update the Name to ProductName and Description to LongDescription.

Next go to ProductController in Controllers folder and add a new HTTPGET method to return add Product with updated names. Here is the code.

        [HttpGet]
        public ActionResult<List<ProductDTOV2>> GetAllProductsV2()
        {
            var productDTOs = new List<ProductDTOV2>();
            var products = new Products().GetProducts();
            if (products != null)
            {
                foreach (var product in products)
                {
                    productDTOs.Add(new ProductDTOV2()
                    {
                        Id = product.Id,
                        ProductName = product.Name,
                        LongDescription = product.Description,
                        Price = product.Price,
                        Category = product.Category,
                    });
                }
            }
            return productDTOs;
        }

Now, we want to serve this new GET method when someone type “/api/v2/Product” and return the previous Get method (GetAllProducts) response when someone type “/api/v1/Product”. Let us update the ProductController to achieve this.

In Product Controller just above the class Name add below line.

    [Route("api/v{version:apiVersion}/[controller]")]
    [ApiController]
    [ApiVersion("1.0")]
    [ApiVersion("2.0")]

Add below line just above the [HttpGET] for the “GetAllProducts” method.

[MapToApiVersion("1.0")]

Add below line above the [HttpGet] for the “GetAllProductsV2” method.

[MapToApiVersion("2.0")]

Here is how the final ProductController looks like.

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using api_example_Models.DTOs;
using api_example_DataContext;
using api_example_Models.DTOs.V2;

namespace api_versioning_example.Controllers
{
    [Route("api/v{version:apiVersion}/[controller]")]
    [ApiController]
    [ApiVersion("1.0")]
    [ApiVersion("2.0")]
    public class ProductController : ControllerBase
    {
        [MapToApiVersion("1.0")]
        [HttpGet]
        public ActionResult<List<ProductDTO>> GetAllProducts()
        {
            var productDTOs = new List<ProductDTO>();
            var products = new Products().GetProducts(); 
            if(products != null)
            {
                foreach (var product in products)
                {
                    productDTOs.Add(new ProductDTO()
                    {
                        Id = product.Id,
                        Name = product.Name,
                        Description = product.Description,
                        Price = product.Price,
                        Category = product.Category,
                    });
                }
            }
            return productDTOs;
        }

        [MapToApiVersion("2.0")]
        [HttpGet]
        public ActionResult<List<ProductDTOV2>> GetAllProductsV2()
        {
            var productDTOs = new List<ProductDTOV2>();
            var products = new Products().GetProducts();
            if (products != null)
            {
                foreach (var product in products)
                {
                    productDTOs.Add(new ProductDTOV2()
                    {
                        Id = product.Id,
                        ProductName = product.Name,
                        LongDescription = product.Description,
                        Price = product.Price,
                        Category = product.Category,
                    });
                }
            }
            return productDTOs;
        }
    }
}

Now run the application you will see swagger is giving some error, which we will fix later.

Now go to the browser and the the Product url with V1(http://localhost:5062/api/v1/Product) as below. you should have response as below.

Now type the new V2 Api for Product “http://localhost:5062/api/v2/Product”

If you notice the two outputs, you would fine the V1 is returning the same response but V2 is returning the updated response. but if you type the old url(http://localhost:5062/api/Product) without version which was published then you may get error.

This is how you can add support for api versioning in you asp.net WebAPI project.

We have seen how we can add support for API versioning in route which is more popular and obvious way but there are other ways as well which can be also be used.

Header based API Versioning

To implement header based versioning we need to make following changes in application.

Replace the “builder.Services.AddApiVersioning()” line in program.cs file with below code.

builder.Services.AddApiVersioning(options =>
{
    options.ApiVersionReader = new HeaderApiVersionReader("api-version");
    options.ReportApiVersions = true;
});

Replace the “[Route(“api/v{version:apiVersion}/[controller]”)]” in ProductController file with “[Route(“api/[controller]”)]”.

Now run the application, you need to use some rest client like postman to pass the header information.

You can try changing the “api-version” header to 2.0, you should be getting the 2.0 products output.

Query Parameter based API Versioning

Now let us take a look on how to implement Query Parameter based API Versioning.

Let us go to program.cs file and update the below line of code.

builder.Services.AddApiVersioning(options =>
{
    options.ApiVersionReader = new HeaderApiVersionReader("api-version");
    options.ReportApiVersions = true;
});

Change the “HeaderApiVersionReader” to “QueryStringApiVersionReader”, the updated code should be looks like below.

builder.Services.AddApiVersioning(options =>
{
    options.ApiVersionReader = new QueryStringApiVersionReader("api-version");
    options.ReportApiVersions = true;
});

browse the url with api-version as parameter. You should have similar output as below.

This is how you can implement the API versioning in asp.net core API.

Summary

In this comprehensive guide, we dive deep into the world of API versioning within ASP.NET Core WebAPI. You’ll discover three battle-tested methods for implementing API versioning effectively, ensuring seamless compatibility across your applications. Whether you’re an experienced developer or just starting your journey, this post provides invaluable insights to help you manage and optimize your APIs with confidence. Explore the latest techniques and best practices to stay ahead in the ever-evolving landscape of ASP.NET Core WebAPI.

The post Mastering API Versioning in ASP.NET Core WebAPI: 3 Proven Methods to implement it appeared first on CodeLila.

DEV Community: Navin Prasad

10 Easy Steps to Effortlessly Build RESTful API CRUD Operations in Ruby on Rails

Table of Contents

1. Introduction

2. Setting Up the Environment

3. Creating a New Rails Application

4. Generating a Scaffold

5. Configuring Routes

6. Understanding the Controller Actions

7. Testing the API Endpoints

8. Handling Errors and Validations

9. Securing the API

10. Deploying the Application

11. Conclusion

Mastering Data Fetching with React’s useSWR Hook

Introduction

What is useSWR?

Step 1: Install SWR

Step 2: Import the useSWR Hook

Step 3: Define a Fetcher Function

Step 4: Use the useSWR Hook

Step 5: Handle Loading and Errors

Optional Step: Customize Configuration

How automatic caching works in useSWR hook?

How to do error handling with useSWR hook?

Conclusion

Exploring the Power of Multiple Instances of the Same Interface in ASP.NET Core

Introduction

Prerequisites:

Creating “ApiGatewayExample” ASP.NET Core WebAPI Project:

Adding payment interface and its implementations.

Conclusion

React Security: Understanding XSS Attacks and the Risks of dangerouslySetInnerHTML

Introduction:

What is dangerouslySetInnerHTML attribute in React.

Senarios when we might need to use dangerouslySetInnerHTML in React.

How to make it secure?

DOMPurify package.

Install DOMPurify package

Summary

Key Takeaways:

Unlocking Seamless Data Sharing: A Deep Dive into React Router v6 and Context for Multi-Page Dashboards

Conclusion

𝐘𝐨𝐮𝐫 𝐈𝐦𝐩𝐞𝐫𝐟𝐞𝐜𝐭𝐢𝐨𝐧 𝐢𝐬 𝐘𝐨𝐮𝐫 𝐀𝐮𝐭𝐡𝐞𝐧𝐭𝐢𝐜𝐢𝐭𝐲

Implementing Code Splitting in React for Improved Performance

Introduction

Summary

Enhancing Reliability: Global Exception Handling in ASP.NET Core Web APIs

Setting Up an ASP.NET Core Web API Project

Adding Exception Handling to the WeatherForecastController

Async-Await in ASP.NET Core Web APIs

Updated GET Method

Exception Handling

Summary

My Top 5 learning from the Book “REWORK”

Learning #1: Embrace Unconventional Thinking

Learning #2: Act on Your Ideas

Learning #3: Prioritize Minimal Viable Products (MVPs)

Learning #4: Learning from Success, Not Just Failure

Learning #5: Build Products That Are “In-Home-Good”

Load .env Files in Node.js: The Old and New built-in Way

Introduction

How to Load .env Files with dotenv (Traditional Method):

How to Load .env Files in Node.js Without dotenv (New Method):

Conclusion:

Effortless Port Forwarding with VS Code: Accessing Local Services Online

PORT FORWARDING: HOW TO SET PORT VISIBLITY TO PRIVATE.

PORT FORWARDING: HOW TO SET PORT VISIBLITY TO PUBLIC.

Summary

Mastering API Versioning in ASP.NET Core WebAPI: 3 Proven Methods to implement it

Introduction

Ways to implement API Versioning

URL based API Versioning

Header based API Versioning

Query Parameter based API Versioning

Summary

What is `useSWR`?

Step 2: Import the `useSWR` Hook

Step 4: Use the `useSWR` Hook

How to Load .env Files with `dotenv` (Traditional Method):

How to Load .env Files in Node.js Without `dotenv` (New Method):