All_commands

Commands	Repositories	Live Demos
* My VsCode Setting
01. New Repository command	Responsive Navbar
02. React App Deployment on Github	Arifs BD Ltd
03. React Vite App Deployment on Github	Currency Converter
04. TailwindCSS Installation in Vite Project
05. Mongoose + NodeJs + Express app Deploy on render	Mongoose + Express
06. tailwind css container customise
07. Eslint configuration

01_New_Repository_Command

       git init
       git add README.md
       git commit -m "comment"
       git branch -M main
       git remote add origin https://github.com/ibrahimk4111/<your repo name>.git
       git push -u origin main

back to top

02_React_App_Deployment_on_Github

step-1 :

       First of all push your code on github successfully.

step-2 : After that Open the VSCODE terminal:

       npm install gh-pages --save-dev

step-3 : Open 'package.json' file and write :

       "homepage": "https://{User Name}.github.io/{App Name}"
                   
       "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build",
       }

step-4 : npm run deploy

step-5 : Then go to your github Repository :

       setting -> pages

step-6 : Click on available link there

back to top

03_React_Vite_App_Deployment_on_Github

step-1: Setup base on vite.config :

       base: "/[REPO_NAME]/"

step-2: Create .github/workflows/deploy.yml and add the code bellow :

       # Simple workflow for deploying static content to GitHub Pages
       name: deploy
       
       on:
         push:
           branches: ['main']
       
         # Allows you to run this workflow manually from the Actions tab
         workflow_dispatch:
       
       # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
       permissions:
         contents: read
         pages: write
         id-token: write
       
       # Allow one concurrent deployment
       concurrency:
         group: 'pages'
         cancel-in-progress: true
       
       jobs:
         # Single deploy job since we're just deploying
         deploy:
           environment:
             name: github-pages
             url: ${{ steps.deployment.outputs.page_url }}
           runs-on: ubuntu-latest
           steps:
             - name: Checkout
               uses: actions/checkout@v4
             - name: Set up Node
               uses: actions/setup-node@v3
               with:
                 node-version: 18
                 cache: 'npm'
             - name: Install dependencies
               run: npm install
             - name: Build
               run: npm run build
             - name: Setup Pages
               uses: actions/configure-pages@v3
             - name: Upload artifact
               uses: actions/upload-pages-artifact@v2
               with:
                 # Upload dist repository
                 path: './dist'
             - name: Deploy to GitHub Pages
               id: deployment
               uses: actions/deploy-pages@v2

step-3: Push

       git add . 
       git commit -m "deploy workflow" 
       git push

04. Active workflow

       * Config -> Actions -> General -> Workflow permissions -> Read and Write permissions
       * Actions -> failed deploy -> re-run-job failed jobs 
       * Pages -> gh-pages -> save

back to top

04_TailwindCSS_Installation_on_React_Vite_App

Step 1: open terminal to install

       npm install -D tailwindcss postcss autoprefixer

Step 2:

       npx tailwindcss init -p

Step 3: go to 'tailwind.config.js' and paste below code

       /** @type {import('tailwindcss').Config} */
       
       export default {
         content: ["./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",],
         theme: {
           extend: {},
         },
         plugins: [],
       }

back to top

05_Mongoose_NodeJs_Express_app_Deploy_on_render

step 1:

       connect to the github repo

step 2:

       set Environment key and value same as your .env file contains

back to top

06_tailwind_css_container_customise

        theme: {
            container: {
                center: true,
                padding: "1rem",
                screens: {
                  sm: "100%",
                  md: "1050px",
                  lg: "1100px",
                  xxl: "1200px"
                },
              },
        }

back to top

07_Eslint_configuration

step - 1.

npm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier prettier --save-dev

step - 2.

create .eslintrc.json and add these settings:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
    // "@typescript-eslint/consistent-type-definitions": ["error", "type"],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-inferrable-types": "off",
    "no-console": "warn",
    "prefer-const": "error",
    "no-var": "error"
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

also add .eslintignore and add these settings:

# Ignore node_modules
node_modules/

# Ignore build directories
dist/
build/

# Ignore minified JavaScript files
*.min.js

# Ignore specific configuration files
# .eslintrc.js

step - 3.

into package.json add this two line:

"lint": "eslint src --ignore-path .eslintignore --ext .ts",
"lint:fix": "eslint src --ignore-path .eslintignore --ext .ts --fix",

back to top

My_VSCode_Setting

{
  "files.autoSave": "onWindowChange",
  "editor.linkedEditing": true,
  "css.lint.unknownAtRules": "ignore",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",
  "editor.showUnused": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench.editorAssociations": {
    "*.sqlite3": "default"
  },
  "editor.mouseWheelZoom": true,
  "workbench.list.mouseWheelScrollSensitivity": 0.5,
  "screencastMode.mouseIndicatorSize": 100,
  "html.format.templating": true,
  "files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements",
    "*.html": "html"
  },
  "emmet.includeLanguages": {
    "django-html": "html",
    "django-css": "css"
  },
  "[django-html]": {
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorTheme": "SynthWave '84",
}

back to top