0
votes

Réagir de l'application reste vide avec Express pour déployer sur Heroku

Je ne peux pas comprendre comment obtenir mon application de réaction (créée avec Create-React-APP) pour fonctionner lors du déploiement de Heroku.

sans Heroku Tout fonctionne bien. J'utilise npm start code> qui utilise réacteur-scripts démarrez code> pour démarrer l'application réactive et tout fonctionne localement comme prévu. Maintenant que je veux que l'application fonctionne sur Heroku, je dois utiliser Express pour servir son contenu au client. J'ai essayé cela mais malheureusement mon navigateur reste vide. Juste un écran blanc, rien d'autre. Pas même des messages d'erreur ?! Ni dans la console ni dans la console du navigateur. P>

La structure de mon serveur ressemble à ceci: p>

  • public
    • FAVICON.ICO LI>
    • index.html li>
    • manifeste.json li>
    • etc ... li> ul> li>
    • src
      • app.css li>
      • app.js li>
      • index.css li>
      • index.js li>
      • etc ... li> ul> li>
      • paquet-serrure.json li>
      • paquet.json li>
      • procfile li>
      • SERVER.JS LI> ul>

        Voici mon fichier Server.js: p>

        p>

        const path = require('path');
        const express = require('express');
        const app = express();
        const port = process.env.PORT || 3000;
        
        app.use(express.static(path.join(__dirname, 'public')));
        app.use(express.static(path.join(__dirname, 'src')));
        
        app.get('/', (req, res) => {
           res.sendFile(path.join(publicPath, 'index.html'));
        });
        
        app.listen(port, () => {
           console.log('Server is running on port ' + port);
        });


2 commentaires

Avez-vous un script dans votre package.json ? Si oui, pouvez-vous fournir celui-là s'il vous plaît? Heroku gère NPM Run Catégorie Par défaut et sert à ce quefle au lieu du code source réel. Le problème pourrait être là-bas. Peut-être fournir votre procfile également, cela pourrait éclairer ce que Heroku essaie de faire.


Oui j'ai un script de construction dans mon package.json: "build": "réact-scripts construire" . Et mon procfile ne contient que: Web: NPM Démarrer . Mais jusqu'à présent, j'essaie juste de préparer mon projet pour Heroku. Donc, je veux l'exécuter localement d'abord, deuxièmement, en utilisant Heroku local Web et si les deux vont bien, je veux à nouveau le pousser à Heroku.


3 Réponses :


0
votes

mon serveur.js xxx

mon procfile selon HEROKU: xxx

Veuillez noter que vous devriez avoir construire < / Code> Dossier où la production serait ramassée par Heroku. En plus paquet.json.

mon paquet.json xxx


1 commentaires

Merci pour vos idées! Je ne savais pas que j'étais censé exécuter NPM Run Build et Servez le ./build Directory au lieu de ./public et ./src. Changer cela a fonctionné pour moi!



0
votes

Heroku exécutera NPM Exécuter Build code> Par défaut lors du déploiement. Dans votre cas, c'est réacteur-scripts Construire code>. Ce script va regrouper votre code dans un dossier code> Build code>.


express h1>

Cela signifie que votre middleware express devrait servir des fichiers statiques de votre Build Code> dossier au lieu de votre dossier src code>. p> xxx pré>

devrait être: p> xxx pré>

(Remarque: Je suggère d'utiliser une variable d'environnement pour ce processus.env.static_dir code> ou quelque chose de similaire. De cette façon, vous pouvez facilement basculer entre src code> pour le développement local et Construire code> pour le code de production et le déploiement.) em> p>

procfile h1>

Vos états de procfile que commandez Heroku devrait exécuter après le déploiement de votre code. Sachant que Heroku exécute NPM Run Build code> Vous devez servir votre paquet au lieu de votre code source. P>

Vous pouvez le faire en modifiant votre procfile comme ceci: P>

web:node server.js


2 commentaires

Merci beaucoup! Je comprends maintenant comment toutes ces pièces conviennent ensemble et je l'ai eu du travail!


@Tayfe génial d'entendre! Si cette réponse résolvait votre problème, veuillez la marquer comme réponse acceptée pour référence future. Donc, d'autres qui ont des problèmes similaires pourraient trouver votre question et être aidés comme l'accoupler.



0
votes

Ouais, Créer-réact-app code> ne joue pas bien avec le nœud. C'est ce que j'ai fait pour résoudre mon déploiement.

tl; dr code>: Puisque vous avez créé l'application réagissante avec Créer-réact-app code> Vous devez utiliser un autre buildpack tel que: github.com/mars/create-react-app-buildpack.git p>

Un exemple de flux de travail prélevé de Heroku's DOCS : P>

heroku ps:scale web=1:free


0 commentaires