Music Player

A simple music player web application, inspired by some articles on dev.to.

The main motivation for starting this small project was to try out some stuff and keep up to date with the most recent practices.

Setup 👨‍💻

Install dependencies:

npm i

Build 🔨

This project uses the TypeScript compiler to produce JavaScript that runs in modern browsers.

To build the JavaScript version of your component:

npm run build

Both the TypeScript compiler and lit-analyzer are configured to be very strict. You may want to change tsconfig.json to make them less strict.

Testing 🧪

This sample uses modern-web.dev's @web/test-runner along with Mocha, Chai, and some related helpers for testing. See the modern-web.dev testing documentation for more information.

Tests can be run with the test script, which will run your tests against Lit's development mode (with more verbose errors) as well as against Lit's production mode:

npm test

For local testing during development, the test:watch command will run your tests in Lit's development mode (with verbose errors) on every change to your source files:

npm test:watch

E2E Tests 🤖

Cypress was used to build some integration/end to end tests.

These tests can be run with test:integration script:

npm test:integration

For local testing during development, the test:integration:watch command would be more useful since it opens a visual Cypress tool and also a "headed" browser.

npm test:integration:watch

Linting 🧹

Linting of TypeScript files is provided by ESLint and TypeScript ESLint. In addition, lit-analyzer is used to type-check and lint lit-html templates with the same engine and rules as lit-plugin. Also, Stylelint is being used for checking CSS and general styling.

The rules are mostly the recommended rules from each project, but some have been turned off to make LitElement usage easier. The recommended rules are pretty strict, so you may want to relax them by editing .eslintrc.json, tsconfig.json and .stylelintrc.json.

To lint the project run:

npm run lint

Formatting 🧮

Prettier is used for code formatting. It has been pre-configured according to the Lit's style. You can change this in .prettierrc.json.

Prettier has been configured to run when committing files, thanks to Husky. See the prettier.io site for instructions.

Commits 📝

This repository is Commitizen friendly and, therefore, uses and respects Convential Commits specification.

In order to help us out with commit messages format the following command can be run:

npm run cz

The usage of cz helper is not mandatory but the format of Convential Commits is. Therefore, the commit message is always linted using Commitlint before being accepted.

Storybook 🖼️

Storybook is used for demoing some of the project components.

To check it out:

npm run storybook

Running the Project 💥

Finally, for actually checking the project running the start command which will run the project and open it in a new browser tab:

npm run start

This uses modern-web.dev's @web/dev-server for previewing the project without additional build steps. Web Dev Server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers. See modern-web.dev's Web Dev Server documentation for more information.

To serve your code against Lit's production mode, use npm run start:build.

Tooling configs ⚙️

For most of the tools, the configuration reside in its specific file (e.g. commitlint.config.js, .eslintrc.json, .huskyrc.json, .prettierrc.json, .stylelintrc.json, tsconfig.json) in order to avoid a very big package.json containing all the configurations.