Utiliser d’autres frameworks frontend

Wails fournit des modèles de démarrage intégrés pour un ensemble volontairement restreint de frameworks :

Cela ne signifie pas que ce sont vos seules options. Le frontend d’une application Wails est simplement un projet web : tout ce qui produit du HTML, du CSS et du JS statiques fonctionnera. Si le framework de votre choix (Solid, Preact, Lit, Qwik, SvelteKit, Angular, etc.) ne dispose pas de modèle, vous pouvez générer vous-même sa structure en quelques minutes.

Utilisation du répertoire frontend/

Wails ne se préoccupe pas du framework qui se trouve dans frontend/. Il repose uniquement sur un contrat minimal et indépendant du framework :

• frontend/dist/ correspond à ce qui est distribué. main.go incorpore le frontend compilé avec //go:embed all:frontend/dist et le fournit depuis le serveur de ressources. Votre processus de compilation doit produire un bundle statique dans frontend/dist/, le répertoire de sortie par défaut de Vite.

• La compilation est pilotée par frontend/package.json. Pendant wails3 build, Wails exécute le script build du frontend ; pendant wails3 dev, il exécute dev et utilise un proxy vers le serveur de développement Vite pour permettre le rechargement à chaud.

• Les liaisons sont générées dans frontend/bindings/. Wails examine vos services Go enregistrés et y écrit un SDK avec typage sûr. Importez-le comme n’importe quel autre module :

  jsCopy code

  import { GreetService } from "./bindings/changeme";

• Le serveur de développement s’exécute sur un port fixe. wails3 dev utilise un proxy vers Vite sur le port défini dans WAILS_VITE_PORT (9245 par défaut) ; réglez donc server.port sur ce port et activez strictPort: true. Il s’agit d’une configuration Vite ordinaire : aucun plugin Wails n’intervient.

• Facultatif : événements personnalisés typés. Les modèles intégrés enregistrent également le plugin @wailsio/runtime/plugins/vite. Il n’est nécessaire que si vous utilisez des événements personnalisés typés : il injecte dans le runtime les définitions de types d’événements générées et fait échouer la compilation tant que les liaisons n’ont pas été générées. Si vous utilisez uniquement l’API Events.On("time", …) fondée sur des chaînes de caractères, vous pouvez l’omettre.

Tout le reste — composants, routage, état et styles — relève entièrement de votre framework.

Générer la structure de n’importe quel framework avec Vite

Le moyen le plus rapide consiste à partir d’un modèle intégré afin de disposer de main.go, de Taskfile, des ressources de compilation et d’un service Go fonctionnel, puis à remplacer frontend/ par un nouveau projet Vite pour votre framework.

wails3 init -n myapp
cd myapp

# From the project root — e.g. Solid, Preact, Lit, Svelte, Vue, React, Vanilla
rm -rf frontend
npm create vite@latest frontend -- --template solid

cd frontend
npm install @wailsio/runtime

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    host: "127.0.0.1",
    port: Number(process.env.WAILS_VITE_PORT) || 9245,
    strictPort: true,
  },
});

import { defineConfig } from "vite";
import wails from "@wailsio/runtime/plugins/vite";

export default defineConfig({
  plugins: [wails("./bindings")],
  server: { host: "127.0.0.1", port: Number(process.env.WAILS_VITE_PORT) || 9245, strictPort: true },
});

wails3 generate bindings

import { GreetService } from "./bindings/changeme";

const greeting = await GreetService.Greet("World");

wails3 dev

Frameworks dotés de leur propre outil de génération

Quelques frameworks ne sont pas créés au moyen des modèles create de Vite et disposent de leurs propres outils. Ils restent compatibles : générez simplement leur structure avec leur commande native, puis ajoutez le plugin Wails :

• SvelteKit : npx sv create frontend. Utilisez l’adaptateur statique (@sveltejs/adapter-static) afin de produire un bundle statique et désactivez le rendu côté serveur (SSR).
• Qwik : npm create qwik@latest. Utilisez l’adaptateur statique (SSG).
• Angular : générez la structure avec ng new, définissez outputPath sur dist et configurez le script de compilation pour qu’il cible ng build.

La règle reste toujours la même : produisez une compilation statique dans frontend/dist/, conservez le plugin Vite @wailsio/runtime (ou importez directement le runtime) et importez vos liaisons Go depuis frontend/bindings/.