Making React App from Vite Compatible to CRA

Recently I tried to migrate my project's codebase from CRA (create-react-app) to ViteJS. It was not as simple as it seemed actually. Because I wanted to remove react-scripts completely and use just Vite instead.

---

These are the basic features that I wanted the project setup with Vite to have (that was present in CRA):

• Typescript Support
• Jest Test Runner with React Testing Library
• Import SVG as components (actually decided against it later)
• Using Absolute imports
• ESLint & Prettier Support

Additionally I went on to add following features also:

• TailwindCSS (with JIT mode)
• Husky + Lint-Staged (to run eslint & prettier on pre-commit)
• CommitLint (to enforce conventional-commits)
• Additional ESLint Plugins
• Source Map Explorer
• React-Error-Boundary

And Tweaked few configurations to support:

• Multiple env files
• Enable source-map on build
• Use of .editorconfig file

---

You can refer the template repository to see the configurations.

Repository Link:
https://github.com/uchihamalolan/vite-react-ts

This is the package.json for quick view:

{
  "name": "vite-react-ts",
  "version": "0.0.0",
  "description": "React Typescript Starter Template with Vite",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/uchihamalolan/vite-react-ts.git"
  },
  "keywords": [
    "vite",
    "react",
    "starter",
    "template"
  ],
  "author": "Malolan B. <[e-mail]> (https://twitter.com/malolan12)",
  "license": "MIT",
  "homepage": "https://github.com/uchihamalolan/vite-react-ts",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "jest",
    "serve": "vite preview",
    "prepare": "husky install",
    "commit": "commit",
    "format": "prettier --write --ignore-unknown .",
    "lint": "eslint --cache ./src",
    "analyze": "source-map-explorer 'dist/assets/*.js'"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-error-boundary": "^3.1.3"
  },
  "devDependencies": {
    "@commitlint/cli": "^13.2.1",
    "@commitlint/config-conventional": "^13.2.0",
    "@commitlint/prompt-cli": "^13.2.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.4.1",
    "@types/jest": "^27.0.2",
    "@types/node": "^16.11.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "@vitejs/plugin-react": "^1.0.4",
    "autoprefixer": "^10.3.7",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jest": "^25.2.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^4.12.4",
    "husky": "^7.0.2",
    "jest": "^27.2.5",
    "lint-staged": "^11.2.3",
    "postcss": "^8.3.9",
    "prettier": "2.4.1",
    "react-test-renderer": "^17.0.2",
    "source-map-explorer": "^2.5.2",
    "tailwindcss": "^2.2.17",
    "ts-jest": "^27.0.7",
    "typescript": "^4.3.2",
    "vite": "^2.6.7",
    "vite-tsconfig-paths": "^3.3.17"
  }
}