104 lines
3.9 KiB
Markdown
104 lines
3.9 KiB
Markdown
|
Oui exactement, tu peux clairement séparer ton **backend Go** (PMO logger, serveur UPnP, etc.) de la **web app** dans un nouveau package, par exemple `pmoapp`, et l’embarquer via `embed`. C’est d’ailleurs la meilleure pratique si tu envisages une **application web complète et évolutive**, avec plusieurs pages, routes, et fonctionnalités.
|
|||
|
|
|
|||
|
|
Voici comment je te conseille de procéder et pourquoi :
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## **1️⃣ Création du package web indépendant**
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
mkdir pmoapp
|
|||
|
|
cd pmoapp
|
|||
|
|
npm create vite@latest web
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
* **Nom du projet** : `web`
|
|||
|
|
* **Framework** : React (on garde ton choix initial, populaire et bien documenté pour des interfaces complexes)
|
|||
|
|
|
|||
|
|
### **Pourquoi React** :
|
|||
|
|
|
|||
|
|
* Large écosystème (bibliothèques UI, state management, routing)
|
|||
|
|
* Réactivité naturelle pour les flux temps réel (comme SSE)
|
|||
|
|
* Compatible avec TypeScript, ce qui est pratique si ton projet Go devient complexe et que tu veux des typings fiables.
|
|||
|
|
|
|||
|
|
### **Choix du langage**
|
|||
|
|
|
|||
|
|
Les options que tu as :
|
|||
|
|
|
|||
|
|
| Option | Avantages | Quand la choisir |
|
|||
|
|
| --------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
|||
|
|
| **TypeScript** (recommandé) | Typage statique, moins d’erreurs runtime, meilleur pour projet long terme | Quand tu commences un projet sérieux et que tu veux scalabilité et sécurité |
|
|||
|
|
| TypeScript + SWC | SWC compile plus vite que Vite/TS, utile pour gros projets | Si tu vises build ultra-rapide et dev rapide |
|
|||
|
|
| JavaScript | Simple, pas de compilation typée | Pour prototypage rapide ou projet temporaire |
|
|||
|
|
| JavaScript + SWC | JS mais compilation rapide | Peu utilisé, peu d’intérêt si tu ne fais pas du JS lourd |
|
|||
|
|
|
|||
|
|
**✅ Recommandation : TypeScript classique**
|
|||
|
|
|
|||
|
|
* Tu as un projet qui va évoluer et peut devenir complexe
|
|||
|
|
* Les types aident à maintenir la cohérence avec le backend Go (ex : typage des logs, props des composants, etc.)
|
|||
|
|
* Tu n’as pas besoin de SWC pour l’instant, Vite est déjà très rapide pour dev et build
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## **2️⃣ Ajouter un build statique pour embed**
|
|||
|
|
|
|||
|
|
Dans ton Go package `pmoapp`, crée un fichier `web.go` :
|
|||
|
|
|
|||
|
|
```go
|
|||
|
|
package pmoapp
|
|||
|
|
|
|||
|
|
import (
|
|||
|
|
"embed"
|
|||
|
|
"io/fs"
|
|||
|
|
"net/http"
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
//go:embed web/dist/*
|
|||
|
|
var AppRoot embed.FS
|
|||
|
|
|
|||
|
|
// Expose static files
|
|||
|
|
func Handler(mux *http.ServeMux) {
|
|||
|
|
fsys, _ := fs.Sub(AppRoot, "web/dist")
|
|||
|
|
mux.Handle("/app/", http.StripPrefix("/app/", http.FileServer(http.FS(fsys))))
|
|||
|
|
mux.HandleFunc("/app", func(w http.ResponseWriter, r *http.Request) {
|
|||
|
|
http.ServeFile(w, r, "web/dist/index.html")
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Pourquoi :**
|
|||
|
|
|
|||
|
|
* `/app` → sert l’entrée de l’application (`index.html`)
|
|||
|
|
* `/app/` → sert tous les assets statiques générés par Vite (`dist/`)
|
|||
|
|
* Avec `embed.FS`, ton build React est complètement **embarqué dans le binaire Go**, tu n’as pas besoin de Node en production.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## **3️⃣ Workflow futur**
|
|||
|
|
|
|||
|
|
1. Développer le frontend dans `pmoapp/web` avec React/TypeScript.
|
|||
|
|
2. À chaque modification :
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd pmoapp/web
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. Ton backend Go peut **réutiliser la même variable `AppRoot`** pour servir les pages.
|
|||
|
|
|
|||
|
|
Tu pourras ensuite :
|
|||
|
|
|
|||
|
|
* Ajouter des routes React (`react-router-dom`)
|
|||
|
|
* Ajouter des pages dynamiques
|
|||
|
|
* Utiliser des composants pour logs, dashboard, configuration, etc.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Si tu veux, je peux te préparer **l’arborescence complète recommandée pour ton projet Go + React**, avec :
|
|||
|
|
|
|||
|
|
* `pmolog` pour le logger SSE
|
|||
|
|
* `pmoapp` pour la web app React
|
|||
|
|
* Embedding automatique du build Vite dans le binaire Go
|
|||
|
|
|
|||
|
|
Veux‑tu que je fasse ça ?
|