Simple, yet complete setup for building apps with Web Components.
- 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.
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
- 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
andpwa-512x512.png
. favicon.io is a good resource for generating these assets. - Change the title, description and theme color in the
index.html
andvite.config.ts
. - Change the
name
field in package.json.
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.