codegouvfr / react-dsfr

🇫🇷 The French Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
417 stars 56 forks source link

Soucis avec les scripts de copie d'assets #287

Closed ocruze closed 3 months ago

ocruze commented 3 months ago

Bonjour, Depuis les changements récents des scripts de copie d'assets, j'ai des soucis avec un projet où j'utilise react-dsfr. Ce projet se sert du mode spa vite, mais en réalité n'utilise pas vite. J'utilise webpack comme bundle et ensuite tout est servi en mode statique par un serveur php/apache (c'est une application symfony).

Dans mon projet j'ai un dossier public avec un index.php. Maintenant, les 2 scripts de copie d'assets attendent un fichier index.html dans le dossier public (je sais pas si c'était déjà le cas avant). Mais en tout cas, les 2 scripts plantent parce qu'il n'y a pas d'index.html.

J'ai réussi à le feinter en créant un fichier vide et en l'appelant index.html, et là les scripts s'exécutent sans échec. Mais le script copy-static-assets ne copie pas l'intégralité des assets dsfr, il manque plein de choses. Après, j'avoue que j'ai pas trop compris les derniers changements de ces 2 scripts. Pourriez-vous m'expliquer ce que font les scripts et pourquoi, pour que je puisse ajuster mon utilisation s'il vous plaît ? Merci d'avance.

garronej commented 3 months ago

Bonjour @ocruze,

Alors, en fait, le script copy-assets-to-public était assez problématique parce qu’il mettait dans la distribution finale l’intégralité du DSFR, qui fait plus de 80 Mo, plutôt que de mettre uniquement ce qui est effectivement utilisé. Je vous demande également d’importer le CSS du DSFR depuis le head sans qu’il y ait de hash sur le nom du fichier. Du coup, à chaque fois qu’une icône était ajoutée ou que le DSFR montait de version, la mise à jour n’était pas propagée aux utilisateurs existants, vu que leur cache navigateur était utilisé.

Pour les projets Vite, j’ai rendu ce script obsolète. Je l’ai gardé uniquement pour les projets Create React App qui ont des contraintes particulières.

Pour votre cas particulier, on peut regarder. Je peux faire en sorte que le script ne plante pas quand il n’y a pas d’index, mais avez-vous besoin de tout le DSFR dans public ?

Si vous voulez, on peut se retrouver sur Tchap : @joseph.garrone-insee.fr1:agent.finances.tchap.gouv.fr

garronej commented 3 months ago

Je suis tout prêt a changer je comportement j'aimerais juste comprendre bien votre cas d'usage pour savoir ce qui est le plus judicieux

ocruze commented 3 months ago

Bonjour (désolé pour le temps de réponse), D'accord, je pense mieux comprendre. Donc en fait, l'idée c'est de ne copier que des assets qui sont nécessaires et de hasher les noms des fichiers. J'avoue que j'avais pas vraiment fait attention à la taille. Effectivement, je n'ai pas besoin de tout. J'ai besoin des favicons, fonts, css, icons et artwork.

Après essais et erreurs, je pense que j'ai trouvé ce qui me convient. Je laisse la gestion de copie d'assets nécessaires à mon bundler (webpack) et il se charge de hasher le nom des fichiers. Et donc je peux me passer du script de copie d'assets.

Du coup, si c'est possible de faire en sorte que le script update-icons fonctionne sans fichier index.html, je suis preneur. Merci beaucoup :)

garronej commented 3 months ago

Oui voilà exactiment.
L'idée est d'importer les assets avec des imports du genre:

import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";

Car en effet dans le dossier dsfr il y a bien tout.

https://react-dsfr.codegouv.studio/assets

Attention: Il ne faut pas importer les assets depuis @gouvfr/dsfr mais bien depuis @codegouvfr/react-dsfr, @gouvfr/dsfr ne doit pas être présent dans vos dependences.

ocruze commented 3 months ago

Merci beaucoup pour vos réponses. Ça me va bien. Je ferme