An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- Mashable
- Techcrunch
- Just Creative
- Pearsonified
- Smashing Magazine
- Inspiredology
- FanExtra - PSD
- Line 25
- Freelance Switch
- Willems Lab
Help Webnuz
Referal links:
October 16, 2021 11:22 pm GMT
Original Link: https://dev.to/uchihamalolan/making-react-app-from-vite-compatible-to-cra-48pc
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
.editorconfigfile
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. <[email protected]> (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" }}Original Link: https://dev.to/uchihamalolan/making-react-app-from-vite-compatible-to-cra-48pc
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To