usage.md

Usage

Start a dev server

Using make

For Windows, skip to Yarn only.

This command will compile TS to JS and serve the app. Tests are left out so the app can still be used without passing tests.

$ make serve

Then open in the browser at:

• http://localhost:8080

That commands applies Lint fixes before starting the app.

Yarn only

If you prefer to skip that linting, just run:

$ yarn start

Subpath

If you need to check that the site works on a GitHub Pages subpath, run this:

$ make serve-subpath

Then open in the browser at:

• http://localhost:8080/badge-generator/

The Vue Router package handles navigation for us. For links outside of the navbar, search for use of baseUrl in the codebase.

Debugging

For debugging, start the server and then launch the Firefox task under the Debugger pane in VS Code. This will open a new window and attach to the server, so you can set breakpoints.

Fix

Apply formatting fixes (with Prettier) and lint fixes (with ESLint). Show any errors that could not be fixed.

$ make fix

Tests

Jest is the test runner and it is run using the Jest plugin for Vue. See cli-plugin-unit-jest in the Vue CLI docs.

Run unit tests:

$ make test
$ # OR
$ make t

That includes a step to compile to TypeScript, to give type validation. Though, the compiled output JS is not actually needed.

To run tests without compilation or code coverage, just run:

$ make test-quick
$ # OR
$ make q

The IDE should also give TypeScript errors as hints.

Check types

Validate that TS compiles without errors. This does not persist anything.

$ yarn compile

This step is optional as the build or serve commands handle TypeScript internally. But running this compile step alone is much faster. See also use in Makefile.

Note that does not check the .vue files, as the Vue integration is left out here.

See Deploy for using the build command.