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 

How to restart the node server after the change in the typescript files in Node Express Server development?

 usually we can use the following configuration in the Package.json file to run the node server with nodemon.

"start:dev": "nodemon --watch './**/*.ts' --exec ts-node src/index.ts"

how the above command will required additional configuration for the nodemon.

ts-node-dev will provide us much better experience since there is not setup configuration. we can simply execute the command below to start the node express server and any change is made the server will automatically recompile and restart.

 "dev": "ts-node-dev src/index.ts"

However you must install the ts-node-dev package to run the command

yarn add ts-node-dev

how to delete all node_modules in the current directory?

 when you have a specific folder to store all react projects, then there will be lots of spaces being occupied by the node_modules folder.

we can easily execute the following command to free up the space for any projects not currently working on.

E:\Code

FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" rm -rf "%d"

how to enable .Net 6.0 hot reload in Visual Studio Code?

 Hot Reload is a cool feature in .Net 6. we can easily enable this feature in Visual Studio Code with executing the following command 

dotnet watch run 

then we do not have to rerun the dotnet run to recompile the whole application to see the change immediatley.

 

10 best Nuget Package for .Net Developer

Most .NET Developer should love to  integrate the following package in their .NET project developer.

xUnit & NUnit : pacakge for unit testing

Moq & NSubstitute: Mocking libaries for .Net testing

Polly: Provide rich features for policies handling

FluentAssertions: Provide  rich features for Assertions

BenchmarkDotNet: Provider Performance trace

Serilog: Provide logging with full structure events

Autofixture & Bogus : Fake Data Generator

Scrutor: add scanning capabilities to the default Microsoft Extensions. (DependecyInjection DI Container)

Automapper:Object to Object mapper

Dapper & Entity Framework Core: Data Access framework: Dapper is simple and customable

MediatR & Brighter : CQRS stands for Command Query Responsibility Segregation libraries. MediatR is an in-process command dispatcher. Brighter is an out of process command dispatcher

FluentValidation: validation library using fluence interface and lamda expression for building validation rules

Refit & RestSharp: API tools. Refit is an automatic type-safe REST library for .Net. RestSharp is a simple REST and HTTP API Client for .Net.

Json.NET: handle json data

Immediate Git Commands

a list of handy git commands

# check the change of the file 

git diff filename

# check in parital change of the file -p flag will show us the change in patch level

git add -p filename

# use git commit to enter the concise message

git commit 

# use git log to check the commit history to ensure the change had been commit

git log

# create a branch   

git branch test

# use the branch

git checkout test

# push the change back to the repository

git push --set-upstream origin test

# merge the change

git merge test

# undo the merge and rebase

git merge --abort

git rebase--abort

#use mergetool to perform the merge

git mergetool