Ressources statiques

Les applications Jutro (et les applications basées sur Jutro) sont basées sur create-react-app. De ce fait, les mêmes recommandations s'appliquent concernant les outils.

Emplacement des ressources statiques

Les applications générées par create-react-app utilisent le répertoire ./public pour stocker les ressources statiques (images, etc.), mais l'application Jutro, quant à elle, utilise ./src/assets.

Ce répertoire personnalisé est configuré à l'aide de la propriété paths.appPublic dans ./overrides.config.js. Tous les fichiers de ce répertoire sont des ressources statiques et sont facilement référencés au moment de l'exécution. La seule exception ici est index.html, qui est stocké dans le dossier ./html.

URI de données

Pour éviter les problèmes de regroupement et liés à Webpack, vous pouvez utiliser des URI de données pour les images. De cette façon, vous ne faites pas référence à un fichier image, mais vous intégrez l'image dans votre source. Vous pouvez utiliser des SVG intégrés dans les propriétés :

<Image
  src="data:image/svg+xml;utf8,<svg ... > ... </svg>"
  alt="cooking apron"
/>

ou dans CSS :

.background {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Vous pouvez également encoder une image dans Base64 et l'ajouter comme propriété :

<Image
  alt=""
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc"
/>

ou dans CSS :

.background {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc');
}

Référencer des ressources statiques dans le code

Selon l'emplacement où se trouve la référence, cela peut se faire de deux façons : référencement groupé et référencement dissocié.

Regroupé

Pour regrouper une ressource, importez-la dans votre code JavaScript et utilisez-la dans un composant :

import logo from '../images/logo.svg';

<img src={logo} />;

Pour en savoir plus, consultez la documentation relative à create-react-app ici.

Dissocié

Vous pouvez référencer des ressources à partir du répertoire des ressources statiques de deux façons :

• à partir de modèles HTML à l'aide du préfixe générique %PUBLIC_URL%, par exemple :

  <img src="%PUBLIC_URL%/<path-to-the-image-under-src-assets>" />

• à partir du code JS (par exemple comme partie render() du composant), à l'aide de la variable d'environnement PUBLIC_URL, par exemple :

  render() {
      return (
          <img src={`${process.env.PUBLIC_URL}/<path-to-the-image-under-src-assets>`} />
      );
  }

Dev ou dist

Lorsque vous npm run build, les ressources statiques de ./src/assets sont copiées dans un emplacement approprié dans le sous-répertoire ./dist, ce qui permet aux ressources d'être également disponibles pendant l'exécution. N'oubliez pas de conserver les ressources référencées à l'aide de PUBLIC_URL comme indiqué ci-dessus. Cette variable est résolue sur un emplacement approprié au moment de la création par des react-scripts.