113 lines
3.4 KiB
Markdown
113 lines
3.4 KiB
Markdown
# NATO Glossary, Admin Client
|
|
|
|
This is the repo for the admin client of the NATO Glossary project. This README will explain all basic commands for running, developing, testing, and building the app.
|
|
|
|
## Stack
|
|
|
|
- [Vue 3](https://vuejs.org/) + [Vite](https://vite.dev/)
|
|
- [TypeScript](https://www.typescriptlang.org/)
|
|
- [Bootstrap](https://getbootstrap.com/) for UI and styling
|
|
- [Vue I18N](https://vue-i18n.intlify.dev/) for multi-language options
|
|
- [Pinia](https://pinia.vuejs.org/) for state management
|
|
- [Vitest](https://vitest.dev/) for unit testing
|
|
- [Playwright](https://playwright.dev/) for end-to-end (e2e) testing
|
|
- [ESLint](https://eslint.org/) for code linting
|
|
- [Prettier](https://prettier.io/) for code formatting
|
|
|
|
## File Structure
|
|
|
|
Given the small scope of this project, we're beginning with a [Flat Structure](https://alexop.dev/posts/how-to-structure-vue-projects/#1-flat-structure-perfect-for-small-projects) to organize the files.
|
|
|
|
## Recommended IDE Setup
|
|
|
|
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
|
|
|
## Recommended Browser Setup
|
|
|
|
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
|
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
|
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
|
- Firefox:
|
|
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
|
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
|
|
|
## 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)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
|
|
|
## Customize configuration
|
|
|
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
|
|
|
## First-Time Setup
|
|
|
|
Install dependencies:
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
|
|
|
```sh
|
|
npm run test:unit
|
|
```
|
|
|
|
### Run End-to-End Tests with [Playwright](https://playwright.dev)
|
|
|
|
```sh
|
|
# 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](https://eslint.org/)
|
|
|
|
```sh
|
|
npm run lint
|
|
```
|
|
|
|
## Production
|
|
|
|
Build the application for production:
|
|
|
|
```bash
|
|
# npm
|
|
npm run build
|
|
```
|
|
|
|
Locally preview production build:
|
|
|
|
```bash
|
|
# npm
|
|
npm run preview
|
|
```
|
|
|
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. |