Vite-vite

[eatyourpeas]

Overview

The is a long overdue improvement to the dGC react client, first built in 2018 in react 16, largely to help develop the chart component, and later to provide it's current role as a demonstration of an implementation for others to emulate.

As the dGC charting component now uses react 18.2, it has been overdue to update the client to match it. In react 18.2, create-react-app was nolonger supported and so craco has been deprecated in favour of vite. These two updates are the reason for the bump in the major version.

A further issue is that in react 18 semantic-ui-react nolonger works as a deprecation in findDOMNode is nolonger supported. This project, which our client relies on heavily, is not actively maintained, though there is a version 3.0.0-beta.2 from last year which fixes this issue and is used here. So this production app now relies on a beta release of the styling library we are using, but in time we hope to deprecate semantic-ui altogether, and ultimately pull the charting component in from a cdn.

Code changes

Possibly too many changes to list. The actual src file however is largely untouched. The only changes here are to remove commented out lines relating to deprecated styling.

All other changes are about the implementation of vite and removing all references to craco.

[mbarton]

I am now lost with the branches. Are you happy with sending this straight into live or should i send into development first?

This project only has a live branch so that's fine.

Do you know if the environment variables in vite work the same as craco?

You need to change them to use VITE_ rather than REACT_APP_ and read them from import.meta.env instead of process.env

// Before
process.env.REACT_APP_BASE_URL

// After
import.meta.env.VITE_BASE_URL

https://vitejs.dev/guide/env-and-mode

[mbarton]

Reviewed IRL with @eatyourpeas so merging