Relier App ReactJS à CMS headless

Par Phantasy, il y a 4 ans

Base de données MySQL
Javascript React

Bonjour à tous,
Voilà bientôt 2 semaines que je ne trouve pas de solution à mon problème. j'ai créer un app en ReactJS pour un photographe, avec une galerie photo et une page tarifs. Ces deux pages actuellement repose sur un fichier Json pour s'alimenter. Je souhaiterais relier mon app à un CMS Headless. Mais toutes les solutions que j'ai trouvée me paraisse très compliqué et partent du principe que l'application n'existe pas encore (npx create-app) ou à été faite par générateur d'app ce qui n'est pas mon cas. https://github.com/Henrissat/Charles-Cantin

Pour le moment j'ai hébergé mon app sur Heroku et sur Netlify pour utiliser leur CMS mais ça ne fonctionne pas . J'ai voulu tester avec Forestry.io, Strapi, ButterCMS, NetlifyCMS et j'en passe.

Ce que je veux

Existe t-il un CMS headless simple qui se base sur des fichiers json ? ou qui peut s'adapter à une app existante ?
help please !!!!!

Ce que j'obtiens

Pour le moment ce que j'obtiens c'est pleins d'application créer par des CMS avec leur commande "npm create-strapi-app " "npm create-foretry-amm" ... etc mais aucune qui s'adapte à une app existante. J'ai tenté de copier coller mes pages .js dans les app créer par les CMS mais tout ce que j'ai réussis à faire , c'est planter mon app.

2 réponses

Orivoir21, il y a 4 ans

Bonjour, est-ce que tu ne peux pas te servir du CMS headless uniquement pour fournir l'API (donc il ne distribue pas les fichiers de l'application client) puis déployé l'application client a part (par exemple si tu utilises Heroku pour héberger l'application, tu hébergerais deux applications une qui contient l'API donc le CMS Headless et l'autre qui contient l'application front-end donc l'application React.js)
Puis avec l'application React.js, tu consommes l'API via des requêtes réseaux
MDN fetch API Guide.
La documentation de Strapi propose une implémentation de React.js sous cet forme-là.
Strapi integrations React.js

Pour illustré si dans le composant Article tu as besoin de demander un article à ton API tu pourrais le faire de cette façon-là:

import React from 'react'; const Article = ({id}) => { const [article, setArticle] = React.useState(null); // fetch l'article sur l'API React.useEffect(() => { fetch(`http://localhost:1337/api/article/${id}`, { method: "GET", headers: { "Accept": "application/json" } }) .then(response => response.json()) .then(articleJson => { setArticle(articleJson); }) .catch(error => { console.warn("Oops, l'article ne peut pas être récupéré: ", error.message); }) }, []); // aucune valeur pour le state article (il et entrain d'être récuperer via la requête réseaux). if(!article) { return <p>Loading article ...</p> } // affiche les données de l'article: return ( <div> <h1>{article.title}</h1> <p>{article.content}</p> {# ... #} {# ... #} </div> ); } export default Article;

Le côté un peu non-pratique c'est que tu te retrouves avec deux applications à gérer,
mais tu as aussi l'avantage que les applications sont découplées,
tu peu par exemple imaginer une deuxième interface (pour mobile où application de bureau par exemple),
qui consommerait la même API.

Dans un cas plus en lien avec ton application,
tu as un composant Contact, qui présente un formulaire de contact et une fonction qui écoute la soumission du formulaire,
qui pour l'instant ce contente de loggé les données envoyées:

const handleSubmit = (event) => { console.log(` Name: ${name} prénom: ${firstname} Email: ${email} Country: ${country} `); event.preventDefault(); }

Si c'est ton API Headless qui doit validé/stocké les données du formulaire,
ici tu pourrait envoyer une requête réseaux de la même façon qu'avec le composant illustratif Article

const handleSubmit = (event) => { console.log(` Name: ${name} prénom: ${firstname} Email: ${email} Country: ${country} `); event.preventDefault(); fetch("http://localhost:1337/api/contact", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify({name, firstname, email, country}) }) .then(response => response.json()) .then(responseJson => { console.info(responseJson); }) .catch(error => { console.warn("Oops, la requête à echoué avec: " + error.message); }) }

A noter que dans une application React.js lorsque qu'on envoie une requête réseau comme dans les codes illustratif que j'ai montré, il faudrait utiliser un AbortController pour pouvoir annulé la requête si le composant ce fait démonté de l'arbre avant que la requête n'est aboutie, le problème si on le fait pas c'est que la réponse de la requête peut être traitée par notre composant "out of tree" et le composant va essayer de mettre à jour sont état local alors qu'il est démonté, ce qui provoquera une erreur Can't perform a React state update on an unmounted component

Phantasy, il y a 4 ans

aaah déjà j'y vois plus clair merci beaucoup !! Alors c'est normal que les CMS me créer une sorte de 2ème App qui va en faite s'occuper de gérer le back si j'ai bien compris. Je viens d'installer Strapi qui sera héberger aussi sur Heroku. J'ai créer mes collections et quelques contenu et si j'ai bien compris je peux remplacer mon chemin vers mon json par un chemin vers http://localhost:1337/api/article/${id} par exemple.
Bon je vais tester déjà ça... :) merciiii . Par contre j'arrive a trouver mes collections (src/api/portfolio/content-types) mais je n'arrive pas à trouver, dans les les fichiers, les contenu que j'ai créer. où sont-il sauvegarder ?