This is a skeleton project for a Vue 2 web application. It is setup using TypeScript, Pinia stores, and Vue-Router navigation.
The Bootstrap-Vue component library has been setup and is the recommended base component library for this project.
- Frontend skeleton project
In order to install some private dependencies, you will need to create a .npmrc file
with an access token to Keybas' private NPM registry.
This project is configured through environment variables. They should be set either
in the external environment (from command-line, docker...) or in the .env file when
it is more practical to do so.
All required variables are listed in the .env.example file.
In code, they are declared in the src/services/env.ts file,
that you can refer to for reference, and that you can update to add your own variables
when required.
Do not store secrets in the project's environment variables.
This project has been configured for Node.js v16 (LTS) and NPM 8. If you're often
working with other projects, you can install nvm
(Linux version,
Windows version) to help change
Node versions quickly and often.
We recommend you to work using branches and merge requests, in order to avoid committing too
often to the main branch and running useless pipelines too often (like the publish job).
Merge requests also allow you to check validity (everything compiles), test coverage, code quality and style, prior to merging in the main branch, which is often good to ensure quality stays consistent at all times. They also help when several people are working at the same time on a given project, to be able to work in isolation on their separate issues or user stories, and thus reducing conflicts.
Useful NPM scripts on this project:
# Lint all files
npm run lint
# Run in development mode with hot-reloads
npm run serve
# Run unit tests in `tests/unit`
npm run testpublic/ Files that will be served alongside your app.
For instance, public/favicon.ico will be served as GET /favicon.ico.
src/
assets/ Files that are served by Vue. Files in this directory are
base64-encoded into the JS bundle, and it is advised to use
this directory as little as possible.
components/ All Vue single-file components (SFCs) used in this app.
router/ Declaration of routes for Vue-Router.
services/ Everything that should be abstracted from the stores, views and components.
store/ All data stores are declared as modules in this directory.
style/ (S)CSS files for styles that should not be scoped to a given component.
views/ Definition of views for the routes declared in router/.
Stores have been setup with Pinia and Vueuse that are forward-compatible with Vue 3. This will ease any future migration.
This project and its artifacts are not used solely by its developers, but also by sysadmins, security analysts, QA engineers, other developers, and a bunch of other professions. They expect that the documentation is kept up-to-date, in particular:
- This README
- Most importantly, the deployment documentation:
- The deploy/README.md explaining how to run the project
- The deploy/.env.example file that documents all environment variables required to run this project (with or without Docker)
- The deploy/docker-compose.yml file that documents all the third-party services and their configuration
The test runner and assertion library is Jest,
setup with the Vue Test Utils.
Tests are located in the tests/unit directory.
If you're familiar with these, you can also use the Vue Testing Library and/or its custom Jest matchers.
Organization of tests in this repository is free-form. For instance, you may follow this structure:
test/
fixtures/ Utilities specifically used to generate or inject test data.
helpers/ General testing utilities.
unit/ Unit tests for components, services, stores...
For more details on how to write tests, please refer to examples in this project and to the Vue Test Utils' documentation (or the Vue Testing Library if you're using it instead).
The easiest way to get this project up and running on a server or on your computer is using Docker.
For more details on how to deploy, see deploy/README.md;
If you're running into an issue with this project, please check the troubleshooting section in deploy/README.md.
- Vue Devtools
- If using VSCode, the following extensions:
- Recommended:
Vetur,ESLint,Prettier - Nice to have:
npm,npm Intellisense,i18n ally,markdownlint,axe Accessibility Linter
- Recommended: