build: migrate from CRA to Vite and switch env/config pipeline

Flatlogic Bot · Flatlogic Bot · commit 4c80db41471d · 2026-02-21T18:28:42.000+03:00
diff --git a/.env b/.env
@@ -1,2 +1 @@
-NODE_PATH=src/
-GENERATE_SOURCEMAP=false
+VITE_BACKEND=false
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web
 5. **Enable backend mode (optional)**
    - Create `.env.local`:
      ```bash
-     REACT_APP_BACKEND=true
+     VITE_BACKEND=true
      ```
    - Start backend API on `http://localhost:8080`
    - Run:
@@ -66,7 +66,7 @@ Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web
 - MUI `7.x` + Emotion
 - React Router `5.x` (Browser History, no hash routing)
 - Redux + Context (transitional architecture before consolidation)
-- CRA (`react-scripts`) + `react-app-rewired` (Vite migration is planned)
+- Vite 5 + `@vitejs/plugin-react`
 - Frontend-only users/auth fallback is available when backend is disabled
 
 ---
@@ -82,7 +82,7 @@ Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web
 - Charts Libraries
 - Dashboard Pages
 - CSS-in-JS Styling
-- CRA + react-app-rewired setup
+- Vite-based build setup
 
 ---
 
@@ -92,7 +92,7 @@ Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web
 - MUI 7
 - React Hooks & Context API
 - React Router v5
-- Webpack
+- Vite
 - Node.js (for backend)
 
 ---
diff --git a/config-overrides.js b/config-overrides.js
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="React Material Admin Full" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png" />
+    <link rel="icon" href="/favicon.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="/favicon.png" sizes="48x48" type="image/png" />
+    <link rel="icon" href="/favicon.png" sizes="62x62" type="image/png" />
+    <link rel="icon" href="/favicon.png" sizes="80x80" type="image/png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>React Material Admin Full</title>
+  </head>
+  <body style="font-family: 'Roboto', sans-serif">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "exclude": ["node_modules", "build"]
+}
diff --git a/package.json b/package.json
@@ -5,10 +5,11 @@
   "private": true,
   "homepage": "./",
   "scripts": {
-    "build": "cross-env REACT_APP_BACKEND=true NODE_ENV=production PUBLIC_URL='./' react-app-rewired --openssl-legacy-provider build",
-    "start": "cross-env react-app-rewired --openssl-legacy-provider start",
-    "dev": "cross-env react-app-rewired --openssl-legacy-provider start",
-    "test": "react-app-rewired --openssl-legacy-provider test",
+    "build": "vite build",
+    "start": "vite",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "echo \"Tests are not configured yet\" && exit 0",
     "format": "prettier --write src/"
   },
   "dependencies": {
@@ -48,11 +49,9 @@
     "query-string": "7.1.3",
     "react": "^19.2.4",
     "react-apexcharts": "^2.0.1",
-    "react-app-rewired": "^2.2.1",
     "react-dom": "^19.2.4",
     "react-redux": "^9.2.0",
     "react-router-dom": "^5.3.4",
-    "react-scripts": "^5.0.1",
     "react-sortablejs": "^1.5.1",
     "react-syntax-highlighter": "^11.0.3",
     "recharts": "^3.7.0",
@@ -92,8 +91,9 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/sortablejs": "^1.15.7",
-    "cross-env": "^7.0.3",
+    "@vitejs/plugin-react": "^4.3.3",
     "eslint-config-react-app": "^7.0.1",
-    "sass": "^1.81.0"
+    "sass": "^1.81.0",
+    "vite": "^5.4.10"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/components/Documentation/pages/start/Start.js b/src/components/Documentation/pages/start/Start.js
@@ -45,7 +45,7 @@ const Start = () => {
               </ListItem>
               <ListItem>
                 <ListItemText
-                  children={<span>3. Enable backend mode by setting <Code inline>REACT_APP_BACKEND=true</Code> in <Code inline>.env.local</Code>, then run <Code inline>npm run dev</Code></span>}
+                  children={<span>3. Enable backend mode by setting <Code inline>VITE_BACKEND=true</Code> in <Code inline>.env.local</Code>, then run <Code inline>npm run dev</Code></span>}
                 />
               </ListItem>
               <ListItem>
@@ -65,7 +65,7 @@ const Start = () => {
               </ListItem>
               <ListItem>
                 <ListItemText
-                  children={<span><Code inline>npm test</Code>: run tests in watch mode</span>}
+                  children={<span><Code inline>npm run preview</Code>: preview production build locally</span>}
                 />
               </ListItem>
               <ListItem>
diff --git a/src/components/FormItems/error/errors.js b/src/components/FormItems/error/errors.js
@@ -27,7 +27,7 @@ function selectErrorCode(error) {
 
 export default class Errors {
   static handle(error) {
-    if (process.env.NODE_ENV !== 'test') {
+    if (import.meta.env.MODE !== 'test') {
       console.error(selectErrorMessage(error));
       console.error(error);
     }
diff --git a/src/config.js b/src/config.js
@@ -1,10 +1,15 @@
-const hostApi = process.env.NODE_ENV === "development"
+const isDevelopment = import.meta.env.DEV;
+const hostApi = isDevelopment
   ? "http://localhost"
   : "https://sing-generator-node.herokuapp.com";
-const portApi = process.env.NODE_ENV === "development" ? 8080 : "";
+const portApi = isDevelopment ? 8080 : "";
 const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}/api`;
-const redirectUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://flatlogic.github.io/react-material-admin-full";
-const isBackend = String(process.env.REACT_APP_BACKEND).toLowerCase() === "true";
+const redirectUrl = isDevelopment
+  ? "http://localhost:3000"
+  : typeof window !== "undefined"
+    ? window.location.origin
+    : "https://flatlogic.github.io/react-material-admin-full";
+const isBackend = String(import.meta.env.VITE_BACKEND).toLowerCase() === "true";
 
 const appConfig = {
   hostApi,
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import axios from 'axios';
+import './polyfills';
 import { createStore, applyMiddleware } from 'redux';
 import { thunk as ReduxThunk } from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { ThemeProvider as ThemeProviderV5 } from '@mui/material/styles';
 import { StyledEngineProvider } from '@mui/material/styles';
 import App from './components/App';
-import * as serviceWorker from './serviceWorker';
 import { LayoutProvider } from './context/LayoutContext';
 import { UserProvider } from './context/UserContext';
 import { ManagementProvider } from './context/ManagementContext';
@@ -60,8 +60,3 @@ root.render(
     </LayoutProvider>
   </Provider>,
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/polyfills.js b/src/polyfills.js
@@ -0,0 +1,10 @@
+import process from 'process';
+import { Buffer } from 'buffer';
+
+if (!globalThis.process) {
+  globalThis.process = process;
+}
+
+if (!globalThis.Buffer) {
+  globalThis.Buffer = Buffer;
+}
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
diff --git a/vite.config.js b/vite.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-NODE_PATH=src/`
`2`		`-GENERATE_SOURCEMAP=false`
	`1`	`+VITE_BACKEND=false`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ function selectErrorCode(error) {`
`27`	`27`
`28`	`28`	`export default class Errors {`
`29`	`29`	`static handle(error) {`
`30`		`- if (process.env.NODE_ENV !== 'test') {`
	`30`	`+ if (import.meta.env.MODE !== 'test') {`
`31`	`31`	`console.error(selectErrorMessage(error));`
`32`	`32`	`console.error(error);`
`33`	`33`	`}`