refactor: implement vite and remove live-server

AhmedElbohoty commented 3 months ago

This pull request implements Vite as the development server. I use vite to serve the demo file, replacing the live-server package due to its high-severity npm issues. This change prepares the project for future enhancements and builds using Vite.

What kind of change does this PR introduce? Change Type: Configuration Update
What is the new behavior? No new behavior is implemented.
Implementation Details: Add Vite configuration files. Update scripts in package.json to use Vite for serving the demo. Remove live-server package from dependencies.

With live-server:

With vite:

netlify[bot] commented 3 months ago

Deploy Preview for racingbars ready!

Name	Link
Latest commit	a6e9c6ca3a51f5cd8d49f8b080ba4739e17a1161
Latest deploy log	https://app.netlify.com/sites/racingbars/deploys/66c59cf0f993e00008d96c5e
Deploy Preview	https://deploy-preview-162--racingbars.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

hatemhosny commented 3 months ago

Nice suggestion.

Vite is definitely much more than a dev server, and I think it is a great option when starting any new web app.

However, I'm actually happy with the current build system which uses esbuild both for development and production builds (with differences only in minification and source maps).

I'm also using some ?hacks like building some files then importing them as strings, injecting styles, loading web worker as data URL, patching TypeScript definitions, ...etc I'm not sure vite will cover all these scenarios.

If it ain't broken, don't fix it :)

Maybe I should later on document the workflow and the justifications for those decisions in some contribution guides.

Long ago, this project used a library that used rollup under the hood for build. It was so much slower and error-prone. Esbuild is really really fast and I do not need to deal with inconsistencies between development and production builds.

I'm using the dev server only for demo purposes for some plain html files that cover different scenarios. The docs website uses docusaurus which has its own dev server. Maybe we still need to change live-server to a better package. However, I haven't had major problems with it.

I may even replace all these demo files with live playgrounds, since now we have LiveCodes. And then maybe we even get rid of the dev server all together!

Anyway, I will still try out your proposed changes and let you know about my thoughts. I'm out for the next 3 days. I will get back to you once I get a chance.

I'm really grateful for your contributions. Thank you 💚

AhmedElbohoty commented 3 months ago

I'm grateful for your explanation 😄

Absolutely, I understand if your current setup with esbuild is working well and you're happy with it, there's no rush to change things up. It sounds like you’ve crafted a robust workflow with your customizations and optimizations.

Documenting your setup and decisions could be valuable for future contributors or for clarity within the project.

I'll go ahead and experiment with the vite on a separate branch to gain more experience and see how they fit with current setup.

I will close this pull request.

hatemhosny / racing-bars