build: migrate from CRA to Vite 🎉

[wesbragagt]

Hey lovely folks 👋 , I'm a long time fan of Excalidraw and I'm working on a live workshop showing folks how to migrate a fairly large application from CRA to Vite. I chose to try it out with this project since its built with CRA.

I was very excited to see it working with Vite and decided to put together this PR for everyone to check it out and see if its something worth considering.

Progress so far:

• Development build
• Production build
• Environment variables
• PWA support

Tests are still using react-scripts but I intend to explore getting Vitest to work.

Test:

• yarn start Watch the blazingly fast HMR
• yarn build Pretty darn fast too
• yarn build:preview Build and serve a production version locally

Results:

CRA Build before

Vite Build after

[vercel]

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

Name	Status	Preview	Updated (UTC)
excalidraw	✅ Ready (Inspect)	Visit Preview	Jun 21, 2023 7:34am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	Jun 21, 2023 7:34am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview	Jun 21, 2023 7:34am

[ad1992]

Wow this is great @wesbragagt 🚀
We are considering trying out Vite very soon so thanks for picking this up ❤️

[ad1992]

I have Revert TS config changes, probably those were pushed mistakenly @wesbragagt ?
The flags are not working well so checking that

[wesbragagt]

@wesbragagt checking the PR, the env variables don't seem to work well eg REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX is not set to true even when its set to true in env.local, any idea why would that happen ?

Hum, it should pick that up. I will take a look. Likely the the way vite is picking up .env files.

[ad1992]

@wesbragagt checking the PR, the env variables don't seem to work well eg REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX is not set to true even when its set to true in env.local, any idea why would that happen ?

Hum, it should pick that up. I will take a look. Likely the the way vite is picking up .env files.

@wesbragagt any update on this ?

[ad1992]

@wesbragagt checking the PR, the env variables don't seem to work well eg REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX is not set to true even when its set to true in env.local, any idea why would that happen ?

Hum, it should pick that up. I will take a look. Likely the the way vite is picking up .env files.

@wesbragagt any update on this ?

Rethinking on this - I think its better we migrate to VITE_ prefix as suggested in official docs as thats recommended. The plugin vite-plugin-env-compatible I am not sure if its maintained well as its not working well with few env variables so its better we do it the VITE way

[ad1992]

@wesbragagt checking the PR, the env variables don't seem to work well eg REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX is not set to true even when its set to true in env.local, any idea why would that happen ?

Hum, it should pick that up. I will take a look. Likely the the way vite is picking up .env files.

@wesbragagt any update on this ?

Rethinking on this - I think its better we migrate to VITE_ prefix as suggested in official docs as thats recommended. The plugin vite-plugin-env-compatible I am not sure if its maintained well as its not working well with few env variables so its better we do it the VITE way

Ok I was able to make it work (Its how Vite works, vite gives preference to .env.developement over .env.local unlike CRA) but I am still worried about the compatibility support as the library is almost 2 years old (still not officially recommended in docs) so I am little worried if its up to date with all things which Vite supports / will support in future. So I will update it to using Vite vars.

[ad1992]

@excalibot trigger release

[excalibot]

@ad1992 Preview version has been shipped 🚀
You can use @excalidraw/excalidraw@0.15.2-6441-6aad614 for testing!

[ad1992]

@excalibot trigger release

[excalibot]

@ad1992 Preview version has been shipped 🚀
You can use @excalidraw/excalidraw@0.15.2-6441-09a9176 for testing!

[ad1992]

As I am trying out fully to migrate to Vite, its a big change and significantly different from this PR hence I will open a separate PR so its easier to visualise the diff and keep this open as well so if the full migration doesn't work out we can still merge with current state. Hence I will also revert the vite and webpack related changes in this PR and push it in a separate PR instead

[wesbragagt]

@ad1992 Sounds like a good plan, I'm excited for the release!

[ad1992]

Vite is merged so closing this in favour of #6713