# Wotwizard UI
**URL:** https://forum.duniter.org/t/wotwizard-ui/8939
**Category:** Applications
**Tags:** wotwizard, graphql, vuejs
**Created:** [13 December 2021 20:27 UTC](https://forum.duniter.org/t/wotwizard-ui/8939 "2021-12-13T20:27:28Z")
**Posts on this page:** 20
**Page:** 4
### Author:  [@kapis](https://forum.duniter.org/u/kapis)
#### Post date: [9 January 2022 15:10 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/61 "2022-01-09T15:10:04Z")
> [@Paidge](#):
>
> Wotwizard est le titre de l’application développée par @gerard94. Je ne sais pas encore si ça restera comme ça pour différencier l’application d’origine et celle-ci. Qu’en penses-tu @gerard94 ?
Pas de problème, je voulais dire ajouter un sous-titre… pas besoin de changer le titre de WotWizard.
> [@Paidge](#):
>
> Super ! Pour l’anecdote : mon grand-père était catalan et est venu vivre en France dans les années 1930 😛
oui, j’ai lu que 10% des Tulusiens (j’ose penser que vous êtes de là-bas) sont des descendants d’ex-républicains fuyant le franquisme… c’est peut-être pour cela que la G1 a tant triomphé là-bas heheheheh
---
### Author:  [@gerard94](https://forum.duniter.org/u/gerard94)
#### Post date: [9 January 2022 15:13 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/62 "2022-01-09T15:13:22Z")
> [@kapis](#):
>
> je voulais dire ajouter un sous-titre… pas besoin de changer le titre de WotWizard
C’est sans doute la bonne solution.
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 15:13 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/63 "2022-01-09T15:13:50Z")
Ce sera donc le slogan de l’application 🙂
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 16:12 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/64 "2022-01-09T16:12:51Z")
> [@Paidge](#):
>
> Pourtant, je ne vois qu’une modif dans le package.json (pour ajouter apollo-link-context et apollo-link-http qui bizarrement ne s’y trouvaient pas). En tous cas merci 🙂
Oui c’est tout ce que je peux ajouter.
Concernant la version d’apollo je n’ai pas trouvé où cela se déclare, et je me demande si ce n’est pas un soucis uniquement local dû à mon environnement (j’ai d’abords essayé avec node 15 et le fichier package-lock, ça a peut être engendrer le soucis de version d’apollo. Maintenant que le package-lock est ajouté au gitignore, le problème est probablement résolu, le prochain nous le dira ^^).
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 22:08 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/65 "2022-01-09T22:08:20Z")
J’ai voulu corriger le soucis de 404 lors du refresh d’une page.
Je n’ai pas le soucis en local avec le server Express généré par npm, j’ai donc pensé que le soucis venais spécifiquement du reverse proxy de [netlify.app](http://netlify.app).
J’ai donc lancé une instance wotwizard-ui en mode static délivré par nginx sur une VM du serveur axiom, ici: [https://wotwizard.axiom-team.fr](https://wotwizard.axiom-team.fr)
Mais je constate le même problème, 404 lorsqu’on tente d’accéder à une page directement via l’URL.
Mais au moins maintenant, j’ai les logs héhé:
```auto
2022/01/09 23:00:41 [error] 1160#1160: *464163 open() "/home/axiom/apps/wotwizard-ui/membres/DDDD5A140607B31BB6C15D9C7F85B5BB8C679F0261C6F1E5D7ECAFE41B815222" failed (2: No such file or directory), client: 77.xx.xx.xx, server: wotwizard.axiom-team.fr, request: "GET /membres/DDDD5A140607B31BB6C15D9C7F85B5BB8C679F0261C6F1E5D7ECAFE41B815222 HTTP/1.0", host: "wotwizard.axiom-team.fr"
```
Il tente d’accéder au répertoire absolu {SERVER\_ROOT+URL}. Donc normal qu’il n’y trouve rien.
Je n’ai pas encore trouvé comment configurer correctement nginx et nuxtjs pour dépasser ce problème.
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 22:12 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/66 "2022-01-09T22:12:50Z")
C’est normal. J’ai configuré l’appli en mode SPA (Single Page Application). toutes les routes sont gérées automatiquement par nuxt.js via le router de Vue.js. Si tu veux du SSR (Server Side Rendering), il faut un serveur Node et configurer l’appli dans nuxt.config.js, à la ligne 5 (il y le lien vers la doc en commentaire à la ligne 4). Et, au lieu de faire un` npm run generate`, il faut faire un `npm run build` puis un `npm run start`. Enfin c’est ce que j’en ai compris pour le moment 😛
EDIT : Netlify (qui gère le CI/CD via [le dépôt github](https://github.com/paidge/wotwizard-ui)) ne gère que le SPA et non le SSR. Il y a [une astuce pour customiser l’erreur 404 envoyée par Netlify](https://iamweswilson.com/blog/nuxt-netlify-404).
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 22:54 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/67 "2022-01-09T22:54:40Z")
En fait pas besoin de toucher à la config de nuxt (je m’en doutait vue que ça marchais en mode dev en local), suffit de lancer nuxt en mode SSR.
Ici j’utilise `pm2` pour lancer le serveur nodejs en daemon:
[https://wotwizard.axiom-team.fr/membres/D01102D1D649EE65A027BC47FD1FB5BB6FECE7B6230414DB66EC490B51DBED7A](https://wotwizard.axiom-team.fr/membres/D01102D1D649EE65A027BC47FD1FB5BB6FECE7B6230414DB66EC490B51DBED7A)
* * *
Au passage, en recompilant wotwizard-ui dans un nouvel environnement, je n’ai eu aucun soucis de dépendances.
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 22:56 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/68 "2022-01-09T22:56:30Z")
En gros tu as juste fait `npm run build` puis `npm run start` ? Du coup je me demande à quoi sert cette option…
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 22:59 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/69 "2022-01-09T22:59:52Z")
Oui. Je ne sais pas de quelle option tu parles, mais en tout cas ça fonctionne impec en mode SSR.
J’ai juste créé ce fichier de conf à la racine du dépôt pour pouvoir lancer le site en daemon avec un simple `pm2 start`:
```auto
module.exports = {
apps: [
{
name: 'wotwizard',
script: 'npm',
args: 'start',
watch: false,
force: true,
env: {
PORT: 10091,
HOST: '0.0.0.0',
NODE_ENV: 'production',
},
},
],
};
```
Je ne sais pas si c’est utile de l’ajouter au git.
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 23:01 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/70 "2022-01-09T23:01:45Z")
> [@poka](#):
>
> Je ne sais pas de quelle option tu parles
Bah l’option dont je parlais dans nuxt.config.js, à la ligne 5 :
```auto
ssr: false,
```
> [@poka](#):
>
> Je ne sais pas si c’est utile de l’ajouter au git.
C’est spécifique à ton environnement de “production” donc pas sûr. Pour l’instant j’utilise le système de Netlify pour le dev car ça me suffit et le CI/CD est déjà automatisé avec github.
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 23:05 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/71 "2022-01-09T23:05:28Z")
> [@Paidge](#):
>
> Bah l’option dont je parlais dans nuxt.config.js, à la ligne 5
Ah oui, aucune idée, je l’ai gardé tel quel `ssr: false`.
Ce qui est spécifique c’est le port, mais on peut versionner un `ecosystem.config.js.example` avec port 3000 par défaut, et expliquer ça dans le readme.
Mais je pense pas que soit utile, ya pas vraiment d’intéret à lancer d’instance de wotwizard-ui en prod chez sois ou ailleurs, là c’était juste pour tester et confirmer que ça fonctionne comme prévue en mode ssr.
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 23:07 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/72 "2022-01-09T23:07:35Z")
> [@poka](#):
>
> Ce qui est spécifique c’est le port
pm2 n’est pas forcément utilisé chez tout le monde. M’enfin je dis ça, j’y connais rien. Je découvre 😛
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 23:16 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/73 "2022-01-09T23:16:07Z")
Je crois que j’ai trouvé l’utilité de [cette option](https://stackoverflow.com/questions/64765990/nuxtjs-spa-mode-ssr-false-still-generates-html-for-each-vue-file-in-the-pages). D’après ce que je comprends, avec` ssr: false`, l’appli est téléchargée en totalité côté client et s’exécute dans le navigateur. Si tu mets true, chaque lien interne ré-interroge le serveur. Faudrait que tu essaies pour voir.
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 23:23 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/74 "2022-01-09T23:23:27Z")
Ah oui en effet, c’est plus rapide ainsi ^^
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 23:29 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/75 "2022-01-09T23:29:02Z")
Penses-tu pouvoir configurer le CI/CD entre le Gitlab et ton serveur ? Comme ça je peux abandonner Github et Netlify 😉
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 23:36 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/76 "2022-01-09T23:36:14Z")
Arf malheuresement je n’ai jamais configuré les CI, je ne sais pas comment faire 😞
Par contre j’ai un cron qui check toutes les 10 minutes si un git pull de master donne des nouveautés, auquel cas il rebuild le site et relance le deamon pm2 😅
Ce qui revient dans les faits à peut prêt au même …
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 23:36 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/77 "2022-01-09T23:36:56Z")
La solution me convient 😉 Tu me diras quand tu auras mis le cron en place.
---
### Author:  [@poka](https://forum.duniter.org/u/poka)
#### Post date: [9 January 2022 23:37 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/78 "2022-01-09T23:37:22Z")
bah c’est fait lol
Bon faudra quand même que quelqu’un configure la CI ce sera plus propre.
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [9 January 2022 23:38 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/79 "2022-01-09T23:38:54Z")
Alors je supprime le dépôt github et l’appli [wotwizard.netlify.app](http://wotwizard.netlify.app). La nouvelle URL devient : [https://wotwizard.axiom-team.fr](https://wotwizard.axiom-team.fr)
---
### Author:  [@Paidge](https://forum.duniter.org/u/Paidge)
#### Post date: [10 January 2022 21:36 UTC](https://forum.duniter.org/t/wotwizard-ui/8939/80 "2022-01-10T21:36:46Z")
J’ai mis à jour le [README](https://git.duniter.org/clients/wotwizard-ui/-/blob/master/README.md) et créé [une page de template par défaut](https://git.duniter.org/clients/wotwizard-ui/-/blob/master/pages/template.vue) extrêmement commentée pour que n’importe qui (ou presque) puisse contribuer facilement sans se taper toute la doc ou en fouillant dans le code, même en utilisant l’internationalisation ! 😉
[Previous page](https://forum.duniter.org/t/wotwizard-ui/8939.md?page=3)
[Next page](https://forum.duniter.org/t/wotwizard-ui/8939.md?page=5)