Understanding Vite ​

Vite is a platform that allows you turn your code into something tha the browser can understand.

It is the build tool for your applications and a development server.

Takes code and transforms into somehingbrowser can read.

As a development server it also has hot modeule reloading.

It replaces things like Webpack, parcel, gulp, it is similar to something like Snowpack, which does similar things.

It uses ESM in your dev flow.

If you have 1 TS file in your project, it knows to only affect chnages on that file, swapped in using WebSockets extremely faster.

Vite uses esbuild, which takes your files and compiltes them (very quickly) into what you need them to be.

If you want to do sever side rendering, better to go with something like Svelte or NextJS anyways.

Getting Started tidbits ​

How I setup Vite project ​

$ pnpm create vite
framework: React
variant: TypeScript + SWC

$ cd <name of project>
$ pnpm install
$ pnpm dev

$ pnpm create vite
framework: React
variant: TypeScript + SWC

$ cd <name of project>
$ pnpm install
$ pnpm dev

Evironment Variables ​

Vite supports enviorment variables in your client-side code via import.meta.env.VITE_ENV_VARIABLE. So as not to leak private variables, only those prefixed with VITE_ will be available in your code. Environment variables are created at build time (this is ubiqutous across client-side applications) so you should never add secrets to VITE environment variables.

The default directory and required prefix can be changed in the vite.config.js file.