DEV Community

Malolan B
Malolan B

Posted on


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:

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+"
  "keywords": [
  "author": "Malolan B. <> (",
  "license": "MIT",
  "homepage": "",
  "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"

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!