{"id":21688970,"url":"https://github.com/felix221123/scripts-repo","last_synced_at":"2026-04-15T19:34:16.119Z","repository":{"id":240290875,"uuid":"802227042","full_name":"Felix221123/Scripts-Repo","owner":"Felix221123","description":"this repo stores a bunch of commands and some responsive fonts I need as a developer, will probs add more in the future","archived":false,"fork":false,"pushed_at":"2024-07-31T21:45:59.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T12:41:42.337Z","etag":null,"topics":["setup-script","setuptools"],"latest_commit_sha":null,"homepage":"","language":"Sass","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Felix221123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-17T19:18:07.000Z","updated_at":"2024-07-31T21:46:03.000Z","dependencies_parsed_at":"2024-06-13T23:23:58.764Z","dependency_job_id":"2151e4b8-bf75-4b7f-8475-f866933ebcae","html_url":"https://github.com/Felix221123/Scripts-Repo","commit_stats":null,"previous_names":["felix221123/cmd-repo","felix221123/scripts-repo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FScripts-Repo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FScripts-Repo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FScripts-Repo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FScripts-Repo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Felix221123","download_url":"https://codeload.github.com/Felix221123/Scripts-Repo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244611547,"owners_count":20481214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["setup-script","setuptools"],"created_at":"2024-11-25T17:18:57.938Z","updated_at":"2026-04-15T19:34:11.043Z","avatar_url":"https://github.com/Felix221123.png","language":"Sass","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Command Repository\n\nThis repository stores all the commands I frequently use as a developer (the ones I always forget 🥹).\n\n## Command List\n\n### Setting up React App using vite\n\nHere is a list of them:\n\n* `npx create-vite@latest` - Used for a new React/Angular/Svelte project.\n* `npm i` - Used for installing all the node modules along with `packages.json`.\n\n### Adding Tailwind CSS to a Project\n\nHow to add Tailwind CSS to your project:\n\n1. Install the following in your project directory:\n\n    ```bash\n    npm install -D tailwindcss postcss autoprefixer\n    npx tailwindcss init -p\n    ```\n\n2. Change your content inside your Tailwind config to:\n\n    ```javascript\n    content: [\n        \"./index.html\",\n        \"./src/**/*.{js,ts,jsx,tsx}\",\n    ],\n    ```\n\n3. Add this inside your `index.css` file:\n\n    ```css\n    @tailwind base;\n    @tailwind components;\n    @tailwind utilities;\n    ```\n\n4. Add this to your scripts object in your `package.json`:\n\n    ```json\n    \"css\": \"npx tailwindcss -i ./src/index.css -o ./public/output.css --watch\"\n    ```\n\n### Setting up Vitest (Tools for Testing React Apps) in Your Project\n\n#### Installation\n\nThis module should be installed as one of your project's `devDependencies`:\n\n```shell\n# with npm\nnpm install --save-dev vitest-dom\n# yarn\nyarn add --dev vitest-dom\n# pnpm\npnpm add --dev vitest-dom\n```\n\nInstall jsdom and vitest and other necessary packages:\n\n```shell\nnpm install --save-dev jsdom @testing-library/react @testing-library/jest-dom\nnpm install -D vitest\n```\n\nImport the matchers from `vitest-dom/matchers` once (preferably in your [tests setup file](#)), then pass them to Vitest's `expect.extend` method:\n\n```typescript\nimport * as matchers from \"vitest-dom/matchers\";\nimport { expect, afterEach } from \"vitest\";\nimport { cleanup } from \"@testing-library/react\";\n\nexpect.extend(matchers);\n\n// vitest-setup.ts\nimport \"vitest-dom/extend-expect\";\n\n// runs a cleanup after each test case (e.g. clearing jsdom)\nafterEach(() =\u003e {\n  cleanup();\n});\n```\n\nYou can also configure Vitest to use `vitest-dom` in your test files or `tsconfig.json`:\n\n1. In your test file via a reference directive:\n\n   ```typescript\n   /// \u003creference types=\"vitest-dom/extend-expect\" /\u003e\n   ```\n\n2. In your `tsconfig.json` via the `types` compiler option:\n\n   ```json\n   {\n     \"compilerOptions\": {\n       \"types\": [\"vitest-dom/extend-expect\"]\n     }\n   }\n   ```\n\nEnsure your Vite config is set up correctly:\n\n```javascript\n/// \u003creference types=\"vitest\" /\u003e\n/// \u003creference types=\"vite/client\" /\u003e\n\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  test: {\n    globals: true,\n    environment: 'jsdom',\n    css: true,\n    setupFiles: './src/test/setup.ts',\n  },\n});\n```\n\nInstall the UI version of the test results for a clear visual output:\n\n```shell\nnpm install --save-dev @vitest/ui\n```\n\nAdd this to your `package.json` script objects to run your tests:\n\n```json\n\"scripts\": {\n   \"test\":\"vitest\",\n  \"test:ui\":\"vitest --ui\"\n}\n```\n\nImport these from the React Testing Library to begin your tests:\n\n```javascript\nimport { screen, render } from \"@testing-library/react\";\nimport { describe,it, expect } from \"vitest\";\n```\n\nNow you're all set to use `vitest-dom` in your project. Happy testing!\n\n\n\n### Setting up Cypress Testing (Tools for React Apps) in Your Project\n\n1. Install Cypress:\n\n    ```bash\n    npm install cypress --save-dev\n    ```\n\n2. Add this to your scripts object in your `package.json`:\n\n    ```json\n    \"cy:open\": \"cypress open\"\n    ```\n\n3. Choose Component testing and you be asked to choose your bundler, Cypress will automatically detect the bundler you are using for your react application and you can continue from there\n\n4. Create a new component from the create new component and choose a new component to start with in your project\n\n#### Cypress TypeScript Configuration\n\nTo configure Cypress with TypeScript, follow these steps:\n\n5. **Update `tsconfig.json`**:\n   Include the Cypress folder in your TypeScript configuration to eliminate errors:\n   ```json\n   \"include\": [\"src\", \"cypress\"],\n   ```\n\n6. **Add Cypress Commands**:\n   If the above step doesn't resolve the errors, add the mount to the Cypress interface by modifying the `commands.ts` file:\n   ```typescript\n   import { mount } from 'cypress/react';\n\n   declare global {\n     namespace Cypress {\n       interface Chainable {\n         mount: typeof mount;\n       }\n     }\n   }\n\n   Cypress.Commands.add('mount', mount);\n   ```\n\n7. **Handle Custom Commands**:\n   To resolve similar errors for custom commands, update the `commands.ts` file:\n   ```typescript\n   import { mount } from 'cypress/react';\n\n   declare global {\n     namespace Cypress {\n       interface Chainable {\n         mount: typeof mount;\n         dataCy(value: string): Chainable\u003cJQuery\u003cHTMLElement\u003e\u003e;\n       }\n     }\n   }\n\n   Cypress.Commands.add('mount', mount);\n\n   Cypress.Commands.add('dataCy', (value) =\u003e {\n     return cy.get(`[data-cy=${value}]`);\n   });\n   ```\n\n8. **Fix Augmentations Errors**:\n   To fix errors related to global scope augmentations, create a `cypress.d.ts` file in the root directory (or preferred location) of your project:\n   ```typescript\n   import { mount } from 'cypress/react';\n\n   declare global {\n     namespace Cypress {\n       interface Chainable {\n         mount: typeof mount;\n         dataCy(value: string): Chainable\u003cJQuery\u003cHTMLElement\u003e\u003e;\n       }\n     }\n   }\n   ```\n\n9. **Update `tsconfig.json`**:\n   Point to the new typing file by updating the includes:\n   ```json\n   \"include\": [\"src\", \"cypress\", \"./cypress.d.ts\"],\n   ```\n\n10. **Update `cypress config file`**:\n    Change the cypress config file from .ts to .js if you are using vite version v5+ in order to run the modules.\n\n\n### My preferred configuration for .eslintrc.cjs\n    ```cjs\n         module.exports = {\n         root: true,\n         env: { browser: true, es2020: true },\n         extends: [\n            'eslint:recommended',\n            'plugin:@typescript-eslint/recommended',\n            'plugin:react-hooks/recommended',\n         ],\n         ignorePatterns: ['dist', '.eslintrc.cjs'],\n         parser: '@typescript-eslint/parser',\n         plugins: ['react-refresh'],\n         rules: {\n            'react-refresh/only-export-components': [\n               'warn',\n               { allowConstantExport: true },\n            ],\n            \"@typescript-eslint/no-namespace\": \"off\",\n            \"unused-imports/no-unused-imports-ts\": \"off\",\n            \"@typescript-eslint/no-unused-vars\": \"off\",\n            \"unused-imports/no-unused-vars\": [\n               0,\n               {\n               \"varsIgnorePattern\": \"^_\",\n               \"args\": \"after-used\",\n               \"argsIgnorePattern\": \"^_\",\n               },\n            ]\n         },\n         }\n   ```\n\n\n\n\n### NodeJS \u0026\u0026 ExpressJS Project Setup Instructions\n\nThis guide will walk you through setting up a Node.js server project with TypeScript, including initializing NPM, installing dependencies, and configuring the project structure.\n\n#### Step 1: Initialize NPM in the Server Folder\n\n1. Open your terminal or command prompt.\n2. Navigate to the folder where you want to create your project:\n   ```sh\n   cd path/to/your/project\n   ```\n3. Create a folder called `server` and navigate into it:\n   ```sh\n   mkdir server\n   cd server\n   ```\n4. Initialize a new NPM project with default settings:\n   ```sh\n   npm init -y\n   ```\n\n#### Step 2: Install Express Dependency\n\n1. Install Express and its types:\n   ```sh\n   npm install --save express\n   npm install --save-dev @types/express\n   ```\n\n#### Step 3: Create the Source Folder and Index File\n\n1. Create a `src` folder inside the `server` folder:\n   ```sh\n   mkdir src\n   ```\n2. Inside the `src` folder, create a file called `index.ts`:\n   ```sh\n   cd src\n   touch index.ts\n   ```\n3. Add a reference to the documentation in `index.ts`:\n   ```typescript\n   // Reference to the docs\n   // Add your TypeScript code here\n   ```\n\n4. Create a `tsconfig.json` file in the `server` folder and add the following configuration:\n   ```json\n   {\n      \"compilerOptions\": {\n         \"target\": \"es6\",\n         \"module\": \"commonjs\",\n         \"strict\": true,\n         \"esModuleInterop\": true,\n         \"skipLibCheck\": true,\n         \"outDir\": \"./dist\",\n         \"rootDir\": \"./src\",\n         \"ignoreDeprecations\": \"5.0\",\n         \"baseUrl\": \"./\",\n         \"typeRoots\": [\n            \"./node_modules/@types\",\n            \"./types\" // Ensure your custom types are recognized\n         ],\n         \"paths\": {\n            \"*\": [\"node_modules/*\", \"src/*\"] // Adjust according to your project structure\n         }\n      },\n      \"ts-node\": {\n         \"files\": true,\n         \"transpileOnly\": true,\n      },\n      \"exclude\": [\"./coverage\", \"./dist\", \"__tests__\", \"jest.config.js\"],\n  }\n   ```\n\n#### Step 4: Install `ts-node`\n\n1. Install `ts-node` and Node.js types as development dependencies:\n   ```sh\n   npm install --save-dev ts-node @types/node\n   ```\n\n#### Step 5: Install Needed Dependencies\n\n1. Install `nodemon` to automatically restart the server on code changes:\n   ```sh\n   npm install --save-dev nodemon\n   ```\n\n2. Install `eslint` to lint your code:\n   ```sh\n   npm install eslint@8.56.0\n   ```\n\n3. Install `dotenv` to manage environment variables:\n   ```sh\n   npm install dotenv\n   ```\n\n4. Install `cors` and its types to handle CORS policies:\n   ```sh\n   npm install cors\n   npm install --save-dev @types/cors\n   ```\n\n5. Install `mongoose` for MongoDB interactions:\n   ```sh\n   npm install mongoose\n   ```\n\n6. Install `envalid` to validate environment variables:\n   ```sh\n   npm install envalid\n   ```\n\n7. Install `bcrypt` and its types to hash passwords:\n   ```sh\n   npm install bcrypt\n   npm install --save-dev @types/bcrypt\n   ```\n\n8. Install `express-session` and its types for session management:\n   ```sh\n   npm install express-session\n   npm install --save-dev @types/express-session\n   ```\n\n9. Install `connect-mongo` to store sessions in MongoDB:\n   ```sh\n   npm install connect-mongo\n   ```\n\n10. Install `jest and its types` to test your rest API:\n   ```sh\n   npm i --save-dev typescript supertest jest ts-jest @types/jest @types/supertest @types/express\n   ```\n\n10. Install `jest config file` for configuration:\n   ```sh\n   npx ts-jest config:init\n   ```\n\n\n\n#### Step 6: Create a `nodemon.json` Configuration File\n\n1. Create a `nodemon.json` file in the `server` folder with the following content:\n   ```json\n   {\n     \"watch\": [\"src\"],\n     \"ext\": \"ts,json\",\n     \"ignore\": [\"src/**/*.spec.ts\"],\n     \"exec\": \"ts-node ./src/index.ts\"\n   }\n   ```\n\n#### Step 7: Add Scripts to `package.json` and `jest.config.js`\n\n1. Open the `package.json` file in the `server` folder.\n2. Add the following scripts to the `scripts` section:\n   ```json\n   \"scripts\": {\n     \"server\": \"nodemon\",\n     \"lint\": \"eslint ./\",\n      \"test\": \"jest --coverage\",\n      \"build\":\"tsc --out dist\"\n   }\n   ```\n3. Add the following `jest.config.js` file:\n   ```js\n      /** @type {import('ts-jest').JestConfigWithTsJest} **/\n      module.exports = {\n         preset: \"ts-jest\",\n         testEnvironment: \"node\",\n         transform: {\n            \"^.+.tsx?$\": [\"ts-jest\",{}],\n         },\n      };\n   ```\n   \n#### Step 8: Create a `.gitignore` Configuration File\n\n1. Lastly don't forget your .gitignore file where you wanna hide some personal stuffs like your api key from github and other user 😃\n```gitignore\n      .vscode/*\n      !.vscode/settings.json\n      !.vscode/tasks.json\n      !.vscode/launch.json\n      !.vscode/extensions.json\n      !.vscode/*.code-snippets\n\n      # Local History for Visual Studio Code\n      .history/\n      node_modules\n\n      .DS_Store\n      .env\n      dist\n      coverage\n\n      # Built Visual Studio Code Extensions\n      *.vsix\n```\n\n\n#### Final Structure\n\nYour project structure should look like this:\n\n```\n/path/to/your/project\n└── server\n    ├── node_modules\n    ├── package.json\n    ├── nodemon.json\n    ├── tsconfig.json\n    ├── src\n    │   └── index.ts\n    └── ...\n```\n\n#### Running the Project\n\n1. To start the server, run:\n   ```sh\n   npm run server\n   ```\n\nYour TypeScript code in `src/index.ts` will now run using `nodemon` and `ts-node`, automatically restarting the server whenever you make changes to the code.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelix221123%2Fscripts-repo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelix221123%2Fscripts-repo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelix221123%2Fscripts-repo/lists"}