Lancement App front React

Hey RedaB2 !! l J'ai exactement le même problème si tu as trouver une solution depuis , je suis preneur merci

Salut LeoG2,
Je pense que la solution est de changer d'hébergement... OVH ne sont pas encore prêt pour du Node.js... vu la documentation la-dessus...
Bonne courage ;)

Bonjour,

essayes de regarder dans package.json la commande lancée par "npm start"

Cordialement,
Boris.

```text Bonjour @RedaB2

Voilà comment je lance une app React.js sur mon Cloud Web (y'a beaucoup de texte, mais c'est + des explications qu'autre chose pour éviter les confusions):

Au vue de la strucure de tes fichiers, j'imagine que tu as suivis le guide officiel: "https://facebook.github.io/create-react-app/docs/getting-started".
Je pars donc avec la même structure de fichiers que toi:

```
claudeu@cloudweb-ssh:~/react $ ls
README.md node_modules package.json public src yarn.lock
claudeu@cloudweb-ssh:~/react $ ls src/
App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js
```

A partir de là, quand j'accède à mon site j'ai une page blanche (sans erreurs) avec juste affiché "React App" en titre. Mais aucun contenu. De ce que je peux voir, c'est pareil sur ton site (bead****.fr).
Ce comportement est du au dossier `public` sur ton Cloud Web et à son contenu: ce dossier est là par défaut pour servir du contenu statique (donc fait pour mettre tes images, fichiers CSS etc.).
Et quand tu regardes dans ce dossier `public`, il y a un fichier `index.html` quasi vide. C'est pour ça que ton site affiche une page blanche: il vient lire ce `public/index.html` et ignore ton app React.

```
claudeu@cloudweb-ssh:~/react $ ls public/
favicon.ico index.html manifest.json
```

Pour éviter ce problème, je supprime le dossier `public` actuel:
```
claudeu@cloudweb-ssh:~/react $ rm -rf public/
```

Ensuite il faut reprendre le guide que tu as suivi, et aller quelques sections après dans "https://facebook.github.io/create-react-app/docs/deployment". En suivant ce qui est dit dans ce guide:

```
# Creates a build directory with a production build of your app:
claudeu@cloudweb-ssh:~/react $ npm run build

> my-app@0.1.0 build /home/claudeu/react
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:
...

claudeu@cloudweb-ssh:~/react $ ls build/
asset-manifest.json index.html precache-manifest.054774adbe886ee6e3c29227ef1745b5.js static
favicon.ico manifest.json service-worker.js
```

Avec `npm run build`, tu as buildé une version optimisé de ton appli qui se trouve dans le repertoire `build`.
A partir de là, tu as deux solutions:

1 - Le plus simple est de créer un lien symbolique nommé `public` qui pointe vers le dossier `build`: avec ça tu utilise le mécanisme du dossier `public` décrit plus haut, pour venir servir directement ton appli optimisé, situé dans `build`:
```
claudeu@cloudweb-ssh:~/react $ ln -s build/ public
claudeu@cloudweb-ssh:~/react $ ls -l public
lrwxrwxrwx 1 claudeu claudeu 6 May 14 16:46 public -> build/
```
2 - Faire ce qui est décrit dans la partie `Other Solutions`: Utiliser https://expressjs.com/fr/ Express et créer un fichier `server.js` (ou autre selon le nom que tu as choisis dans le Manager OVH dans "Script de lancement de l'application", cf ton screenshot) qui va venir servir le contenu du répertoire optimisé `build`:
```
claudeu@cloudweb-ssh:~/react $ npm install express

claudeu@cloudweb-ssh:~/react $ cat server.js
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);
```

Que tu ais choisi la solution 1 ou 2, il faut ensuite redémarrer ton daemon NodeJS:
* Soit depuis le Manager OVH -> Multisite -> la roux à droite de ton site -> Redémarrer
* Soit en créer un fichier `/home///tmp/restart.txt` pour redémarrer le daemon une et une seule fois lors de la prochaine connexion
* Soit en créer un fichier `/home///tmp/restart.txt` pour redémarrer le daemon à chaque nouvelle connexion (utile le temps que tu dev ton site, à ne jamais utiliser quand ton site est terminé)

Et là, le site s'affiche bien:

http://imgur.com/6uIxGMUl.png

Je te laisses essayer ça de ton côté et me dire si ça fonctionne comme voulu (idem pour toi @LeoG2) ```

Hello ,
Merci beaucoup **PierreFr** pour ton aide ton explication a été très claire , ça a marché pour moi !!

Bonjour @LeoG2,

Par curiosité quelle solution as-tu utilisé ? Le lien symbolique ou bien Express ?

D'autre part, qu'avez vous mis dans "script de lancement de l'application" ?

Merci !

Bonjour à tous,

J'ai fait exactement la solution décrite par PierreFr, qui fonctionne bien, mon s'affiche bien.

MAIS, gros souci : le site n'est pas lu par les crawlers Google, et n'est donc pas indexé.
Est-ce que quelqu'un a déjà eu ce problème ? Savez-vous pourquoi ?

Bonjour,
React est "client-side" pas "server-side", il est donc normal qu'il soit moins bien lu par les crawlers (même si c'est de mieux en mieux).
Pour une application optimisée Seo, regardez Next.js (React avec rendu server et client).
Bonne journée !

Bonjour,

Je reviens sur ce thread quelques temps plus tard pour vous demander qu'elle offre est utilisée pour héberger une application React chez OVH, car je ne vois que des offres Web Cloud avec du PHP et des frameworks malheureusement.
J'ai déjà mon application de build sur un VPS OVH, mais je voudrais donc prendre un hébergement web pour avoir le nom de domaine et le certificat SSL pour sembler plus "pro" pour le client.

Merci d'avance de votre réponse,

Corentin de Maupeou

Hello,
Avec Web Cloud 1, tu as le droit à un seul et unique moteur d'exécution au choix dont node.js. Ce qui devrait répondre à ton besoin.