Vite How-to Guide
There are plenty of tutorials on how to use vite to compile code written in latest and hottest technology, this guide is different. It is about how to split application into files/packages, how to use TypeScript to ensure compatibility, how to use Vite to link them back (either statically or dynamically). Demo code is written in plain old javascript using vanilla web api.
I write this "Vite How-to Guide" after I have read tons of Webpack/SSR/Typescript guide on the internet. They try to tell you a series of command to follow blindly without a understanding of the essential problems. Also the solution is coupled with specific frontend framework and plugins to be "one key solution". But all those encapsulation makes debugging harder. In this guide, I will tell you how to write minimal vite (without plugins) and typescript configuration to do it yourself. You know what is the essential problem, you understand the theory, you copy paste the solution, then you can modify it confidently when problem arises.
- Client Side Rendering
- Server Side Rendering
- Publish/Consume via CDN (a.k.a Dynamic Linking)
- Publish/Consume via Mono Repository (a.k.a Static Linking)
The guide is still work in progress, you can join the discussion with author and readers #1
Problems are more important than the solutions
For each topic, there are 4 parts
- The desired source code file/directory structure, and the motivation
- What are the developer experience problems if structured this way
- What are the user experience problems if structured this way
- Solution walk through
Solution tend to change rapidly, for example webpack evolves into vite. But some problems are decades old, they seldom change. Understand the problems allow us to pick up new framework/tool faster, because you know what you are looking for.
You can reuse these examples as starter template
Download and install https://pnpm.io/ Run pnpm install to install dependencies of all packages in the workspace.
In each package, run pnpm dev to start dev server, run pnpm build && pnpm preview to start production server. Make some changes to deepen your understanding.
Every example is a starter template you can reuse by copy & paste. It works better this way, than reuse by framework with lots of options & callbacks.