Migrate from `react-scripts` to Vite ⚡️

[JamieSlome]

Currently, the project uses react-scripts to bundle and build the React application.

Vite ⚡ is a better alternative offering faster dev. time, performance, and more efficient build processes.

There are plenty of walkthroughs on the web, for example.

[vaibssingh]

Hey @JamieSlome , can I take this up?

[JamieSlome]

@vaibssingh absolutely! 🙌

[JamieSlome]

@vaibssingh, I have re-opened as there are a few issues.

I am able to run npm run start, however when I try to run npm run build I get the following error:

Also, when I run npm run start, I am not able to access the UI at the provided port or at localhost:3000 - any ideas?

[vaibssingh]

@JamieSlome Let me check this.

[vaibssingh]

Hey @JamieSlome, quick update before I sign off for today:
I am not able to find the root cause of the issue why the client server is not working. Following this blog, I have renamed all the files using JSX to ".jsx" extension because Vite expects the correct extension for such files. After providing the port number in the script, the service does launch at 3000 but there is no response on the page so getting page not found on opening the browser for now.

As I understand, the index.js at the root starts the proxy and service servers (started by npm run server) and the src/index.js file should start the UI server. The same path (renamed to indes.jsx) has been passed in the index.html at root. I am looking up vite.config.js options to figure out if something is wrong there.

I can't test it by building it either because there I get errors because of react-router-dom which is its own issue altogether.

I will try again tomorrow to get this fixed. Let me know if you have any ideas about how we can fix it. :)

[JamieSlome]

@vaibssingh - seems like renaming all of the files with .jsx is the right way to go 👍

Not sure why the UI isn't launching, but I am going to merge two changes into main shortly that should reconcile how we launch the web UI, proxy and service.

With regards to react-router-dom, I am addressing this in #185.