Cra to vite

[ammaaraslam]

Description

This pull request encompasses the migration of the entire project from Create React App (CRA) to Vite. The migration was performed to leverage the benefits and improvements offered by Vite, aiming to enhance the development experience and improve overall performance.

Project Setup:
The project setup was updated to utilize Vite's build tooling and development server. The existing dependencies and configurations related to CRA were replaced with the corresponding Vite dependencies and configurations.

Build System:
The existing CRA build system based on webpack was replaced with Vite's native build system, which relies on the esbuild bundler. This change streamlines the build process, resulting in faster builds and optimized production bundles.

Development Server:
The CRA development server was replaced with Vite's fast development server, powered by esbuild. The new development server supports hot module replacement (HMR) and provides faster reloading and an improved developer experience.

Configuration:
The project's configuration files were updated to align with Vite's configuration structure. The "vite.config.js" file was introduced to specify custom build settings, plugins, and aliases.

Comparisons:

• Build Time: Vite significantly reduces build times by utilizing esbuild, resulting in faster and more efficient builds compared to the previous CRA setup.
• Development Experience: With Vite's development server and HMR capabilities, the development experience is improved, providing faster feedback loops and reducing waiting times during development iterations.
• Module Resolution: Vite's native ES module support improves module resolution, leading to more efficient bundling and better performance at runtime.
• Startup Time: Vite's optimized build process and dependency handling result in faster startup times for development and production builds.

---

Changes to be made in terms of documentation and code in other repos:

• Documentation must mention that the project uses Vite.
• Plays documentation must mention that any files created that has jsx elements within it, must be either of .jsx, .ts or .tsx file exension.
• Update the create-react-play cli to make sure that future plays are created as either .jsx, .ts or .tsx (Issue has been created here #38 )

Fixes #1193

Type of change

• Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

Tested locally. Both building the app and running Cypress tests.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-play	❌ Failed (Inspect)			Oct 6, 2023 6:22am

[netlify]

❌ Deploy Preview for reactplayio failed.

Name	Link
🔨 Latest commit	efe2a81
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/651fa70359fdbb0008c38018

[atapas]

Will start testing from tomorrow. I've a question @ammaaraslam

Do you see improvement in developer experience in installing dependencies and running the local server?

[ammaaraslam]

Will start testing from tomorrow. I've a question @ammaaraslam

Do you see improvement in developer experience in installing dependencies and running the local server?

@atapas
Yes.
I was I able to get nearly twice the speed in terms of running the local server, local build.
I've included the comparison in the description ☝️

[atapas]

@ammaaraslam We need to test the features. Have you started your sanity?

[atapas]

@ammaaraslam the build fails with these.. please check. Aany build step to change?

7:13:08 PM: node_modules/@mui/system/GlobalStyles/GlobalStyles.d.ts(9,121): error TS2694: Namespace 'React' has no exported member 'JSX'.
7:13:08 PM: node_modules/@mui/system/cssVars/getInitColorSchemeScript.d.ts(42,100): error TS2694: Namespace 'React' has no exported member 'JSX'.
7:13:08 PM: node_modules/@react-leaflet/core/lib/attribution.d.ts(1,26): error TS7016: Could not find a declaration file for module 'leaflet'. '/opt/build/repo/node_modules/leaflet/dist/leaflet-src.js' implicitly has an 'any' type.
7:13:08 PM: Try npm i --save-dev @types/leaflet if it exists or add a new declaration (.d.ts) file containing declare module 'leaflet';
7:13:08 PM: src/plays/quiz-app/types.ts(12,10): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
7:13:08 PM: src/plays/quiz-app/types.ts(12,18): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
7:13:08 PM: ​
7:13:08 PM: build.command failed
7:13:08 PM: ────────────────────────────────────────────────────────────────
7:13:08 PM: ​
7:13:08 PM: Error message
7:13:08 PM: Command failed with exit code 2: CI= npm run build (https://ntl.fyi/exit-code-2)
7:13:08 PM: ​
7:13:08 PM: Error location
7:13:08 PM: In Build command from Netlify app:
7:13:08 PM: CI= npm run build
7:13:08 PM: ​
7:13:08 PM: Resolved config
7:13:08 PM: build:
7:13:08 PM: command: CI= npm run build
7:13:08 PM: commandOrigin: ui
7:13:08 PM: publish: /opt/build/repo/build
7:13:08 PM: publishOrigin: ui
7:13:08 PM: redirects:
7:13:08 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
7:13:08 PM: Failing build: Failed to build site
7:13:09 PM: Finished processing build request in 57.247s

[atapas]

We have merged a few PRs ... could you please pull the latest and do a sanity and let me know?

I will rest of the merges until this is merged. Also, consider any other doc changes.

[github-actions]

There hasn't been any activity on this pull request recently, and in order to prioritize active work, it has been marked as stale. This PR will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!

[Angra974]

Hi @atapas
Don't forget, we need this one validated first

reactplay/create-react-play#41

to don't get problem with creating play in vite as for the moment, plays are still created with .js extension.

[joshi-kaushal]

Hi @ammaaraslam I need an update on this. Is it ready to merge? We need to plan further things accordingly.

[github-actions]

There hasn't been any activity on this pull request recently, and in order to prioritize active work, it has been marked as stale. This PR will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!