Learning Vite

Just one of the things I'm learning. https://github.com/hchiam/learning

To install vite globally: npm install -g vite

Quick tip/reminder: already installed vite? If you have an index.html file in the current directory, just run this:

vite

Speed up server start and development by leveraging modern ES modules in the browser for faster development time. Vite transforms and serves source code only on demand. You still will want to bundle for production or final testing, but not during development where files are constantly being updated. Vite can translate import { someMethod } from 'my-dep' for the browser, so you don't have to think about it. Out of the box, you can directly import .ts files (and other file types too), and @import CSS files or import classes from './example.module.css'. Vite comes with things like code-splitting and load optimizations on by default.

https://vitejs.dev

https://vitejs.dev/guide

https://github.com/vitejs/vite

Note to self - if js file doesn't seem to get added to /dist

<script src="index.js"></script>

needs to be

<script type="module" src="index.js"></script>

Online

https://vite.new/

https://vite.new/react-ts

https://vite.new/{template} <-- see template link list

From scratch

Using yarn:

yarn create vite
# and follow prompts

Or with npm:

npm init vite@latest
# and follow prompts

Then cd into the project folder and run yarn; yarn dev

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

Starting with a minimal repo example

https://github.com/hchiam/vite-project-example-minimal

Starting by testing out this repo

Using yarn: (triple-click to select all)

git clone https://github.com/hchiam/learning-vite.git && cd learning-vite/vite-project-example && yarn && yarn dev;

Or with npm: (triple-click to select all)

git clone https://github.com/hchiam/learning-vite.git && cd learning-vite/vite-project-example && npm install && npm run dev;

Then open http://localhost:3000

Commands, explained

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

to vite something other than index.html

vite.config.js:

import { defineConfig } from "vite";
export default defineConfig({
  server: {
    open: "demo.html",
  },
});

• this will open a new tab/window to http://localhost:5173/demo.html with vite --config vite.config.js or just vite