Convert to Vite
Convert this HTML game into a Vite-powered project.
Steps
-
Initialize a new
package.jsonwith:"name"based on the game directory name"private": true"type": "module""scripts":"dev": "vite","build": "vite build","preview": "vite preview"
-
Install dependencies:
viteas a devDependency
-
Create
vite.config.ts:import { defineConfig } from "vite" export default defineConfig({}) -
Extract inline
<script>and<style>fromindex.html:- Move inline JS to
src/main.js(orsrc/main.ts) - Move inline CSS to
src/style.css - Replace inline content with
<script type="module" src="/src/main.js"></script>and<link rel="stylesheet" href="/src/style.css">
- Move inline JS to
-
Move any standalone JS/CSS files into
src/ -
Update all asset references to use relative paths that Vite can resolve
-
Verify if you need to edit the
.gitignoreto excludedist/and other build artifacts likenode_modulesetc
Success Criteria
npx vite buildcompletes without errors- The game runs identically with
npx viteas it did before - No inline scripts remain in
index.html(except small config objects) - All JS is loaded as ES modules