glossary_public_client/README.md

NATO Glossary, Public Client

This is the reop for the public client of the NATO Glossary project. This README will explain all basic commands for running, developing, testing, and building the app.

Stack

• Vue 3 + Vite
• TypeScript
• Vue I18N for multi-language options
• Pinia for state management
• Vitest for unit testing
• Playwright for end-to-end (e2e) testing
• ESLint for code linting
• Prettier for code formatting

File Structure

Given the small scope of this project, we're beginning with a Flat Structure to organize the files.

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

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 Vue (Official) to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

First-Time Setup

Install dependencies:

npm install

Development Environment

To properly run on and test this application, you'll need the following pieces to be running:

• Development Server (the web app)
• Local Database (a dev database that provides dummy data to testing)
• Development API (the API that serves the dummy data from the database to the web app)

Development Server

Start the development server on http://localhost:3000:

npm run dev

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint

Production

Build the application for production:

# npm
npm run build

Locally preview production build:

# npm
npm run preview

Check out the deployment documentation for more information.