Skip to content

Instantly share code, notes, and snippets.

View nabeel-shakeel's full-sized avatar
:electron:
Focusing and Learning

Nabeel Shakeel nabeel-shakeel

:electron:
Focusing and Learning
View GitHub Profile
@nabeel-shakeel
nabeel-shakeel / ProviderComposer.tsx
Created December 31, 2022 12:58 — forked from thebinaryfelix/ProviderComposer.tsx
Component for composing providers in React v18 with Typescript
export interface IProviderComposerProps extends React.PropsWithChildren {
/**
* Providers list
* */
with: React.FC<React.PropsWithChildren>[]
}
const ComposerFragment: React.FC<React.PropsWithChildren> = ({
children,
}): JSX.Element => <>{children}</>
@nabeel-shakeel
nabeel-shakeel / husky_readme.md
Created August 4, 2022 06:54
Husky and Lint Staged Setup

Husky - Pre-commit hook

This guide will walk you through the steps to setup git hooks (pre-commits, pre-push) using Husky. Additionally we will be using package lint-staged which tracks of staged code files and run jest tests related to those files on each commit. Let's set it up!

Install Packages

  • Install the following packages
npm install --save-dev husky lint-staged jest ts-jest @types/jest
@nabeel-shakeel
nabeel-shakeel / linter-readme.md
Created August 4, 2022 06:52
ES Lint and Prettifier Setup

ES Lint and Prettifier

The following readme will guide through to setup ES lint for linting TS or JS code, also prettifying code in VS code. ESLint can lint TypeScript files through typescript-eslint plugin, and prettier can format TypeScript code. Let's set it up!

Install Extension

First, if you have previous installed TSLint extension vscode-tslint for VSCode, uninstall it - let ESLint do everything Install ESLint extension from extension marketplace also called dbaeumer.vscode-eslint Install Prettier extesnion from extension marketplace

@nabeel-shakeel
nabeel-shakeel / webpack.auth.js
Created January 2, 2022 09:54
Webpack Configuration for Auth App
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const { dependencies } = require('../../../package.json');
module.exports = (config, context) => {
config.context = process.cwd();
config.plugins.push(
new ModuleFederationPlugin({
name: 'auth',
filename: 'remoteEntry.js',
exposes: {
@nabeel-shakeel
nabeel-shakeel / webpack.dev.js
Created January 2, 2022 09:46
Mirco-Frontend Container Webpack Configuration
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const { dependencies } = require('../../../package.json');
module.exports = (config, context) => {
config.plugins.push(
new ModuleFederationPlugin({
name: 'container',
remotes: {
auth: 'auth@//localhost:8082/remoteEntry.js',
dashboard: 'dashboard@//localhost:8083/remoteEntry.js',
@nabeel-shakeel
nabeel-shakeel / linuxkit.md
Last active August 12, 2021 06:40
Deep Dive into Docker for Mac - Access LinuxKit

LinuxKit VM (Docker for Mac)

  • Access shell of VM
    • $ docker run -it --privileged --pid=host debian nsenter -t 1 -m -u -n -i sh
  • Listing out the service containers running inside VM
    • $ ctr -n services.linuxkit tasks ls
  • Enter into docker service container using containerd
    • $ ctr -n services.linuxkit tasks exec -t --exec-id <process_id> docker sh

Containerd Commands