Préparez le client local fourni

1. Situez Vite et Vue dans l’exercice

Vue 3 construit l’interface dans le navigateur à partir des données reçues. Vite lance le serveur de développement qui fournit cette interface et relaie ses appels locaux vers Odoo. Le client ne remplace ni le modèle training.note, ni l’ORM, ni les droits configurés dans Odoo.

Le dossier de départ est déjà fourni. Vous n’avez pas à générer un nouveau projet. Il contient une page Vue minimale dans src/App.vue, un fichier src/api.js à compléter, la configuration du relais dans vite.config.js et les versions fixées dans package-lock.json.

2. Copiez le dossier de travail

Depuis la racine du support trainings/odoo-dev-4-days/, repérez workspace/day4-notes-client/. Faites-en une copie nommée day4-notes-client/ afin de conserver l’original comme point de référence.

cp -R workspace/day4-notes-client day4-notes-client
cd day4-notes-client

Copy-Item -Recurse workspace/day4-notes-client day4-notes-client
Set-Location day4-notes-client

Les commandes suivantes partent de cette copie. Si vous avez choisi un autre emplacement, ouvrez simplement un terminal dans le dossier qui contient package.json.

3. Vérifiez les versions prévues

Le projet demande Node.js 20.19 ou une version compatible plus récente. Vérifiez d’abord votre version :

node --version

Le fichier suivant décrit l’application et ses commandes. Vue est la dépendance utilisée dans le navigateur. Vite et son plugin Vue servent au développement et à la préparation des fichiers de l’application.

{
  "name": "odoo-notes-client",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": ">=20.19.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "3.5.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "6.0.8",
    "vite": "7.3.6"
  }
}

4. Préparez le secret local

Copiez le modèle de configuration. Le nouveau fichier .env.local est ignoré par Git et reste dans votre copie de travail.

cp .env.example .env.local

Copy-Item .env.example .env.local

Ouvrez .env.local, conservez l’adresse de votre Odoo local et remplacez la dernière valeur par la clé temporaire créée dans la section 3.

# Adresse de votre serveur Odoo local, sans barre oblique finale.
ODOO_BASE_URL=http://127.0.0.1:8069

# Collez ici la clé temporaire créée pendant le Jour 4.
ODOO_API_KEY=remplacez-par-votre-cle-temporaire

5. Lisez la configuration du relais avant de le lancer

Le fichier fourni charge les deux valeurs dans le processus Node.js qui exécute Vite. La section proxy accepte uniquement le chemin /odoo-api/training/api/notes. Elle retire le préfixe /odoo-api, vise Odoo, supprime les cookies du navigateur, puis ajoute la clé Bearer à la requête envoyée à Odoo.

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  const odooBaseUrl = env.ODOO_BASE_URL || "http://127.0.0.1:8069";
  const odooApiKey = env.ODOO_API_KEY || "";

  return {
    plugins: [vue()],
    server: {
      port: 5173,
      proxy: {
        "^/odoo-api/training/api/notes$": {
          target: odooBaseUrl,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/odoo-api/, ""),
          configure(proxy) {
            proxy.on("proxyReq", (proxyRequest) => {
              proxyRequest.removeHeader("cookie");
              if (odooApiKey) {
                proxyRequest.setHeader("Authorization", `Bearer ${odooApiKey}`);
              }
            });
          },
        },
      },
    },
  };
});

Le navigateur n’a donc besoin de connaître ni l’adresse directe d’Odoo ni la clé. Il appelle seulement le serveur Vite sur le port 5173. Odoo continue d’identifier le propriétaire de la clé et d’appliquer ses ACL et ses éventuelles règles sur les enregistrements.

6. Installez et démarrez

npm ci installe exactement les versions fixées dans package-lock.json. Lancez ensuite le serveur de développement.

npm ci
npm run dev

Résultat attendu : Vite annonce une adresse locale, normalement http://127.0.0.1:5173. Ouvrez-la : la page affiche Le client est prêt. Aucun appel vers Odoo ne part encore du navigateur. Gardez ce terminal ouvert. Si vous modifiez .env.local, arrêtez puis relancez Vite pour qu’il recharge les valeurs.