Haunted Vite

Simple, yet complete setup for building apps with Web Components.

Features

• Vite with Haunted, TypeScript and absolute imports.
• Use ESLint and Prettier on VSCode and before you commit with Husky and lint-staged.
• PWA enabled.
• Write unit and integration tests with @open-wc/testing and @web/test-runner.
• GitHub Actions for automatic testing of Pull Request branches, and all pushes to main branch.
• Deploy to Vercel with pre-configured SPA fallback.

Getting started

Use this repository as a GitHub template or use degit to clone to your machine with an empty git history:

npx degit bmartel/haunted-vite#main my-app

Then, install the dependencies:

npm install

Before you start

• If you don't plan to use GitHub Actions, delete the .github directory.
• Change the favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, safari-pinned-tab.svg, pwa-192x192.png and pwa-512x512.png. favicon.io is a good resource for generating these assets.
• Change the title, description and theme color in the index.html and vite.config.ts.
• Change the name field in package.json.

Scripts

• npm run dev - start a development server with hot reload.
• npm run build - build for production. The generated files will be output to the ./dist directory.
• npm run preview - locally preview the production build.
• npm run test - run unit and integration tests related to changed files based on git.
• npm run format - format all files with Prettier.
• npm run lint - runs TypeScript and ESLint.