8 Replies
Hi @isaiah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Wasp heavily utilizes Vite in its framework. Here are some ways how:
1. Serving and Bundling: Wasp uses Vite to serve the client during development and for bundling it for production. This is done by customizing the Vite config in the
vite.config.ts file in your project root directory. Wasp will use your config and merge it with the default Wasp's Vite config. This can be useful for adding custom Vite plugins, customizing the dev server, and customizing the build process. However, be careful with making changes to the Vite config, as it can break the Wasp's client build process source (https://wasp-lang.dev/docs/project/custom-vite-config).
2. Testing: Wasp supports testing web apps through Vitest, a unit test framework with native Vite support. Running wasp test client will start Vitest in watch mode and recompile your Wasp project when changes are made source (https://wasp-lang.dev/docs/project/testing#testing-your-react-app).
3. Memory Usage: Wasp switched to Vite to reduce memory usage. Before the switch, wasp start took a lot of memory (~1 GB) to run the frontend. After the switch to Vite, it takes maybe 200, 300mb, instead of 1GB source (https://github.com/wasp-lang/wasp/issues/955).
4. Build Process: When you run wasp build, you get a React + Vite client and a NodeJS server source (https://discord.com/channels/686873244791210014/1220889422367817839).
Please note that while Wasp utilizes Vite, it's not possible to replace Vite with another framework like Next.js after Wasp generates all your files. This is because Wasp recompiles the code in .wasp on each source change source (https://discord.com/channels/686873244791210014/1221301825462866022).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @isaiah, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai Any past Github issues related to Vite production builds?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, there have been a few Github issues related to Vite production builds in Wasp:
1. Making type checking of client optional when building for production: This issue discusses the difference in handling TypeScript between development and production due to the use of Vite. In development, Wasp doesn't use
tsc to type check the user's code and instead relies on the user's IDE. However, before doing a production build, tsc is run to do some type checking. The issue proposes making it configurable if the type checks are run when building for production, especially in cases where faulty 3rd party libraries prevent production build due to some failing types. The proposed solution is to add a runTypeChecks option in the productionBuild configuration of the app entity in the Wasp code source (https://github.com/wasp-lang/wasp/issues/1457).
2. Solve double installation issue in restructuring: This issue discusses a problem where there were build issues after using the dedupe option in Vite to solve double installation issues. The contributors suggest that the build issues might be related to the dedupe option since they weren't happening unless dedupe was used source (https://github.com/wasp-lang/wasp/issues/1640).
Please note that these issues are part of the ongoing development and improvement of Wasp, and the Wasp team is actively working on resolving them.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @isaiah, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@isaiah anything specific you are interested in regarding Vite? We use it for serving the frontend app, in a quite typical way I would sya.
I was just curious. Building for production seems to be one of the common problems I see that's talked about when using Vite.
Been trying to learn a lot of the underlying tech behind Wasp and Wasp itself. Waspc is harder to learn though because it's Haskell. I don't have the smarts enough to learn it 😅 But the detailed comments are very helpful.
That is cool, ask away if you have any questions, we are happy to shed some light!
Waspc is a bit more involved, especially the Analyzer part, but:
1. We might be replacing complex Analyzer with much simpler TS solution in the future, working on that right now, that would simplify compiler quite a bit.
2. Generator part of the compiler, although in Haskell, is not so complex once you get into it.
What is more complex I would say is the whole TS project organization -> how we generate code, sdk, webapp, server, tsconfigs, ... .
I’m curious to know how Vite and Wasp would handle building static websites. From plain React code using runtime and build time fetch. Really like how the DSL abstracts the tooling complexity.
From the official Wasp lang docs:
When to use Wasp Wasp is addressing the same core problems that typical web app frameworks are addressing, and it in big part looks, swims and quacks like a web app framework. Best used for building full-stack web apps (like e.g. Airbnb or Asana) quickly starting a web app with industry best practices to be used alongside modern web dev stack (currently supported React and Node) Avoid using Wasp for building static/presentational websites to be used as a no-code solution to be a solve-it-all tool in a single language