├── .commitlintrc.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .lintstagedrc.json ├── .prettierignore ├── .prettierrc.json ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── SECURITY.md ├── env ├── .env.production ├── .env.staging └── .env.testing ├── index.html ├── jest.config.js ├── license ├── package.json ├── postcss.config.js ├── public └── icons │ └── favicon.svg ├── src ├── App.tsx ├── assets │ └── favicon.svg ├── components │ ├── Button.tsx │ └── Header.tsx ├── hooks │ ├── __tests__ │ │ └── use-counter.test.ts │ └── use-counter.ts ├── index.css ├── main.tsx ├── styles │ └── reset.css ├── utils │ ├── __tests__ │ │ └── sum.test.ts │ └── sum.ts └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .eslintcache 5 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:import/recommended", 5 | "plugin:jsx-a11y/recommended", 6 | "plugin:react/recommended", 7 | "plugin:react/jsx-runtime", 8 | "plugin:react-hooks/recommended", 9 | "prettier" 10 | ], 11 | "overrides": [ 12 | { 13 | // enable eslint-plugin-testing-library rules or preset only for matching files! 14 | "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"], 15 | "extends": ["plugin:jest/recommended", "plugin:jest-dom/recommended", "plugin:testing-library/react"] 16 | }, 17 | { 18 | "files": ["**/*.ts?(x)"], 19 | "parser": "@typescript-eslint/parser", 20 | "extends": ["plugin:@typescript-eslint/recommended", "plugin:import/typescript"] 21 | } 22 | ], 23 | "rules": { 24 | // for testing if eslint works properly, 25 | // feel free to remove this if you do not need it 26 | "import/no-unused-modules": [1, { "unusedExports": true }] 27 | }, 28 | "settings": { 29 | "import/parsers": { 30 | "@typescript-eslint/parser": [".ts", ".tsx"] 31 | }, 32 | "import/resolver": { 33 | "typescript": {} 34 | }, 35 | "react": { 36 | "version": "detect" 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: 'CodeQL' 13 | 14 | on: 15 | push: 16 | branches: [main] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [main] 20 | schedule: 21 | - cron: '19 13 * * 0' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: ['javascript'] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v2 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v1 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v1 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v1 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | coverage 7 | .eslintcache 8 | pnpm-lock.yaml 9 | *.log 10 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm exec commitlint --edit 5 | pnpm exec commitlint --edit $1 6 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm test 5 | pnpm exec lint-staged 6 | -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.{tsx,ts}": ["eslint --cache --max-warnings=0 ./src", "prettier --write --ignore-unknown ."] 3 | } 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .eslintcache 5 | pnpm-lock.yaml 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "quoteProps": "as-needed", 8 | "jsxSingleQuote": false, 9 | "trailingComma": "es5", 10 | "bracketSpacing": true, 11 | "bracketSameLine": false, 12 | "arrowParens": "always", 13 | "requirePragma": false, 14 | "insertPragma": false, 15 | "proseWrap": "preserve", 16 | "htmlWhitespaceSensitivity": "css", 17 | "endOfLine": "lf", 18 | "embeddedLanguageFormatting": "auto" 19 | } 20 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "esbenp.prettier-vscode", 5 | "csstools.postcss", 6 | "bradlc.vscode-tailwindcss", 7 | "orta.vscode-jest", 8 | "editorconfig.editorconfig" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "editor.formatOnSaveMode": "modificationsIfAvailable", 4 | "editor.formatOnSave": true, 5 | "prettier.documentSelectors": ["*.{tsx,ts}", "*.{jsx,js}"], 6 | "editor.defaultFormatter": "esbenp.prettier-vscode" 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Drop-in Replacement for [CRA](http://create-react-app.dev/) but powered by [Vite](https://vitejs.dev/) 2 | 3 | ### Things in CRA, supported here: 4 | - Import SVG's directly as React Component via SVGR 5 | - Unit Testing via Jest & React Testing Library 6 | - ESLint Rules & Prettier 7 | - Tailwind 8 | - Absolute imports within `src` directory 9 | 10 | --- 11 | 12 | ### Extra Additions 13 | - Conventional Commits using `Commitlint` 14 | - Run Lint Checks, TS Checks, Formatting & Unit Tests in Pre-commit via `lintstaged` & `husky` 15 | 16 | --- 17 | 18 | ### Usage (with [degit](https://github.com/Rich-Harris/degit)) 19 | ```bash 20 | degit uchihamalolan/vite-react-ts your-app-name 21 | ``` 22 | 23 | --- 24 | 25 | ### Tech Stack - Overview 26 | - Vite 27 | - React - Typscript 28 | - react-error-boundary 29 | - pnpm 30 | 31 | --- 32 | 33 | ### Editor Config 34 | 35 | - vscode settings & extension recommendations 36 | - `.editorconfig` file 37 | 38 | --- 39 | 40 | ### Lint and Formatting 41 | - Eslint & Prettier Configured 42 | - Lints 43 | - react 44 | - react hooks 45 | - typescript 46 | - jsx-a11y 47 | 48 | --- 49 | 50 | ### Testing 51 | - Jest + React Testing Library (plus some plugins) 52 | 53 | --- 54 | 55 | ### Styling 56 | - TailwindCSS v3 57 | 58 | --- 59 | 60 | # Other Recommended Libraries: 61 | 62 | ### Forms 63 | - React Hook Form 64 | - Zod (for validations) 65 | 66 | ### CSS-in-js 67 | - Emotion 68 | - Complie Time Atomic CSS-in-Js 69 | - Stylex (Facebook, not Open Source yet) 70 | - Linaria 71 | - Compiled (still in beta) 72 | 73 | ### Routing 74 | - React-Router-Dom 75 | - React Location 76 | 77 | ### Date Manipulation 78 | - Dayjs 79 | - date-fns 80 | - Luxon 81 | 82 | ### HTTP Client 83 | - Ky 84 | - Axios 85 | 86 | ### Global Store (full-blown / lite-version) 87 | - Redux Toolkit / Zustand 88 | - Recoil / Jotai 89 | - Mobx / Valtio 90 | - xstate / robot 91 | 92 | ### Server State 93 | - React Query 94 | - SWR 95 | - RTKQuery 96 | 97 | 100 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | All versions are supported, since I did not do versioning anyways as this is just a template repository 6 | 7 | | Version | Supported | 8 | | ------- | ------------------ | 9 | | x.x.x | :white_check_mark: | 10 | 11 | ## Reporting a Vulnerability 12 | 13 | This is just a Template Repository, So no possible vulnerabilities there to report. 14 | If any such is found pertaining to Project Configurations, an issue can be created. 15 | -------------------------------------------------------------------------------- /env/.env.production: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uchihamalolan/vite-react-ts/0798b1e47197da653c0ee3d542f5a2b8fd2898e6/env/.env.production -------------------------------------------------------------------------------- /env/.env.staging: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uchihamalolan/vite-react-ts/0798b1e47197da653c0ee3d542f5a2b8fd2898e6/env/.env.staging -------------------------------------------------------------------------------- /env/.env.testing: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uchihamalolan/vite-react-ts/0798b1e47197da653c0ee3d542f5a2b8fd2898e6/env/.env.testing -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |