Welcome to the fabiencrassat's Curriculum Vitae source code - a development with the NuxtJs framework.
- Prerequisites
- Installation
- Structure
- Start like production
- Before commit
- Code Analysis
- Todos
- SVG images
- License
- GIT
- NodeJS and NPM Version 12
- Yarn Version 1.22
Clone the repository
git clone https://github.com/fabiencrassat/cv-with-nuxt.gitThen install the packages
cd cv-with-nuxt
yarnRun it!
yarn dev
# or in the offline mode
yarn dev:offlineGo to http://localhost:3000/fabien
The product source code is structured with:
.
├── config # Built and runtime configuration.
├── lib # All codes used into the application but that **do not use nuxt and vue**.
├── scripts # All files called in the `package.json` script section.
└── src
├── assets # All static files that need to be served without i18n.
├── components # All codes imported in the `src/pages/` files, **using nuxt and vue**.
├── locales # All i18n json files.
├── pages # All the application pages called with URL, served with **nuxt** and **i18n**.
├── resources # All resources to build the curriculum vitae.
└── static # All public files that can be link from the root website.
To group test files, they are following a naming convention:
*.test.jsare test files name for Javascript files (eg..js)*.spec.jsare test files name for Vue files (eg.*.vue)*.spec.tsare test files name for Typescript files (eg.*.ts)
This site is a static website. So to replicate what is deployed on the website there are some things to do first.
yarn generate
yarn start:staticAnd open the page: http://localhost:3000/fabien
To ensure the Github CI CD pipeline will stay green, launch the following command before committing and have no error.
yarn lint & yarn test:coverageAdding some files in the root or config folder will change how the pipeline or test coverage will work.
In this case and depending on the context, exclude these files:
| Exclude in | Why |
|---|---|
config/jest.config.js |
For the coverage in the key collectCoverageFrom. |
.gitignore |
Files not used in the version control system. |
.vercelignore |
Files not used in the vercel deployment. |
sonar-project.properties |
For the coverage in the key sonar.coverage.exclusions. |
In two shell windows:
-
Run the validation
yarn validate:pages
The source code of the pages from src/pages for each language is output in build/html-pages.
If there are some exceptions to exclude, add entries in config/validators.config.js.
If you want to know about your code analysis, you can use SonarQube for that. To do so:
Source: https://docs.sonarqube.org/display/SONAR/Get+Started+in+Two+Minutes
Do the SonarQube Installation before starting any developments in order to know how it will change the metrics.
Each time you want to know about your quality code, launch a scan with the following
command in the cv-with-nuxt folder! And you will have your evolution ;)
# Start the server if needed
<SONARQUBE BIN PATH>\StartSonar.bat
# Create coverage reports
yarn test:coverage
# Launch the scan
<SONARQUBE SCANNER BIN PATH>\sonar-scanner.bat;If you want to know about your code audit, you can use Google Chrome Lighthouse for that. To do so, use the docker image already published:
Source: https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/recipes/docker-server/README.md#building-locally
The docker command is wrong for Windows, use instead:
docker container run --publish 9001:9001 --mount source=lhci-data,target=/data --detach patrickhulce/lhci-server
It will create a container server you can access at http://localhost:9001/.
Then initialize the project inside the server:
yarn lhci wizard
? Which wizard do you want to run? new-project
? What is the URL of your LHCI server? http://localhost:9001/
? What would you like to name the project? cv-with-nuxt
? Where is the project's code hosted? https://github.com/fabiencrassat/cv-with-nuxt
? What branch is considered the repo's trunk or main branch? master
Created project cv-with-nuxt (9461df84-ee42-4868-9061-62a8391c7fec)!
Use token xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx to add data.
Use admin token xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx to manage data. KEEP THIS SECRET!Use the LHCI server URL and the token xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx in your .env file.
LHCI_SERVER_BASE_URL=http://localhost:9001
LHCI_TOKEN=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxDo the Lighthouse Usage before starting any developments in order to know how it will change the metrics.
Each time you want to know about your audit code, launch an audit with the following command in the cv-with-nuxt folder! And you will have your evolution ;)
if needed, configure your
CHROME_PATHin your.envfile.
yarn generate
yarn start:staticAnd in another shell:
yarn validate:lighthouse- Configuration
- Move all configuration files (Babel, Nuxt, Vercel) into
config/folder.
- Move all configuration files (Babel, Nuxt, Vercel) into
- Build
- Optimize the Sonar cache folders (~/.sonar/cache, .scannerwork) in the GitHub pipeline.
- Fix in
config/lighthouserc.jsthe exception assertions. - Stop CI when a warning is present in the
yarn generatecommand.
- Test
- Change test runner to cover Single File Component (https://vue-test-utils.vuejs.org/guides/choosing-a-test-runner.html#testing-single-file-components).
- [Waiting vue-jest@4.x.x] Remove executable code in
vuefile to allow coverage with vue-jest@3.x.x (h1.vue,leftSide.vue).Search for
coverage is successful with vue-jest@4.x.xin the code. - Remove
levenarynode module due to an import error with@babel/preset-env:7.12.1.
- Product
- Add a reading progress bar
- Extra
- Add
vue-styleguidistpackage.
- Add
The SVG images library comes from http://www.entypo.com/
MIT