piano-staff

Reading exercise application for note reading.

📚 Table of Contents

• Recommended IDE Setup
• Type Support for .vue Imports in TS
• Customize configuration
• Project Setup
• Commit Message Guidelines for Version Bumping
• Run Dockerfile

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

🛠️ Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit

Run End-to-End Tests with Cypress

pnpm test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

pnpm build
pnpm test:e2e

Lint with ESLint

pnpm lint

✍️ Commit Message Guidelines

We follow the Conventional Commits specification for commit messages. This helps with readability, automated changelogs, and versioning.

Format:

<type>(optional-scope): <description>

[optional body]

[optional footer(s)]

Examples:

> feat: add search bar to header
> fix(auth): handle expired token on refresh
> chore: update dependencies
> feat(api)!: remove deprecated endpoint
> refactor!: migrate to new database schema

The ! after the type (or in the footer) indicates a breaking change.

Breaking Changes:

To signal a breaking change, you can either:

• Add a ! after the type/scope (e.g. feat!, fix(core)!)
• Or add a BREAKING CHANGE: section in the footer

Example:

> feat!: remove deprecated login method
> BREAKING CHANGE: The old login() function has been removed. Use loginWithToken() instead.

Common types:

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• ci: CI/CD only changes
• style: Code style changes (formatting, missing semicolons, etc.)
• refactor: Code changes that neither fix a bug nor add a feature
• test: Adding or correcting tests
• chore: Changes to the build process or auxiliary tools

Run Dockerfile

docker build -t note-exercise .

docker rm -f note-exercise-nginx

docker run --name note-exercise-nginx -d -p 8080:80 note-exercise