Ynov M1 Majeure - Coordination Front/Back

1. Introduction
2. Stack
3. Development tools
   1. Useful Resources
   2. Docker
   3. Build Report
   4. Documentation
   5. Tests
   6. Tests Records
   7. Coverage
   8. Linter
   9. Production Preview
   10. Lighthouse
   11. SonarQube
4. Automation
   1. Jira
   2. Github Actions
   3. Sentry
   4. Sider
   5. Better Uptime
5. API Used
6. Performance & Monitoring
   1. Sentry
   2. FOIT
   3. PWA
   4. Firebase Performance
   5. Cloud Monitoring
   6. Cloud Logging
7. Deployment

This project was made for Bordeaux Ynov M1 Major Class - Front/Back Coordination. This course is organized around two main axes :

• Coordination/Methodology
• Technical: Versioning, CI/CD, Testing, Multi-stage deployment, Code quality metrics generation, Documentation,...

What I've implemented:

• Jira project management
• Development environment with Docker
• Code review with Sider
• Automatic documentation generation with jsDocs
• Unit tests with Jest with coverage reports
• Build reports with webpack
• E2E tests with Cypress
• Cypress coverage generation with Istanbul
• Cypress runs records (uploaded to Cypress Dashboard)
• Global html page for development purposes, with links to all the reports and documentation
• Local SonarQube project for code quality metrics generation
• Lighthouse reports
• CI/CD pipeline with Github Actions
• Preview URL generation with Firebase
• Sentry monitoring
• Firebase Performance
• Google Cloud Monitoring
• Google Cloud Logging
• Better Uptime monitoring
• Status page : Here
• Google Analytics

dev.html can be found in the root directory. This file links to :

• Documentation
• Jest coverage
• Cypress coverage
• Jest & Cypress merged coverage
• Build reports
• Lighthouse reports

• Uncomment the devServer config in vue.config.js
• Create a .env.local with environment variables
• Run:

docker-compose --env-file .env.local up --build

# Or
npm run docker

A build report can also be viewed in dist/report.html. To generate a new report, run :

npm run build-report

If you have Vue CLI globally installed, the data is also available with

vue ui

Documentation is generated from jsDocs annotations. To see the documentation, open docs/index.html.

To generate or update docs, run :

npm run docs

Unit tests are made with Jest. Snapshot tests are also made with Jest. Each test suite starts with a snapshot test. E2E tests are made with Cypress.

To avoid requireContext errors with Jest, we can install the plugin and add this snippet to babel.config.js :

module.exports = {
  env: {
    test: {
      plugins: ['transform-require-context'],
    },
  },
};

Cypress tests can be recorded and uploaded to Cypress Dashboard. To run tests (headless) with recording, run:

npx cypress run --record --key <CY_DASHBOARD_KEY>

Note: cypress.json must be updated with the following config :

{
  "baseUrl": "http://localhost:8080/",
  "projectId": "<CY_PROJECT_ID>",
}

• Jest : Tests coverage can be found in tests/coverage/jest
• Cypress: Tests coverage can be found in tests/coverage/cypress
• Merge report can be found in tests/coverage/reports

For Jest to be able to collect coverage, we must pass the --collectCoverage flag.

  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "transform": {
      "^.+\\.vue$": "vue-jest"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}"
    ],
    "coverageDirectory": "./jest-cover/",
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "/lib/",
      "/test/",
      "/utils/",
      "main.js"
    ]
  },

For Cypress to be able to collect coverage, Istanbul must be installed. We also need @cypress/code-coverage.

As Jest runs on the test environment, one workaround to avoid Jest and Cypress interaction is the following config in babel.config.js

const plugins = [];
if (process.env.NODE_ENV === 'e2e') {
  plugins.push([
    'babel-plugin-istanbul',
    {
      extension: ['.js', '.vue'],
      all: true,
      include: ['src'],
    },
  ]);
}

As windows doesn't take NODE_ENV into account, we can install cross-env.

To run cypress with coverage (using Instanbul), run :

npm run cover

# The full command :
cross-env NODE_ENV=e2e nyc --silent npm run test:e2e

To generate the global coverage report, run:

npm run cover:merge

Eslint is used to lint the code. The eslint:recommended preset from vue-cli is applied.

To run the linter:

npm run lint

The dist directory being meant to be served by an HTTP server, opening dist/index.html in a browser will not work. A workaround is to use a Node static file server, as serve does.

# Install serve
npm install -g serve

# Serve the dist directory
serve -s dist

Lighthouse reports are located in ./lighthouse folder.

# To install lighthouse CLI
npm i -g lighthouse

# Build app and launch server
npm run preview

# Run audit
npm run lh:audit

The --view flag can be used to automatically open the report in a browser.

SonarQube is installed and ran locally through docker image. Sonar Scanner is configured to use SonarQube server (launched with docker).

From the projet root, run:

sonar-scanner.bat -D"sonar.projectKey=[projectName]" -D"sonar.sources=./src" -D"sonar.host.url=http://localhost:9000" -D"sonar.login=[projectKey]"

The analysis' output is visible on localhost:9000.

Each feature/fix branch has Jira's ticket issue as a reference. As such, Jira can automatically update issue's status depending on push/PRs.

• Open PR for every feature/_ or fix/_ branch
• Build, test and deploy to preview url on PR
• Open PR on merge from staging to prod
• Build, test and deploy to live url on master merge

Sentry is integrated in the app as well as in Github repo and Jira. A bidirectionnal flow is set between Sentry's issues and Jira's.

Automated Code Review on each PR. For now, test mode is enable so it doesn't block any PRs.

Status page can be found here Better Uptime is configured to :

• Call
• Send an SMS
• Send an email

On incident. An incident form is also automatically generated.

• Reverse Geocode (MapQuest)
• Geo API Gouv

Sentry is implemented for monitoring and includes performance data.

To fix "Ensure text remains visible during webfont load":

• Google fonts are loaded through the link tag in the head
• 'display: swap' is added to bootstrap-icons scss file

PWA assets are generated with vue-pwa-asset-generator. To regenerate files, add logo.png in the root directory then run:

npx vue-pwa-asset-generator -a logo.png

Or if the package is installed globally, run :

vue-asset-generate -a logo.png

Firebase performance is configured to monitor performance and log traces.

Monitoring is configured as followed:

• Security rules
• Database usage
• Storage usage
• App Engine Daily quotas
• Usage alerts
• Uptime checks

Google Cloud Logging is configured to listen and log the requests from the deployed app (both production and preview urls).

The project is hosted on Firebase Hosting and deployed through Firebase-cli.