{"payload":{"feedbackUrl":"https://github.com/orgs/community/discussions/53140","repo":{"id":811117460,"defaultBranch":"main","name":"vite","ownerLogin":"hchiam","currentUserCanPush":false,"isFork":true,"isEmpty":false,"createdAt":"2024-06-06T01:07:20.000Z","ownerAvatar":"https://github.com/avatars/u/18131787?v=4","public":true,"private":false,"isOrgOwned":false},"refInfo":{"name":"","listCacheKey":"v0:1718347789.0","currentOid":""},"activityList":{"items":[{"before":"2bfb518a6ae8eb22c26eb70f5d61b5b0c5e431fb","after":null,"ref":"refs/heads/patch-1","pushedAt":"2024-06-14T06:49:49.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"hchiam","name":"Howard Chiam","path":"/hchiam","primaryAvatarUrl":"https://github.com/avatars/u/18131787?s=80&v=4"}},{"before":"4a6236d14801a2cc16da0bfa4f1d36e459913c92","after":"2bfb518a6ae8eb22c26eb70f5d61b5b0c5e431fb","ref":"refs/heads/patch-1","pushedAt":"2024-06-14T06:46:15.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"patak-dev","name":"patak","path":"/patak-dev","primaryAvatarUrl":"https://github.com/avatars/u/583075?s=80&v=4"},"commit":{"message":"chore: avoid simply","shortMessageHtmlLink":"chore: avoid simply"}},{"before":"12e8d795390e9bd5f638dc237ac9d861b51aff49","after":"4a6236d14801a2cc16da0bfa4f1d36e459913c92","ref":"refs/heads/patch-1","pushedAt":"2024-06-10T13:59:39.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"bluwy","name":"Bjorn Lu","path":"/bluwy","primaryAvatarUrl":"https://github.com/avatars/u/34116392?s=80&v=4"},"commit":{"message":"chore: fix deadlink","shortMessageHtmlLink":"chore: fix deadlink"}},{"before":"e3c8278dc7a58aa738675fe35c449de30344ce58","after":"12e8d795390e9bd5f638dc237ac9d861b51aff49","ref":"refs/heads/patch-1","pushedAt":"2024-06-10T13:56:12.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"bluwy","name":"Bjorn Lu","path":"/bluwy","primaryAvatarUrl":"https://github.com/avatars/u/34116392?s=80&v=4"},"commit":{"message":"docs: update","shortMessageHtmlLink":"docs: update"}},{"before":"3c88db07a5d1748f029aa1644ace348ddc7fcdb2","after":"e3c8278dc7a58aa738675fe35c449de30344ce58","ref":"refs/heads/patch-1","pushedAt":"2024-06-07T03:05:47.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"hchiam","name":"Howard Chiam","path":"/hchiam","primaryAvatarUrl":"https://github.com/avatars/u/18131787?s=80&v=4"},"commit":{"message":"docs(guide): how to install vite for project + minimal index.html demo (vitejs#16583)","shortMessageHtmlLink":"docs(guide): how to install vite for project + minimal index.html demo ("}},{"before":"5739393baa2035bf6e270770e3e1b46afbfc0af9","after":"3c88db07a5d1748f029aa1644ace348ddc7fcdb2","ref":"refs/heads/patch-1","pushedAt":"2024-06-07T02:44:27.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"hchiam","name":"Howard Chiam","path":"/hchiam","primaryAvatarUrl":"https://github.com/avatars/u/18131787?s=80&v=4"},"commit":{"message":"# Getting Started ## Overview Vite (French word for \"quick\", pronounced `/vit/`, like \"veet\") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: - A dev server that provides [rich feature enhancements](./features) over [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), for example extremely fast [Hot Module Replacement (HMR)](./features#hot-module-replacement). - A build command that bundles your code with [Rollup](https://rollupjs.org), pre-configured to output highly optimized static assets for production. Vite is opinionated and comes with sensible defaults out of the box. Read about what's possible in the [Features Guide](./features). Support for frameworks or integration with other tools is possible through [Plugins](./using-plugins). The [Config Section](../config/) explains how to adapt Vite to your project if needed. Vite is also highly extensible via its [Plugin API](./api-plugin) and [JavaScript API](./api-javascript) with full typing support. You can learn more about the rationale behind the project in the [Why Vite](./why) section. ## Browser Support During development, Vite sets [`esnext` as the transform target](https://esbuild.github.io/api/#target), because we assume a modern browser is used and it supports all of the latest JavaScript and CSS features. This prevents syntax lowering, letting Vite serve modules as close as possible to the original source code. For the production build, by default Vite targets browsers that support [native ES Modules](https://caniuse.com/es6-module), [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import), and [`import.meta`](https://caniuse.com/mdn-javascript_operators_import_meta). Legacy browsers can be supported via the official [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy). See the [Building for Production](./build) section for more details. ## Trying Vite Online You can try Vite online on [StackBlitz](https://vite.new/). It runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine. You can navigate to `vite.new/{template}` to select which framework to use. The supported template presets are: | JavaScript | TypeScript | | :---------------------------------: | :---------------------------------------: | | [vanilla](https://vite.new/vanilla) | [vanilla-ts](https://vite.new/vanilla-ts) | | [vue](https://vite.new/vue) | [vue-ts](https://vite.new/vue-ts) | | [react](https://vite.new/react) | [react-ts](https://vite.new/react-ts) | | [preact](https://vite.new/preact) | [preact-ts](https://vite.new/preact-ts) | | [lit](https://vite.new/lit) | [lit-ts](https://vite.new/lit-ts) | | [svelte](https://vite.new/svelte) | [svelte-ts](https://vite.new/svelte-ts) | | [solid](https://vite.new/solid) | [solid-ts](https://vite.new/solid-ts) | | [qwik](https://vite.new/qwik) | [qwik-ts](https://vite.new/qwik-ts) | ## Scaffolding Your First Vite Project ::: tip Compatibility Note Vite requires [Node.js](https://nodejs.org/en/) version 18+ or 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it. ::: ::: code-group ```bash [NPM] $ npm create vite@latest ``` ```bash [Yarn] $ yarn create vite ``` ```bash [PNPM] $ pnpm create vite ``` ```bash [Bun] $ bun create vite ``` ::: Then follow the prompts! You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run: ```bash # npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app --template vue # bun bun create vite my-vue-app --template vue ``` See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `react-swc`, `react-swc-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`, `solid`, `solid-ts`, `qwik`, `qwik-ts`. You can use `.` for the project name to scaffold in the current directory. ## Community Templates create-vite is a tool to quickly start a project from a basic template for popular frameworks. Check out Awesome Vite for [community maintained templates](https://github.com/vitejs/awesome-vite#templates) that include other tools or target different frameworks. For a template at `https://github.com/user/project`, you can try it out online using `https://github.stackblitz.com/user/project` (adding `.stackblitz` after `github` to the URL of the project). You can also use a tool like [degit](https://github.com/Rich-Harris/degit) to scaffold your project with one of the templates. Assuming the project is on GitHub and uses `main` as the default branch, you can create a local copy using: ```bash npx degit user/project#main my-project cd my-project npm install npm run dev ``` ## Install `vite` Command You can install the CLI command `vite` for your project using: ```bash npm install vite ``` Or with yarn: ```bash yarn add vite ``` Now you can create an index.html file like this: ```html

Hello Vite!

``` Then simply run: ```bash vite ``` And index.html will be served on http://localhost:5173 ## `index.html` and Project Root One thing you may have noticed is that in a Vite project, `index.html` is front-and-central instead of being tucked away inside `public`. This is intentional: during development Vite is a server, and `index.html` is the entry point to your application. Vite treats `index.html` as source code and part of the module graph. It resolves `