Import CSS / favicons (Vite + nx)

[kornifex]

Bonjour,

J'ai mis à jour le package react-dsfr et ai suivi le guide sur le setup initial ; notre projet utilise Vite donc j'ai suivi les consignes adéquates. Nous ne faisons plus que la copie des icônes avec le script update-icons là où avant nous passions par le précédant script de copie d'assets qui faisait davantage.

Le soucis se passe au niveau de l'import des favicons / CSS, vite ne les voit pas lorsque nous faisons, il redirige systématiquement l'import vers index.html

<link rel="apple-touch-icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/apple-touch-icon.png" />
<link rel="icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="./node_modules/@codegouvfr/react-dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />

<link rel="stylesheet" href="./node_modules/@codegouvfr/react-dsfr/main.css" />

J'ai bien vu le projet de test https://github.com/garronej/react-dsfr-vite-demo mais malheureusement impossible de trouver la solution, à part de repasser par le précédent script de copie d'assets. Peut-être y a t-il une config au niveau de vite qui est nécessaire ? Mais je ne trouve pas laquelle.

D'avance merci ! Bonne journée Julien

[ddecrulle]

Bonjour,

Ton dépôt est accessible quelque part que l'on puisse regarder ?

[kornifex]

Oui, pardon, il est accessible ici : https://github.com/MTES-MCT/trackdechets (que l'on peut d'ailleurs ajouter à la liste des projets utilisant la lib !)

[ddecrulle]

Tu as tenté la migration sur quelle branche ?

[kornifex]

Branche dev https://github.com/MTES-MCT/trackdechets/blob/dev/front/index.html Ici j'ai toujours l'ancien script d'import d'assets et mes links pointent vers les fichiers copiés. Ici j'import la CSS en javascript https://github.com/MTES-MCT/trackdechets/blob/dev/front/src/index.tsx#L11 Lorsque j'importe la CSS directement depuis un j'ai un hash qui change à chaque build, ce qui est plutôt pénible, d'où l'envie d'arrêter d'utiliser le script de copie d'assets et importer directement depuis les node_modules !

[garronej]

I prepared a pull request but the ability to submit it is disabled on your repo.

The issue is that you are in a federated Nx monorepo (with only a package.json at the root of the project). The path need to be adapted a little bit to work with you setup.

You can checkout my branch here: https://github.com/garronej/trackdechets/tree/update_react-dsfr

Best,

[kornifex]

Hello Joseph,

I absolutely did try to update the paths but unfortunately it did not work out, vite continued to serve me index.html instead of my png / css.

[garronej]

It seems Vite needs to be configured to allow references to the parent node_modules directory. Unfortunately, I couldn't test this myself. Despite trying every combination of Node and package managers, I was unable to install the dependencies due to node-gyp failing on my MacBook (Apple Silicon).

If you can provide a way to build and run the development server for your project, I’d be happy to configure it for you.

[kornifex]

I tried some of the newest NX / Vite plugin to copy the assets during the build but with no success, maybe I'm doing something wrong here : https://github.com/MTES-MCT/trackdechets/pull/3702/files

We have documentation on how to setup on a Mac here but don't bother, really. I'll find something I guess! https://github.com/MTES-MCT/trackdechets/blob/dev/CONTRIBUTING.md

[kornifex]

If I manage to copy assets to my output folder, I would still be left with the issue of dependencies (as in, the content of the main.css file) that would not get imported. Should I manually copy those assets too, praying you don't move them around in a future release or could there be another solution?

Edit : With that being said, I can copy files from a directory above (like ../AUTHORS.md) but can't succeed in copying files from ../node_modules for some reason...

[kornifex]

For the sake of transparency here I am now : I can't use the new nxCopyAssetsPlugin because you can't copy files ignored by git see this issue. Probably the same reason why I can't just link them from my index.html.

[garronej]

What I recomment you do is:

1) Remove this line from your index.html:

-        <link rel="apple-touch-icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/apple-touch-icon.png" />
-        <link rel="icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.svg" type="image/svg+xml" />
-        <link rel="shortcut icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.ico" type="image/x-icon" />
-        <link rel="manifest" href="./node_modules/@codegouvfr/react-dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />

-        <link rel="stylesheet" href="./node_modules/@codegouvfr/react-dsfr/main.css" />

-      <!-- Font preload -->
-        <link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Regular.woff2" as="font" crossorigin="anonymous" />
-        <link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Medium.woff2" as="font" crossorigin="anonymous" />
-        <link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Bold.woff2" as="font" crossorigin="anonymous" />

Import the CSS in the src/main.tsx:

src/main.tsx

import "../../node_modules/@codegouvfr/react-dsfr/main.css";

Handle the favicon manually (this is trivial and won't change ever):

cp -r ../node_modules/@codegouvfr/react-dsfr/favicon public
git add -A

Add thoses lines to the index.html:

        <link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png" />
        <link rel="icon" href="/favicon/favicon.svg" type="image/svg+xml" />
        <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon" />
        <link rel="manifest" href="/favicon/manifest.webmanifest" crossorigin="use-credentials" />

Don't use a vite plugin to copy the assets. They are dynamically updated based on what icons you are using.

[kornifex]

Thanks, that what I had settled on; I guess our tech choices won't allow direct link between index.html / node_modules.

We can probably close the issue, thanks for the help provided.

[garronej]

Next project you might want to give turborepo a try. It has, in my humble opignion a more sensible aproach to monorepo management.
But I'm not a monorepo fan to begin with so take it with a grain of salt haha

[arnaudambro]

in Remix what I did was

import appleTouchIcon from "@codegouvfr/react-dsfr/favicon/apple-touch-icon.png?url"

then use the appleTouchIcon directly in <link rel="apple-touch-icon" href={appleTouchIcon} />

Remix uses Vite, so I guess it should work ?

[garronej]

@kornifex OMG I'm so dumb.

In src/main.tsx it should be:

import "@codegouvfr/react-dsfr/main.css";

No need to dot dot into the parent node_modules of course.

@arnaudambro, thanks for the feedback, Remix adds quite a lot on top of vite though. Vanilla vite are pure SPAs