yaldram
commented
2 years ago A Break down of all the steps I followed -
-
Use node versions > 16, because vite 3 works with version which are greater than node 16. In the main package.json paste the following -
"engines": { "node": "^16.14.0", "npm": "^8.5.5" } -
Remove all the
react-scripts andbabel related dependencies, react-app-rewired and config.override files. -
run
npm install --forcefrom the source of the project. -
Navigate to the client project cd packages/client run -
npm install -D vite @vitejs/plugin-react vite-plugin-require -
Under
packages/clientcreate a new filevite.config.jsand paste the following -// eslint-disable-next-line import/no-extraneous-dependencies import { defineConfig } from 'vite'; // eslint-disable-next-line import/no-extraneous-dependencies import react from '@vitejs/plugin-react'; // eslint-disable-next-line import/no-extraneous-dependencies import vitePluginRequire from 'vite-plugin-require';
// https://vitejs.dev/config/ export default defineConfig({ build: { outDir: 'build', }, server: { open: true, }, plugins: [react(), vitePluginRequire()], });
- Similarly under `packages/client` create `index.html` and paste the following -
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="manifest" href="/manifest.json" />
<title>DhiWise</title>
</head>
<body>
<div id="root" class="dhiwise_body"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>-
Now we need to replace the
.js- extension with.jsx- extension for all our react files we do it using a bash script. -
Under
src/components,- src/config,src/containerrun -for i in $(find `pwd` -name "*.js"); do mv "$i" "${i%.js}.jsx"; done -
Change index.js to index.jsx, change App.js to App.jsx under
src/constants, change sidebar.js to sidebar.jsx -
Under package.json scripts section replace -
"scripts": { "start": "npm run watch:css && vite", "build": "npm run watch:css && vite build", "fix:lint": "npx eslint --fix src", "watch:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css" }, -
Under .env file delete all variables and paste - VITE_APP_PROJECT_SERVICE_URL='http\://localhost:3053'
-
Under src/api/constants.js paste the following - const projectServiceUrl = import.meta.env.VITE_APP_PROJECT_SERVICE_URL;
-
Under src/config/LazyLoader.jsx comment all the code, we won't be using react-loadable this package is not been updated for the last 4 years, it does not work with vite. Instead we will use React.lazy and React.Suspense for lazy loading our routes.
-
Under src/config/Root.jsx paste the following -
import React, { lazy, Suspense } from 'react'; import { Route, Switch } from 'react-router-dom'; import logoLoader from '../assets/images/gif/logo-loader.gif';
function Loader() { return (
); }
const BuildProcess = lazy(() => import('../container/common')); const TechnologySetStep = lazy(() => import('../container/Shared/TechnologySetStep'));
const PlatFormConfiguration = lazy(() => import('../container/CRUD/Configuration')); const Modal = lazy(() => import('../container/CRUD/Modal')); const ModelRoleAccess = lazy(() => import('../container/RoleAccess')); const Dashboard = lazy(() => import('../container/Dashboard')); const ModelPermission = lazy(() => import('../container/CRUD/Permission')); const NodeConstant = lazy(() => import('../container/Constant')); const Policy = lazy(() => import('../container/Policy')); const Routes = lazy(() => import('../container/CRUD/Routes')); const NodeEnvironment = lazy(() => import('../container/EnvironmentVariable')); const Configuration = lazy(() => import('../container/Configuration'));
const App = () => { document.getElementsByTagName('html')[0].classList.add('theme-black');
return (
<Suspense fallback={
</Suspense>); }; export default App;
- Now from the project root run - npm run start the browser will open.
- Now navigate to the client folder - cd packages/client and run npm run build and serve the build like so - npx server ./build
ravisojitra
saloni137
udhayamgit
aderchox
vitefor building client side react app and removedreact-scripts and babel related pacakges.