Migrate to VITE

.env

@@ -1,5 +1,10 @@
-REACT_APP_VERSION = v2.0.0
+VITE_APP_VERSION = v3.0.0
 GENERATE_SOURCEMAP = false
 
 ## Public URL
-PUBLIC_URL = https://codedthemes.com/demos/admin-templates/datta-able/react/free/
+PUBLIC_URL = https://codedthemes.com/demos/admin-templates/datta-able/react/free/
+VITE_APP_BASE_NAME= demos/admin-templates/datta-able/react/free
+
+## Google Map Key
+VITE_APP_GOOGLE_MAPS_API_KEY=
+

.github/workflows/prod.yml

@@ -20,12 +20,12 @@ jobs:
 
     steps:
       - name: 🚚 Get latest code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20.x'
 
       - name: 🔨 Build Project
         run: |
@@ -37,9 +37,9 @@ jobs:
         env:
           SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
           # ARGS: "-rltgoDzvO --delete"
-          SOURCE: 'build/'
+          SOURCE: 'dist/'
           REMOTE_HOST: 217.21.92.35
           REMOTE_USER: u778408432
           REMOTE_PORT: '65002'
           TARGET: domains/codedthemes.com/public_html/demos/admin-templates/datta-able/react/free
-          EXCLUDE: '/template/dist/, /template/node_modules/'
+          EXCLUDE: '/build/'

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

README.md

@@ -18,17 +18,17 @@ It is modern concept dashboard design with eye catchy colors. Wish you happy to
 
 The [Pro version](https://codedthemes.com/demos/admin-templates/datta-able/react/default) of Datta able react template includes features such as TypeScript, apps, authentication methods (i.e. JWT, Auth0, Firebase), advance components, form plugins, layouts, widgets, and more.
 
-| [Datta Able Free](https://codedthemes.com/demos/admin-templates/datta-able/react/free) | [Datta able Pro](https://codedthemes.com/demos/admin-templates/datta-able/react/default)                                         |
-| ---------------------------------------------- | :------------------------------------------------------------------------------- |
-| **7+** Demo pages                               | **85+** Demo pages                                                               |
-| -                                              | ✓ Multi-Layout                                                                 |
-| -                                              | ✓ Dark/Light Mode 🌓                                                             |
-| -                                              | ✓ TypeScript version                                                             |
-| -                                              | ✓ Multiple color options                                                         |
-| -                                              | ✓ RTL                                                                            |
-| -                                              | ✓ JWT, Firebase, Auth0, AWS authentication                                       |
-| -                                              | ✓ [More components](https://codedthemes.com/demos/admin-templates/datta-able/react/default/basic/alert) |
-| ✓ MIT License                                  | ✓ [Pro License](https://codedthemes.com/item/datta-able-react-admin-template/)                                  |
+| [Datta Able Free](https://codedthemes.com/demos/admin-templates/datta-able/react/free) | [Datta able Pro](https://codedthemes.com/demos/admin-templates/datta-able/react/default)                |
+| -------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
+| **7+** Demo pages                                                                      | **85+** Demo pages                                                                                      |
+| -                                                                                      | ✓ Multi-Layout                                                                                          |
+| -                                                                                      | ✓ Dark/Light Mode 🌓                                                                                    |
+| -                                                                                      | ✓ TypeScript version                                                                                    |
+| -                                                                                      | ✓ Multiple color options                                                                                |
+| -                                                                                      | ✓ RTL                                                                                                   |
+| -                                                                                      | ✓ JWT, Firebase, Auth0, AWS authentication                                                              |
+| -                                                                                      | ✓ [More components](https://codedthemes.com/demos/admin-templates/datta-able/react/default/basic/alert) |
+| ✓ MIT License                                                                          | ✓ [Pro License](https://codedthemes.com/item/datta-able-react-admin-template/)                          |
 
 ## Why Datta Able?
 
@@ -117,7 +117,7 @@ yarn start
 - Redux & React context API for state management.
 - Redux toolkit.
 - React Router for navigation routing.
-- Support for react-script.
+- Support for vite.
 - Code splitting.
 - CSS-in-JS.
 

index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Title -->
+    <title>Welcome | Datta Able Free React Hooks + Admin Template</title>
+
+    <!-- Meta -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0, minimal-ui" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="description"
+      content="Datta able react with webpack admin template made using bootstrap 5 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs."
+    />
+    <meta
+      name="keywords"
+      content="Admin templates, Bootstrap Admin templates, React, Webpack, bootstrap 5, Dashboard, Dashboard Templates, sass admin templates, html admin templates, Responsive, Bootstrap Admin templates free download, React Admin templates free download,premium Bootstrap Admin templates,premium React Admin templates download"
+    />
+    <meta name="author" content="Codedthemes" />
+    <meta name="theme-color" content="#000000" />
+    <!-- Favicon & Manifest -->
+    <link rel="icon" href="/favicon.ico" />
+
+    <!-- Google Fonts Style -->
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "baseUrl": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

jsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.mjs"]
+}

package.json

@@ -1,48 +1,41 @@
 {
-  "name": "datta-able-free-react-admin-template",
-  "version": "2.0.0",
-  "private": false,
-  "homepage": "https://codedthemes.com/demos/admin-templates/datta-able/react/free/",
-  "license": "MIT",
+  "name": "datta-able-react-hook-reactstrap-js",
+  "version": "3.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
+    "preview": "vite preview",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
+  },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.5",
-    "@tanem/react-nprogress": "^5.0.42",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "axios": "^1.4.0",
-    "axios-mock-adapter": "^1.21.4",
-    "bootstrap": "^5.3.0",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "@react-google-maps/api": "^2.19.3",
+    "@tanem/react-nprogress": "^5.0.51",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "bootstrap": "^5.3.3",
     "chance": "^1.1.11",
-    "formik": "^2.4.1",
-    "jquery": "^3.7.0",
-    "jsonwebtoken": "^9.0.0",
+    "d3": "^7.9.0",
+    "formik": "^2.4.5",
+    "jquery": "^3.7.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
-    "react-app-polyfill": "^3.0.0",
-    "react-bootstrap": "^2.7.4",
+    "react-bootstrap": "^2.10.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
-    "react-google-maps": "^9.4.5",
-    "react-icons": "^4.9.0",
-    "react-nvd3": "^0.5.7",
+    "react-google-charts": "^4.0.1",
+    "react-icons": "^5.0.1",
     "react-perfect-scrollbar": "^1.5.8",
-    "react-redux": "^8.1.0",
-    "react-router-dom": "^6.12.1",
-    "react-scripts": "5.0.1",
-    "redux": "^4.2.1",
-    "redux-form": "^8.3.10",
-    "rodal": "^2.0.1",
-    "sass": "^1.63.3",
-    "styled-components": "^5.3.11",
-    "web-vitals": "^3.3.2",
-    "yup": "^1.2.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "react-router-dom": "^6.22.3",
+    "vite": "^5.2.0",
+    "vite-jsconfig-paths": "^2.0.1",
+    "web-vitals": "^3.5.2",
+    "yup": "^1.4.0"
   },
   "overrides": {
     "autoprefixer": "10.4.5"
@@ -60,22 +53,24 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/eslint-parser": "^7.21.3",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.24.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-react": "^7.24.1",
     "env-cmd": "^10.1.0",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "immutable": "^4.3.0",
-    "prettier": "2.8.8",
-    "react-error-overlay": "6.0.11"
-  }
+    "immutable": "^4.3.5",
+    "prettier": "3.2.5",
+    "react-error-overlay": "6.0.11",
+    "sass": "^1.75.0"
+  },
+  "packageManager": "[email protected]"
 }

src/App.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import routes, { renderRoutes } from './routes';
+
+const App = () => {
+  return <BrowserRouter basename={import.meta.env.VITE_APP_BASE_NAME}>{renderRoutes(routes)}</BrowserRouter>;
+};
+
+export default App;