Migrate from create-react-app to a different library

[kamerynB]

Problem Description: Creat-react-app is deprecated and we should not be using it going forward.

Expected Behavior/Solution: Migration from create-react-app to Vite should take place.

Requirements:

For forming:

• [x] Testing of 3 libraries
  • Vite - Winner!
  • Next.js
  • Remix

For development:

• [ ] Update documentation to reflect change
• [ ] Migrate test suite from Jest to Vitest
• [ ] Update additional packages/dependencies

Needed for promotion: If an item on the list is not needed, it should be crossed off but not removed.

• [x] ~Wireframe/Mockup - Mike~
• [x] ~Committee discussions - Sarah~
• [x] ~Feasibility/Team discussion - Sarah~
• [x] ~Backend requirements - TBD~
• [x] Frontend requirements - Kam
• [x] ~Are new regression tests required for QA - Amy~
• [x] Questions
  • What build tool should be used? ANSWER: Vite

UAT/LUX Examples: N/A

Dependencies/Blocks: N/A

Related Github Issues:

• 2

Related links:

• Steps for migration

Wireframe/Mockup: N/A

[kamerynB]

Notes on Vite:

• Direct comparison of Vite vs Next.js
• Migration steps

Notes on Next.js:

• Interesting Reddit post about Next.js
• Fullstack framework but also supports SPAs
• Next.js docs suggest that when using this framework, SPAs are eventually be moved to server side rendering
• Migration steps

Notes on Remix:

• Remix vs Next
• Migration steps

[roamye]

From yesterday's dev meeting

• it was announced that VITE was the preferred library to migrate to.

@kamerynB - since there is no uat, will LUX be expected to work as normal?

[kamerynB]

Update 11/14: The test suite still has failing tests which are most likely due to mocking issues. The project was deployed to DEV with the Vite configuration.

[roamye]

Certain links in DEV no longer show an error 404 message for pages, for example: https://lux-front-dev.collections.yale.edu/view/results/people?q=%7B%22AND%22%3A%5B%7B%22name%22%3A%22Andy+warhol%22%7D%2C%7B%22recordType%22%3A%22person%22%7D%5D%7D returns as a completely blank screen.

Note this happens for instances when you open a link in a new tab. (simple search, tabs, hal links, etc) Steps to recreate the blank screen:
Step 1: Go to simple search and do a search for andy warhol Step 2: Ctrl + select the link of reichstag object record. (for macs it would be CMD + select the link) Blank screen will appear instead of the record.

When you select it within the same page it loads correctly.

[roamye]

From discussion with @kamerynB - this will be moved to the next milestone 12/02