Posts

Showing posts with the label Web Development

Secure React SPA using Keycloak with OpenID Connect in 2021

Image
In the light of my previous post  “ Secure React SPA using Azure Endpoints with Authorization code flow ”  I realized that configuring multiple providers with you application needs lots of coding and configuration and specially when you want to stick with Authorization code flow for all the providers. While Azure, Google supports a request from cross origin requests in a way and on other hand Facebook strictly doesn’t support it. (So we needed to create a proxy server to modify CORS policy to get your request accepted). 1. Introduction Thanks to  WildFly  developer community for developing a open source project  Keycloak . “ Keycloak  is an open source software product to allow  single sign-on  with  Identity and Access Management  aimed at modern applications and services” as from Wikipedia. All you need to do is keep Keycloak application server running on a machine whether it is on same domain or cross domain doesn’t matter. In this post we are going to learn about running a Keycloak

How to optimizations by Angular in 2021?

Image
H ave you ever wondered How Angular renders all the HTML, CSS, Typescript files present in the application into the browser? What happens to the code when the application is run in production(prod) mode? What if the developer accidentally creates any component or any piece of code that is not used anywhere in the application? So after reading this article one should be able to answer the above questions. Let’s dive into the topic. Angular implicitly or explicitly does some optimizations for the application. They are: Bundling AOT Compilation Minification Uglification Tree shaking Let’s get into the above-mentioned ones in detail. Bundling :  Bundling is the process of combining code in multiple files into a single file. So during compilation, Angular generates 5 javascript files and loads them into the application. They are : inline.bundle.js (or) inline.js polyfills.bundle.js (or) polyfills.js main.bundle.js (or) main.js styles.bundle.js (or) style

All About Software Architecture for 2021 Developers

Image
Introduction In this article, I will try to explain what architecture and clean architecture is, and architecture's role in projects. Examples of web architecture application Let's consider an example of a service with one architectural level (Single Tier) In an application with one architectural level, the user interface, business logic, that is, the backend part of the application and the database are on the same server An example of an application with one architectural level are applications such as MS Office, GIMP Benefits of using a single-layer architecture Very little or no delay in the interaction of components due to the fact that the components are located on the same server Although it largely depends on the machine's power and software hardware requirements, to measure the real performance of a single-tier application In addition, the user's data remains on his machine and does not need to be transferred over the network. This ensures data security

How to implement and use Swagger in Node.js in 2021?

Image
In this blog article, we will go discuss on the topic of "How to implement and use Swagger in Nodejs for 2021 Web Developers". I hope by reading this article will help you to understand the usage of Swagger for managing and documenting the RestAPI. Let's get started !!!   About Swagger : Swagger is a set of open-source software tools built around the  OpenAPI  Specification with which we can build, document, and test our APIs. You can get more data about Swagger from its site. In this article, I will discuss; the most effective method to actualize Swagger to a RESTful web worker worked with Node.js Strut UI Programming interface documentation I will proceed to tell accepting that you know about Node.js and RESTful API ideas at any rate at a fundamental level and I will utilize VS Code as the code proofreader. Right off the bat we should make a RESTful web worker: I explore the cursor to the document I will make the venture in the terminal and I am making the package.json

How to Fetch Data in React with Example in 2021 ?

There are various methods to fetch data from an external API in React. But which one should you be using for your applications in 2021 In this tutorial, we will be reviewing three of the most widely used patterns to fetch data with React by making an HTTP request to a REST API We won't just cover how to bring information, however how to best deal with stacking and blunder state after getting our information. Let's get started 1. The most effective method to Fetch Data in React Using the Fetch API The most open approach to get information with React is utilizing the Fetch API. The Fetch API is an apparatus that is incorporated into most present day programs on the window object (window.fetch) and empowers us to make HTTP demands effectively utilizing JavaScript guarantees. To cause an easy To get demand with get we simply need to incorporate the URL endpoint to which we need to make our solicitation. We need to make this solicitation once our React segment has mounted. To do a