Move to vite from react-app-rewired for example project development build

[KonstantinEpam23]

Background
We are currently using rollup.js for building the project, this library seems to be outdated and we have problems with builds taking too much time.

Solution
We would like to switch to a different build library, vite.js seems like a good solution: https://vitejs.dev

• it uses the same cli and plugin apis that are used by rollup.js, so the switch should not be too hard in terms of code changes
• it promises big gains in build time

Alternatives

• switching to other build engines

Additional context
As part of this ticket, we would like to try and switch the build process from using rollup to using vite, this will involve updating all package.json files across ./packages and ./example and testing the local build timing on various systems

[yuleicul]

Hi 👋 I have a question here. I just did some research, and I found Vite does provide a faster development experience because it supports unbundled ESM in development. As for production, it uses Rollup to bundle the code under the hood.

The Ketcher codebase is a monorepo If I understand correctly, so we have to build packages every time we develop. Every time we develop in localhost, we should run yarn start (npm start after #2008) in /packages/ketcher-core, /packages/ketcher-react and so on. In /packages/ketcher-core/package.json we can see yarn start equals to rollup --watch which means we just watch the new change and bundle with Rollup again.

If I replace Rollup with Vite, I'd probably want to make npm start equal to something like vite build --watch which runs rollup under the hood, so we are not gonna have the faster development experience because we don't use vite dev.

Maybe I'm wrong, but If there are some ways we can use vite dev when developing in a monorepo, then I believe the development experience will level up. Or maybe vite build can reduce the build time as expected.

[yuleicul]

(This is an investigation diary, not a final proposal)

My plan to switch to Vite is:

For /packages

1. Rewrite rollup.config.js to vite.config.js
2. Update scripts: 
   "build": "cross-env NODE_ENV=production rollup -c -m true"--> "build": "cross-env NODE_ENV=production vite build"
   "start": "cross-env NODE_ENV=development rollup -c -m true -w" --> "start": "cross-env NODE_ENV=development vite build -w"

For /example:

1. Replace react-app-rewired with Vite
2. Add new vite.config.js

What I'm doing today is try to rewrite rollup.config.js to vite.config.js in ketcher-core. It's a bit tough because some rollup plugins are not compatible in vite. My next step is to figure out what every plugin does and try to find a vite plugin to replace it. And also I hit some pitfalls.... for example, we use paths in tsconfig to map some paths, but vite doesn't recognize them.

My estimate for the whole switch is 5 days. Next week we have a public holiday on Wed, and I want to take two more regular vacations on Mon and Tue. So I'll try to finish by the end of this Friday.

[yuleicul]

(This is an investigation diary, not a final proposal)

Have successfully moved to Vite in ketcher-core, but the build speed is almost the same as before.

Today I was working on rewriting rollup.config.js to vite.config.js in ketcher-react, but I hit some pitfalls. Just trying to resolve them. (Vite has a lot of built-in plugins)

What enlightened me is

This is just a PoC, may be you don't need to support all the plugins we have or some other stuff to do.
We just need to understand:
– Is it possible to migrate to other tool?
– If yes, what benefits we will receive?
– If no, then why? And what needs to be done to become "yes"
-- @Nitvex

So I think I need to change my mind. My plan for tomorrow:

• Try to use linked dependencies to speed up development experience