Preact, TypeScript, Vite, @benchristel/taste

Setup

1. Click the "Use this template" button on GitHub
2. Clone the created repo
3. If this is your first ever JavaScript project, welcome! See setting up a JavaScript development environment to get started.
4. Run the one-time setup script to install dependencies and git hooks:

   make setup

Development

make is used for dev tools, to decouple them from the specific NodeJS package manager being used.

Server and Typechecker

• Opening the project in Visual Studio Code automatically starts the dev server and typescript typechecker.
• The dev server runs at http://localhost:5173 (the port number is vite in 1337... sort of).
• Output appears in the terminal pane (accessed via ctrl+~).
• Type errors also show up in the problems pane (ctrl+shift+M).
• The server and typechecker stop automatically when VS Code quits.
• If you are not using VS Code, you can run these commands manually:

  make dev  # Run the dev server
  make ts   # Run the typechecker in watch mode

Tests

• Tests run in the browser. The test report appears at the top of the screen.
• The page will refresh (re-running the tests) whenever you save a file.
• The tests and test report are completely removed from production builds.
• You can write tests in-source, or in files named *.test.*, e.g. example.test.ts. The test file pattern is configured in src/test-results.ts.

The test framework is @benchristel/taste. For more information, see @benchristel/taste on NPM.

Formatting

• Files get auto-formatted when you commit, so you'll never check in inconsistently-formatted code. To disable this behavior, delete .husky/pre-commit.
• To format all files, run make format.
• The code formatter is prettier. See .prettierrc for configuration.

Building for production

make build

This outputs files in the dist directory, which is symlinked to docs for easy deployment to GitHub Pages.

To smoketest your production build locally before deploying it, run:

make smoke

This runs an HTTP server (via vite preview) and opens the built app in your browser.

Deploying

To deploy your built app to GitHub Pages, go to the Pages tab of your repo's settings and change the directory to deploy from to /docs.

This template repo is deployed at https://benchristel.github.io/preact-typescript-vite-taste/