A cool tool (Windows Powertoys) to provide you quick access to application in windows environment

 Usually we need to click on the Windows Start button to launch the menu, then we can search the application that we want the access.

Now Microsoft provide us cool toy call Windows Powertoys. we can use Powertoys Run to quickly find the application and launch it.

shortcut key: ALT + SPACE to activate the Powertoys Run 

then we can type in the input box to find the application that we want to launch

you can download this toy from GitHub with the link below

https://github.com/microsoft/PowerToys/releases/tag/v0.59.1

ASP.Net MVC Web API vs .Net 6 Minimal API quick compare in a diagram

 Microsoft introduced the Minimal API in .Net 6, which is a lightweight API development for web api

We can show two with difference in a diagram

we can easily spot the big difference is that there is no Controller component in the Minimal API.

As a result there will much more difference between Mininal API and MVC Web API

• No support for filters: For example, no support for IAsyncAuthorizationFilter, IAsyncActionFilter, IAsyncExceptionFilter, IAsyncResultFilter, and IAsyncResourceFilter.
• No support for model binding, i.e. IModelBinderProvider, IModelBinder. Support can be added with a custom binding shim.
  • No support for binding from forms. This includes binding IFormFile. We plan to add support for IFormFile in the future.
• No built-in support for validation, i.e. IModelValidator
• No support for application parts or the application model. There's no way to apply or build your own conventions.
• No built-in view rendering support. We recommend using Razor Pages for rendering views.
• No support for JsonPatch
• No support for OData
• No support for ApiVersioning. See this issue for more details.

you can find out more information with this link  Tutorial: Create a minimal web API with ASP.NET Core

How to quickly set up a shared library for Micro-Frontend application?

When we start the Micro-Frontend application development. we can use Turborepo to setup the project by 

executing the following command in the CMD window or Terminal in the VS Code.   

npx create-turbo@latest

By default, the project will create a ui inside the packages folder for crosss project sharing.

if you want to create other sharing library or context project, then we just have to copy the entire ui folder and rename it to store (which is the state-management for the entire application). we can run the following command from the parent level of ui, which should packages folder.

cp -rf ui store

now open the package.json file inside the store folder to modify the following information.

name: "store"

remove all libraries in the dependenices section  and unrelated libraries in the devdependencies section.

then add zutand for state management.

{

  "name": "ui",

  "version": "0.0.0",

  "main": "./dist/index.js",

  "types": "./dist/index.d.ts",

  "license": "MIT",

  "scripts": {

    "dev": "tsc --watch --outDir dist",

    "build": "tsc --outDir dist",

    "lint": "eslint *.ts*"

  },

  "devDependencies": {

    "@types/react": "^18.0.9",

    "@types/react-dom": "^18.0.5",

    "eslint": "^7.32.0",

    "eslint-config-custom": "workspace:*",

    "react": "^18.1.0",

    "tsconfig": "workspace:*",

    "store": "workspace:*",

    "typescript": "^4.5.2"

  },

  "dependencies": {

    "@mantine/core": "^4.2.6",

    "@mantine/hooks": "^4.2.6",

    "react-router-dom": "^6.3.0"

  }

}

now the modified package.json should looks like the one below

{

  "name": "store",

  "version": "0.0.0",

  "main": "./dist/index.js",

  "types": "./dist/index.d.ts",

  "license": "MIT",

  "scripts": {

    "dev": "tsc --watch --outDir dist",

    "build": "tsc --outDir dist",

    "lint": "eslint *.ts*"

  },

  "devDependencies": {

    "@types/react": "^18.0.9",

    "@types/react-dom": "^18.0.5",

    "eslint": "^7.32.0",

    "eslint-config-custom": "workspace:*",

    "react": "^18.1.0",

    "tsconfig": "workspace:*",

    "typescript": "^4.5.2"

  },

  "dependencies": {

    "zustand": "4.0.0-rc.1"

  }

}

 

 You should run pnpm i to link all packages together.  Now we should have a share Store acrosss all projects in our MFE application.

How to access Postgres Database host in the Docker?

 it is very convenient to spin up a Postgres Database in the docker by composing a docker compose yaml file.

the following code will help us setup a Postgres Database in the Docker

version: '3.8'

services:

  twitter_postgres_db:

    image: debezium/postgres:13-alpine

    environment:

      - POSTGRES_DATABASE=twitter_db

      - POSTGRES_USER=twitter_dev

      - POSTGRES_PASSWORD=twitter_dev

    ports:

      - 6543:5432

    volumes:

      - twitter_db_data:/data/db

volumes:

  twitter_db_data:

I should be able to setup another container for the PgAdmin in the docker. Since I already install a Postgres PgAdmin instance in my desktop. I just want to access the Postgres Database from my local host.

Here is the step that we should follow to access the Postgres from local PgAdmin

1.  Register the localhost Server

2.  Fill the following information in the Register Server Window

• Name: LocalHost
•  Host Name /Address: localhost
• Port: 6543  (copied from the docker compose file)
• Maintenance Database: twitter_db (copied from the docker compose file)
• Username: twitter_dev  (copied from the docker compose file)
• Password: twitter_dev  (copied from the docker compose file)

3.  After I click on the save button, then you should be able to access the Twttier_db