Projet de POC de Notifications avec Vue.js, TypeScript, Novu, Docker, Firebase

Ce projet est une preuve de concept (POC) visant à implémenter des fonctionnalités de notifications avec Vue.js.

Table des Matières

1. Description du Projet
2. Installation
3. Utilisation

Description du Projet

Ce projet utilise Vue.js, Novu, Docker pour créer une application de démonstration des fonctionnalités de notifications. Il explore différentes méthodes pour afficher des notifications à l'utilisateur, telles que les notifications en temps réel, les alertes, etc.

Installation

Prérequis

• Node.js
• Docker
• Novu

Stack technique

Client: Vue, Typescript, Novu, Firebase

Server: Nest, Kafka, Novu

1. Clonez le dépôt :

   git clone https://github.com/romain-debrito-interstis/notification-front.git
   cd notification-front
   
      

Variables environnement

Pour exécuter ce projet, vous devrez ajouter les variables d'environnement ci-dessous dans un fichier .env

VITE_APPLICATION_ID= : AplicationIdentifier de Novu

1. Avec Novu en ligne :

   Par défaut l'application est déjà en ligne

2. en local :

Ajouter ces variables d'environnement

VITE_API_URL_NOVU= : : BackendUrl de Novu

VITE_SOCKET_URL= : SocketUrl de Novu

Pour utiliser Novu en local décocher les commentaires contenu dans à cette partie de code dans le fichier settings-notifications.vue

const headlessService = new HeadlessService({
applicationIdentifier: import.meta.env.VITE_APPLICATION_ID,
subscriberId: subId.value,

// subscriberHash: initialize.subscriberHash,
// socketUrl: import.meta.env.VITE_SOCKET_URL,
// backendUrl: import.meta.env.VITE_API_URL_NOVU
});

et dans le fichier docker-compose.yml décocher les commentaires : (ayz un environnement docker et cloner les repertoires infra)

services:
  vite-dockers:
    build: .
    image: node:alpine
    # networks:
    #   - infra_novu
    #   - notif_backend
    container_name: vite-docker 
    entrypoint: 
      - "/bin/sh"
      - "-c"
      - >
        npm install &
        npm run dev;
    ports: 
     - 8002:8002
    working_dir: /srv/app
    volumes:
    - type: bind
      source: ./
      target: /srv/app
    tty: true
# networks:
#   infra_novu:
#     external: true
#     name: deployment_infra_novu
#   notif_backend:
#     external: true
#     name: docker_infra_backend

2. Installer les dépendances et lancer l'application :

• Avec Docker

  docker-compose up

  Il lancera l'applcation sur le port 8002. (vous pouvez changer de port dans le fichier docker-compose.yml et le fichier vite.config.ts)

• Avec Node (ou yarn)

  npm install

  npm run dev

  Accès à l'application : Ouvrez votre navigateur et accédez à http://localhost:8080.

  Pour le build et le déployement :

  npm run build

  firebase deploy

  !Assurez-vous d'etre connecter à firebase avant de déployer!