@crzgames/common v1.3.2

Crzgames - Common / Package npm private

Tech Stack 🛠

• Vue.js (framework front-end)
• Vite (bundler)
• NodeJS (environnement)
• Cypress (tests e2e)
• Vitest (tests unitaire)
• Rollup (packager)
• CI / CD (Github actions)
• Docker

Git - Branch protected

Branch - Develop (development) :

1. On ne peux pas push sur la branche 'develop', il faut créer une branche à partir de 'develop' pour ça feature, puis faire une pull request (PR) sur 'develop' par rapport à ça feature finaliser qui ce trouve dans ça branche.

Branch - Main (production) :

1. La branche 'main' est en lecture seul et n'y faire de pull requests (PR), c'est moi-même qui me chargera de la pousser vers la production lorsqu'une nouvelle mise à jour doit être déployer.

Plateform / Environment

Development :

Informations : Version courante en cours de développement dans un environnement local.

1. Crzgames_Common : http://localhost:1420

Production :

Informations : Version latest Release.

1. Crzgames_Common : https://www.npmjs.com/package/@crzgames/common?activeTab=versions

Versioning

This library (release-please) follows Semantic Versioning.

New Release - Production

1. Go in branch 'develop' :

git checkout develop
git pull origin develop

2. Lorsque la version en cours de développement est validée, fusionnez la branche de développement (develop) dans la branche de production (main) pour publier la version finale :

git checkout main
git merge develop
git push origin main

# Lance la CI / CD auto lorsque c'est push sur main

New Feature - Development

New Feature :

1. Go in branch 'develop' :

git checkout develop
git pull origin develop

2. Create a new branche for new feature :

# Create new branch and switch branch (local branch)
git checkout -b feature/my-feature # docs/my-docs, fix/my-bug...

# Push new branch in repository distant
git push --set-upstream origin feature/my-feature

Finish Feature :

1. Create 'Pull request' go in repository : https://github.com/corentin35000/Crzgames_Common/pulls
2. 'base: develop' <-- 'compare: feature/my-feature'
3. Assign 'Corentin Recanzone' for 'Pull request'
4. Go create Pull requests.

Git - Branch and Commit

Liens utiles :

1. Conventional Commits : https://www.conventionalcommits.org/en/v1.0.0/
2. Workflow Branch : https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow

Lors d'un nouveau Commit :

BREAKING CHANGES (!) :

• feat!: my commit
• ...

NO BREAKING CHANGES:

• fix: Une modification qui corrige un bug. Par exemple? "fix: correct minor typos in code".

• feat: Une nouvelle fonctionnalité. Par exemple, "feat: add new 'forgot password' feature".

• chore: Les tâches de maintenance régulières ou les tâches qui ne modifient pas le code source, comme les mises à jour du build process ou les modifications aux fichiers de documentation. Par exemple, "chore: update build script".

• docs: Des modifications apportées uniquement à la documentation. Par exemple, "docs: add usage section to README".

• style: Les modifications qui n'affectent pas le sens du code (blancs, mise en forme, point-virgule manquants, etc). Par exemple, "style: format code as per prettier".

• refactor: Une modification du code qui n'ajoute aucune nouvelle fonctionnalité ni ne corrige de bug. Par exemple, "refactor: restructure project directory layout".

• perf: Une modification du code qui améliore les performances. Par exemple, "perf: improve user login speed".

• test: Ajout ou modification de tests. Par exemple, "test: add unit test for user login".

• build: Modifications qui affectent le système de build, ou des dépendances externes. Par exemple, "build: upgrade webpack to version 5".

• ci: Modifications aux fichiers et scripts d'intégration continue.

Lors d'une nouvelle Branche (in develop) :

Utiliser toujours le nommage des branches comme cela :

• 'feature/my-feature'
• 'fix/my-bug'
• 'docs/my-docs'
• ...

Branches importantes :

Concernant les branches important : develop, staging (pré-production), main (production)

RoadMap - Features / Issues (bugs)

Features :

Pour voir les Features, ou créer un ticket directement depuis le repository dans la page 'Projects' : https://github.com/users/corentin35000/projects/15

Issues :

Pour voir les Issues (bugs), ou créer un ticket directement depuis le repository dans la page 'Issues' : https://github.com/corentin35000/Crzgames_Common/issues/new

Library Development - @crzgames/common

Tester ces Components / Services.. :

Il y a une view sur ce projet appeler 'DesignSystemView' qui est sur la route racine de l'application de ce projet, qui permet de tester ces components, services...etc avant de déployer le package

Intégrer ces Components / Services.. dans la librairie :

Components - Export :

1. Si on veux partager un component quand on utilisera ce package, il doit être placée dans './src/lib/components'
2. On doit installer le component globalement, l'importer et l'exporter dans le fichier './src/lib/index.ts'

Services / Enums / Models / Stores - Export :

1. Si on veux partager un service/enums/models quand on utilisera ce package, il doit être placée dans './src/lib/services'
2. On doit l'exporter et l'importer dans le fichier './src/lib/index.ts'

Assets static - Export :

1. Si on veux partager un fichier static par exemple .json, .png, .scss..etc, il doit être placée dans './src/lib/assets/..'

SCSS - Export :

1. Si on veux partager un fichier style quand on utilisera ce package, il doit être placée dans './src/lib/assets/scss'
2. On doit l'exporter dans le fichier './src/lib/index.ts'

Use Library - @crzgames/common

Development :

1. Procédure à faire sur ce projet (@crzgames/common) :

   # npm
   # Generate file : crzgames-common-x.x.x.tgz
   npm run npm:pack

2. Procédure à faire sur le projet qu'ont souhaite tester le package (@crzgames/website_frontend OR @crzgames/launcher) :

    # 1. Copier le fichier 'crzgames-common-x.x.x.tgz' qui à était générer à la racine du projet @crzgames/common
    # 2. Coller le fichier à la racine du projet qu'ont veut tester.
    # 3. Open Docker Desktop.
    # 4. Delete volume 'crzgames_common_node_modules' OR 'crzgames_website_frontend_node_modules'
    # 5. Run command : docker-compose up 

3. Pour pouvoir utiliser les Components, Services..etc. Il faut faire des import named comme sur le screen ci-dessous :

Production :

1. Install package for project :

   # npm
   npm install @crzgames/common  

2. Pour pouvoir utiliser les Components, Services..etc. Il faut faire des import named comme sur le screen ci-dessous :

Launch the project WITH Docker

Setup

1. Install Docker Desktop : https://www.docker.com/products/docker-desktop/
2. Download, Install Cypress (Windows x86/x64) and add PATH Windows : https://cdn.cypress.io/desktop/12.11.0/win32-x64/cypress.zip

Development Server :

1. Open Docker Desktop

2. ```bash
   # Start the development server on http://localhost:1420 (Vue.js + Vite)
   docker-compose up
   ```

Launch the project WITHOUT Docker

Setup

1. Install Node.js and install dependencies project :

# nvm
# nvm install : https://github.com/coreybutler/nvm-windows/releases
# Install Node.js latest LTS
nvm install lts && nvm use lts

# npm
# Install dependencies
npm install

2. Download, Install Cypress (Windows x86/x64) and add PATH Windows : https://cdn.cypress.io/desktop/12.11.0/win32-x64/cypress.zip

Development Server :

Start the development server on http://localhost:1420

# npm
npm run dev

Updating Dependencies

Pour voir les mise à jour des packages disponible de npm :

# npm
npm run npm:check:dependencies

Update depencencies all :

# npm
npm run npm:update:all-packages

Test unitaire/e2e

Informations sur Cypress / Vitest et Test unitaire / e2e :

1. Cypress = Test e2e, Cypress est principalement utilisé pour les tests d'interface utilisateur et d'API, ce qui signifie qu'il est plus adapté pour tester le comportement global de votre application, y compris l'interaction de l'utilisateur avec l'interface utilisateur et les appels d'API.
2. Vitest = Test unitaire, test les components de Vue.js. Vitest utilise : Vitest + Vue test utils Vitest watch les fichiers de test unitaire (*.spec.ts) a chaque changement dans le code de vos test unitaire.

Informations sur les rapports de test générer avec Cypress et Vitest :

1. Cypress/e2e : Les rapports de test sont générer dans le dossier 'cypress/e2e/test-reports' (il ne sont pas générer avec les command 'npm run test:e2e:dev:..' il faut qu'il sois lancer en mode 'prod'. Le rapport de test générer est un fichier *.html
2. Vitest/unitaire : Les rapports de test sont générer dans le dossier 'vitest/unit/test-reports', et le rapport de test générer est un fichier *.html

Development :

# Lancer le projet avant de lancer les tests e2e/unitaire : 'npm run dev' OR 'docker-compose up'

# npm
# test e2e (Cypress)
# No GUI
npm run test:e2e:dev:chrome
npm run test:e2e:dev:firefox
npm run test:e2e:dev:edge

# GUI
npm run test:e2e:dev:gui:chrome
npm run test:e2e:dev:gui:firefox
npm run test:e2e:dev:gui:edge



# npm
# test unit (Vitest)
# No GUI
npm run test:unit:dev

# GUI
npm run test:unit:dev:gui

Production :

# Lancer le projet avant de lancer les tests e2e/unitaire : 'npm run dev' OR 'docker-compose up'

# npm
# test e2e (Cypress)
Production use Docker to pipeline CI/CD

# npm
# test unit (Vitest)
npm run test:unit:prod

Production :

Automatic - Pipeline CI/CD :

Setup - Si cela n'as jamais était encore fait :

1. Buy a VPS or a dedicated server with a Linux system with a fixed IPV4 (OVH, AWS..)
2. Connect to SSH for VPS.
3. Install runners auto-héberger and run runner. Go to your project repository, then to project settings, then click on 'Actions' then click on 'Runners' and click on 'New self-hosted runner'. Follow the documentation to install the self-hosted runner directly on the VPS by following their steps and launch the self-hosted runner :
4. Run command (lance le runner auto-heberger en arrière plan, permet de quitter la session SSH sans couper le server qui contient le runners) :

   nohup ./run.sh &

5. Create token and Add secrets variable :

    # Create token : https://www.npmjs.com/settings/crzgames/tokens
    
    # Ajouter au 'Secrets Variables' du repository (NPM_TOKEN)

Manuel :

# npm
# si cela n'as jamais était fait sur le système, cela vas crée un fichier .npmrc dans le dossier de l'utilisateur
# il demandera surement le username et password. Puis d'aller voir dans ces emails pour récupérer le code pour la double authentification
npm run npm:login

# npm
# build package npm from vite/rollup
npm run build:develop
npm run build:prod

# Step : up version to property version from package.json

# npm
# deploy to registry npm
npm run npm:publish:package