web-dev-qa-db-fra.com

Comment servir des fichiers statiques ReactJS avec expressJS?

Le problème

J'ai correctement servi le fichier index.html de mon application React, mais le index.js qui remplace <root> dans le fichier html avec mon premier React ne se déclenche pas sur ReactDOM.render. Comment obtenir le index.js fichier pour commencer? Si ma compréhension de la diffusion d'une application React est faussée à certains égards, j'apprécierais grandement la clarification.

Structure des dossiers

  • / - contient tous les fichiers côté serveur, y compris server.js
  • / client/- contient tous les fichiers React
  • / client/build/- contient tous les fichiers clients prêts pour la production
    • / client/build/index.html
    • / client/build/statique/js/main.[hash].js - semble être une version réduite de index.js qui contient le ReactDOM.render pour mon React app

Déploiement actuel

  • J'utilise l'application create-react-Facebook de Facebook pour le répertoire/client /, y compris npm run build pour remplir automatiquement/client/build /

Extraits de fichiers

// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));

Cela charge avec succès le fichier index.html par défaut fourni par create-react-app

// index.html
<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

La section de code ci-dessus peut/peut ne pas être utile, mais c'est le fichier html par défaut fourni avec create-react-app. Dois-je remplacer la balise noscript par une balise de script qui fait référence au _ index.js fichier? J'ai essayé cela, et rien n'a changé, mais c'est peut-être à cause d'un cheminement relatif incorrect.

reactjsexpressstaticservercreate-react-app
10
gpsugy

Après avoir essayé beaucoup de choses différentes par essais/erreurs, la solution est assez simple:

Servez le dossier/client/build dans l'appel statique, comme ceci:

app.use(express.static(path.join(__dirname, '../client/build')));
17
gpsugy