Tooling for Lit on an existing web project using vite

JavaScript
1

I want to use Lit on an existing project which is not yet using npm.
I got to https://lit.dev/docs/tools/adding-lit/ but doesn’t say how to tool / bundle the components.
lib/components/my-element.ts
Is there some path to go about using something like webpack or even newer, vite ?

2

If you want to integrate Lit into an existing project, you can definitely use bundlers like Webpack or Vite.
But am going to give you that for Vite only

Here’s how you can set up Vite for your project:

  1. Install Vite
npm install --save-dev vite
  1. Create a Vite config, add a vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
  },
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
});
  1. Update your tsconfig.json for transpiling
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": ["ESNext", "DOM"],
    "declaration": true,
    "sourceMap": true
  }
}
  1. Add start and build scripts to your package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
  1. Run Vite
  • For development
npm run dev
  • For a production build
npm run build

Good luck

3

Thanks a bunch. This solved my day.