Replace create-react-app with Vite

[joyhughes]

Project currently uses create react app which has been deprecated. Here is an article about alternatives to the tool: https://www.crocoder.dev/blog/create-react-app-is-dead-what-are-the-alternatives/

[tarunsinghofficial]

I think we can migrate to Vite + React. As CRA is deprecated in your project. What you think?

[joyhughes]

I think we can migrate to Vite + React. As CRA is deprecated in your project. What you think?

@tarunsinghofficial Have you used Vite + React before?

I checked it out and it looks promising.

The key question is if it's able to work with Emscipten. It was somewhat tricky to make Emscripten work with create-react-app (specifically, react-app-rewired), for which I used a guide written by Igor Prokurin https://dev.to/iprosk/cc-code-in-react-using-webassembly-7ka

There are examples out there of using Vite + React with Emscripten. Here is one: https://ppuzio.medium.com/c-in-the-browser-with-webassembly-via-emscripten-vite-and-react-bd82e0598a5e

We could build a simple example as they show in the article, then if it works well, migrate the app.

[joyhughes]

@tarunsinghofficial Let me know if you want to take this issue

[joyhughes]

Decision made to go with Vite

[joyhughes]

Here is another example project https://github.com/daxter-army/react-cpp-wasm-app

What the point person will need to do first is build a very simple "hello world" program using Emscripten and make that work using Vite+React. I linked an article for doing this in a previous comment https://ppuzio.medium.com/c-in-the-browser-with-webassembly-via-emscripten-vite-and-react-bd82e0598a5e but we could alternatively build Mehun's project. He may have used the same method anyway. Then when that is working drop in the Lux C++ code compiled with emscripten.

Then it should look exactly like it does now but using Vite which has advantages, mainly being supported but also speed and size. That will become the main branch. It will also be a way to learn about Emscripten which is a key part of the tech stack. No need to understand the internals of Lux for this step. Just build it and drop it in.

During this process I can also learn about Vite.

[joyhughes]

Branch created for this issue. Now critical priority!

[karanmanglani]

@joyhughes I can work on this issue. Please assign me this issue under GSSOC.

[joyhughes]

@joyhughes I can work on this issue. Please assign me this issue under GSSOC.

@khushhalgarg112 has worked on this issue some - he has got Emscripten to build. He or I might be able to help.

The best strategy I think is to make one of the examples work (using Vite + React with Emscripten), then when it is confirmed that it works use the same method with Lux.

[joyhughes]

@karanmanglani Learn more about project here: https://www.youtube.com/watch?v=vN1ApdESIrc Please ask any questions you may have

[joyhughes]

Please join Lux Vitae discord https://discord.gg/GQQHUbkf

[joyhughes]

I am looking into this issue now

[joyhughes]

I have started a Vite project. As the folder structure is different from create-react-app, I think the best strategy is to move the necessary files and build targets into the Vite project, and then have a new folder lux_vite and perhaps deprecate lux_react, replacing package-lock.json with a dummy file to fix the security warnings in issue #144

[joyhughes]

I have created the branch https://github.com/joyhughes/Jen/tree/Use-Vite

This is currently giving an error that seems to be related to MUI (perhaps a dependency not included)

Uncaught TypeError: undefined is not a function
    <anonymous> Box.js:9

[RamakrushnaBiswal]

@joyhughes assign it to me

[joyhughes]

I worked on this for many hours today and was successful in completing the migration to Vite.

This involved fixing Vite integration issues with both MUI and Emscripten.

PR soon

[RamakrushnaBiswal]

@joyhughes that's good

[joyhughes]

PR #152 closes issue