refactor: migrate from CRA to Vite

coreui · Mar 11, 2024 · 1d05bd4 · 1d05bd4
1 parent 6c7dc12
commit 1d05bd4
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 137 deletions.
diff --git a/.env b/.env
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,8 +13,6 @@ module.exports = {
     },
   },
   extends: [
-    'react-app',
-    'react-app/jest',
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],

diff --git a/.prettierignore b/.prettierignore
@@ -1 +1 @@
-dist/
+build/
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   semi: false,
-  trailingComma: "all",
+  trailingComma: 'all',
   singleQuote: true,
   printWidth: 100,
-  tabWidth: 2
-};
+  tabWidth: 2,
+}
diff --git a/README.md b/README.md
@@ -116,7 +116,8 @@ Within the download you'll find the following directories and files, logically g
 ```
 coreui-free-react-admin-template
 ├── public/          # static files
-│   └── index.html   # html template
+│   ├── favicon.ico
+│   └── manifest.json
 │
 ├── src/             # project root
 │   ├── assets/      # images, icons, etc.
@@ -126,12 +127,15 @@ coreui-free-react-admin-template
 │   ├── views/       # application views
 │   ├── _nav.js      # sidebar navigation config
 │   ├── App.js
-│   ├── ...
 │   ├── index.js
 │   ├── routes.js    # routes config
 │   └── store.js     # template state example 
 │
-└── package.json
+├── index.html       # html template
+├── ...
+├── package.json
+├── ...
+└── vite.config.mjs  # vite config
 ```
 
 ## Documentation

diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+* CoreUI Free React.js Admin Template
+* @version v5.0.0-rc.0
+* @link https://coreui.io/product/free-react-admin-template/
+* Copyright (c) 2024 creativeLabs Łukasz Holeczek
+* Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
+    <meta name="author" content="Łukasz Holeczek">
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>CoreUI Free React.js Admin Template</title>
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/jsconfig.json b/jsconfig.json
diff --git a/package.json b/package.json
@@ -13,13 +13,10 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
+    "build": "vite build",
     "lint": "eslint \"src/**/*.js\"",
-    "start": "react-scripts start",
-    "test": "react-scripts test",
-    "test:cov": "npm test -- --coverage --watchAll=false",
-    "test:debug": "react-scripts --inspect-brk test --runInBand"
+    "serve": "vite preview",
+    "start": "vite"
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
@@ -35,27 +32,23 @@
     "core-js": "^3.36.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
     "redux": "5.0.1",
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.35",
     "prettier": "3.2.5",
-    "react-scripts": "5.0.1",
     "sass": "^1.71.1",
-    "web-vitals": "^3.5.2"
-  },
-  "engines": {
-    "node": ">=10",
-    "npm": ">=6"
+    "vite": "^5.1.6"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/index.js b/src/index.js
@@ -1,19 +1,13 @@
-import 'react-app-polyfill/stable'
-import 'core-js'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App'
-import reportWebVitals from './reportWebVitals'
 import { Provider } from 'react-redux'
+import 'core-js'
+
+import App from './App'
 import store from './store'
 
 createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,
 )
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -0,0 +1,57 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig(({ mode }) => {
+  // Load .env
+  const env = loadEnv(mode, process.cwd(), '')
+  process.env = { ...process.env, ...env }
+
+  return {
+    base: './',
+    build: {
+      outDir: 'build',
+    },
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer({}), // add options if needed
+        ],
+      },
+    },
+    define: {
+      // vitejs does not support process.env so we have to redefine it
+      'process.env': process.env,
+    },
+    esbuild: {
+      loader: 'jsx',
+      include: /src\/.*\.jsx?$/,
+      exclude: [],
+    },
+    optimizeDeps: {
+      force: true,
+      esbuildOptions: {
+        loader: {
+          '.js': 'jsx',
+        },
+      },
+    },
+    plugins: [react()],
+    resolve: {
+      alias: [
+        {
+          find: 'src/',
+          replacement: `${path.resolve(__dirname, 'src')}/`,
+        },
+      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+  }
+})