linkedout-front v1.27.1

LinkedOut Frontend

Modules principaux & versions

Node 14.x.x

React 17.0.2

Next.js 12.1.0

Webpack 4.46.0

ESLint 7.32.0

Babel 7.16.5

Architecture

• .github: configuration de la CI avec Github Actions
• .husky : scripts de hook de commit avec Husky
• /assets : fichiers de styles globaux avec UIkit
• /public : stockage des ressources non dynamique accessible publiquement tels que les images, le CSS ou les fonts
• /src
  • /components : dossier contenant les composants React écrit avec les particularités de Next.js
  • /constants : fichiers de constantes
  • /hooks : hooks communs à plusieurs composants
  • /lib : librairies pure JS (analytics ...)
  • /pages : dossier contenant les composants React de rendu de pages
  • /styles : feuilles CSS compilés à partir de UIkit + certains styles customs
  • /utils : fonctions utilitaires communes
  • Axios.js : configuration Axios pour communiquer facilement avec l'API
• .editorconfig : configuration par défaut de la syntaxe du code de l'éditeur
• .env : à ajouter pour gérer les variables d'environnements (cf. exemple)
• .eslintignore : configuration pour ESLint
• .eslintrc.json : configuration pour ESLint
• next.config.js : fichier de configuration pour Next.js
• .prettierignore : configuration pour Prettier
• .prettierrc.json : configuration pour Prettier
• Procfile : configuration des process Heroku à lancer après déploiement
• server-next.js: point d'entrée de lancement du serveur

Configuration

Avec Docker

Build image et container

docker-compose build

Lancer le projet en mode dev

docker-compose up

Sans Docker

Installation des modules

npm install

Lancement en en mode développement

npm run dev

Lancement en mode production

(pour le moment sans Docker)

npm run build
npm start

Prettier + Linter

npm run lint
npm run format

avec docker, précéder chaque commande par "docker exec front ${cmd}"

Ces deux commandes sont lancées par les hooks de commit

Fichier .env minimal

AIRTABLE_LINK_COMPANY_HELP=
AIRTABLE_LINK_COMPANY_SENSITIZATION=
AIRTABLE_LINK_COMPANY_SPONSOR=
AIRTABLE_LINK_JOIN_LINKEDOUT=
AIRTABLE_LINK_PROFESSIONAL_REINTEGRATION=
API_URL=
ASSOCIATION_APPOINTMENT=
ASSOCIATION_BROCHURE=
AWSS3_CDN_URL=
AWSS3_IMAGE_DIRECTORY=
AWSS3_URL=
CDN_URL=
FB_APP_ID=
FB_DOMAIN_VERIFICATION=
FB_PIXEL_ID=
GA_TRACKING_ID=
GTM_TRACKING_ID=
LINKEDIN_PARTNER_ID=
MAILJET_CONTACT_EMAIL=
PORT=
PUSHER_API_KEY=
SERVER_URL=
TOOLBOX_URL=
TUTORIAL_CV=
TUTORIAL_INTERVIEW_TRAINING=
TUTORIAL_PP=
TUTORIAL_VIDEO_CV=
TUTORIAL_VIDEO_FIRST_STEPS=
TUTORIAL_VIDEO_OFFERS=
TUTORIAL_VIDEO_OFFERS_2=

Styles

Les fichiers du thème globale, qui utilisent la librairie UIkit, se trouvent dans le dossier /assets/custom :

• entourage.less : style globale qui surcharge le thème par défaut de UIkit

• entourage.print.less : style utilisé pour le CV en version PDF

• /icons : icônes en SVG rajoutés aux icônes UIkit

Après avoir modifié les fichiers du thème, ou après avoir rajouté un icône, il faut recompiler les fichiers en CSS :

• Installer d'abord UIkit au sein de son propre module :

npm run uikit-install

• Si le module est déjà installé, le mettre à jour ;

npm run uikit-update

• Ensuite, compiler les fichiers SCSS en CSS :

npm run uikit-compile

Les fichiers transformés se retrouvent dans le dossier /src/styles/dist.

Déploiement

Le déploiement se fait automatiquement grâce à Github Actions et Heroku.

Si un commit est poussé sur develop, l'application sera déployé sur la pre-production : https://entourage-job-front-preprod.herokuapp.com

Si un commit est poussé sur master, l'application sera déployé sur la production : https://linkedout.fr

Comme il n'y a pas de tests, Github Actions n'est utilisé que pour déployer le projet sur Heroku.

Stack technique