A Vue front-end app to interact with the Traction API.
The following tools are required for development:
.nvmrc
file.nvm is very helpful when managing multiple versions of node.
This project uses dotenv library for environmental config. To specify the required config, use
.env
files by creating a .env.<environment>.local
file and add the config to it. The essential
config required:
VITE_TRACTION_BASE_URL=<url>
VITE_PRINTMYBARCODE_BASE_URL=<url>
VITE_SAMPLEEXTRACTION_BASE_URL=<url>
VITE_LOG=false
Install the require dependencies:
npm install --include=dev
NB npm 7+ installs peer dependencies by default. In our case swrv will cause resolution failures so you will need to install with the --legacy-peer-deps flag: https://stackoverflow.com/questions/66239691/what-does-npm-install-legacy-peer-deps-do-exactly-when-is-it-recommended-wh
npm install --include-dev --legacy-peer-deps
You will need to use the node version in the .nvmrc file
If you are using npm you can do:
nvm use
If you are seeing fatal errors when running the tests this is likely caused by Node. v16.15.1 has a bug. Steps to fix this:
In the project directory, you can run:
npm run start
To run the app and have hot-reloads for development: This internally run serve and serve:css commands
Running unit tests:
npm run test:unit
Running specific unit test files:
npm run test:unit <test_file_route> -t "<test_name>"
Running end to end tests:
npm run test:e2e:all
Running individual end to end tests, this will spawn an interactive cypress session:
npm run test:e2e:one
Running an individual end to end test, without an interactive cypress session:
npm run test:cypress:all -- --spec **/<spec_file>
You will need to make the following changes to get it working:
.env.production.local
in the root folder as a copy of .env.production
VITE_TRACTION_BASE_URL=REPLACE_VITE_TRACTION_BASE_URL
to VITE_TRACTION_BASE_URL=http://traction
VITE_SAMPLEEXTRACTION_BASE_URL=REPLACE_VITE_SAMPLEEXTRACTION_BASE_URL
to VITE_SAMPLEEXTRACTION_BASE_URL=http://samples-extraction
VITE_SEQUENCESCAPE_BASE_URL=REPLACE_VITE_SEQUENCESCAPE_BASE_URL
to VITE_SEQUENCESCAPE_BASE_URL=http://sequencescape
The test fixtures for HTTP requests are stored in tests/data/
as structured JSON files. The actual mocked HTTP response is the value of the outer-most data
property (often with a nested data
property inside) while additional properties describe the returned status of the response.
{
"data": {
... <-- mocked response
},
"status": 200, <-- returned status
"statusText": "Success" <-- returned status text
}
To modify Tailwind configuration
Tailwind styles used in this project is from @sanger/ui-styling
npm module. Any further modifications required for the project can be done in tailwind.config.js
file in root directory.
To generate Tailwind css independently you can run: This is not required mostly, as this will be run as part of 'npm run start'
npm run serve:css
This project is formatted using Prettier. To run formatting checks, run:
npm run pretty
To fix errors locally run:
npx prettier --write .
This project is linted using ESLint. To lint the code, run:
npm run lint
To fix errors automatically run:
npm run lint -- --fix
This project is built into a static archive for deployment. To trigger the creation of a new image, increment the .release-version
version with the corresponding change according to
semver.
To create the documentation using jsdoc run:
npm run jsdoc
The documentation will appear in the docs folder. Currently this does not work for .vue files.
To view them open the docs/index.html file.
To update the table of contents after adding things to this README you can use the markdown-toc node module. To run:
npx markdown-toc -i README.md