dhiwise-nodejs feat: added vite remove react-scripts 4.0

Added vite for building client side react app and removed react-scripts and babel related pacakges.

Jul 18 '22 07:07 yaldram

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 and babel related dependencies, react-app-rewired and config.override files.
run npm install --force from 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/client create a new file vite.config.js and 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 -

<!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/container run -

  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 (
    <div className="min-h-screen flex items-center justify-center">
      <img width="200" height="200" src={logoLoader} alt="loader" />
    </div>
  );
}

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={<Loader />}>
      <Switch>
        <Route path="/" component={TechnologySetStep} exact />

        {/* project & application */}
        <Route path="/technology-step" component={TechnologySetStep} />

        {/* Nodejs */}
        {/* CRUD */}
        <Route path="/node/crud/platform" component={PlatFormConfiguration} />
        <Route path="/node/crud/model" component={Modal} />
        <Route path="/node/crud/permission" component={ModelPermission} />
        <Route path="/node/crud/routes" component={Routes} />

        <Route path="/node/dashboard" component={Dashboard} />
        <Route path="/node/role-access" component={ModelRoleAccess} />
        <Route path="/node/constant" component={NodeConstant} />
        <Route path="/node/middleware" component={Policy} />

        <Route path="/node/environment-variable" component={NodeEnvironment} />
        <Route path="/node/configuration" component={Configuration} />

        <Route path="/build-app" component={BuildProcess} />

        <Route path="*" component={() => <div>Not Found</div>} />
      </Switch>
    </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

Jul 18 '22 08:07 yaldram

@ravisojitra Please run a complete regression Q/A testing on the build if there are any config issues let me know, if there are any styling issues you can easily fix them

Jul 18 '22 08:07 yaldram

@ravisojitra please take care of the linting from your end.

Jul 18 '22 09:07 yaldram

@ravisojitra hey any update on this Pull Request ?

Jul 23 '22 14:07 yaldram

@yaldram we are testing it from our end in local system.

Jul 24 '22 13:07 ravisojitra

Hey @ravisojitra any update on this. Is everything working as expected ? Can I know the progress on this please ?

Jul 29 '22 07:07 yaldram

Hey @ravisojitra any update on this. Is everything working as expected ? Can I know the progress on this please ?

@yaldram Not working as expected

Sep 21 '22 11:09 saloni137

Hey @saloni137 what is not working can you please highlight the issues here. Thanks

Sep 21 '22 12:09 yaldram

fonts are not proper.
build is failing.
dropdown design also looks changed.
eslint check is failing.

Sep 21 '22 12:09 saloni137

@saloni137

yarn build is running fine for me, the project is building on my PC.
Yeah there might be small style related issues. You can fix them easily given that you are familiar with the code.
For eslint as I said in my previous comments you might need to fix the errors. There are no eslint errros in the code, there are some dependencies issues which the team can resolve.

The final call is for the dhiwise team if you think it is feasible like go ahead let me know if you need my help. Thanks

Sep 21 '22 12:09 yaldram

@yaldram The build I am talking about is that When I create and configure a node app and create the build - that is not working

Sep 21 '22 12:09 saloni137

Thanks for the update @saloni137, I might be missing something, but I did try to build a node app it worked, I was able to also open it successfully in VS code. Maybe I am missing something.

Sep 21 '22 12:09 yaldram

Let me check in the backend and get back to you.

Sep 22 '22 03:09 saloni137

Found the backend issue, not from your side. I will update the other issues and merge them into the master branch. Can you update PR to merge with any branch other than the master? So that I will be easily able to work on it. @yaldram

Sep 22 '22 10:09 saloni137

Hey @saloni137 thanks for the update. I would say you can merge the code into master and then maybe I would take a pull of the latest master code with your fixes. I did not get you on the other than master thing. Do you want me to change the base of this pull request? If yes which branch, should I target. Thanks

Sep 22 '22 10:09 yaldram

The Master branch is up-to-date. You can take a pull from it. And then you can submit a PR for https://github.com/DhiWise/dhiwise-nodejs/tree/fix/vite-update if that is ok.

Sep 22 '22 10:09 saloni137

needs more improvements

Sep 22 '22 11:09 saloni137

@saloni137 for the eslint error here are some points -

we see an error @babel/preset-react not found that is because under packages/client/.eslintrc.json we are using this package on line no. 19 and we don't have it in the package.json. Try installing this package, might help.

Sep 22 '22 11:09 yaldram

Issue still Exists , Today I took new clone and still Mouse is not working

Oct 01 '22 00:10 udhayamgit

The final merge was from master into feat, so this PR has still not been merged really into the master?!

Nov 05 '22 21:11 aderchox

Yeah @aderchox I worked on this Pull Request, so that I could contribute to this awesome project, but unfortunately the team at Dhiwise has not given due attention to this Pull Request. I know the team might be busy in doing other important tasks, but it's been 2 months now. cc - @saloni137 @ravisojitra

Nov 06 '22 06:11 yaldram

Hi @yaldram, We have not ignored your PR. We checked it, and we found the following issues.

Design changes
Can't run it as mono-repo in the higher version on nodejs
Eslint issues.

We are not resolving these issues by ourselves because we have planned to move this repo from lerna to turborepo and turbopack instead of vite. Thank you.

Nov 08 '22 07:11 saloni137

Hey @saloni137 great to hear that all the best :)

Nov 08 '22 10:11 yaldram

dhiwise-nodejs dhiwise-nodejs copied to clipboard

feat: added vite remove react-scripts 4.0

dhiwise-nodejs
dhiwise-nodejs copied to clipboard