créer-réagir-app mnp exécuter commande de construction

J'ai construit un petit Réagir application avec créez-réagir-app, et il fonctionne très bien à partir du serveur local après l'exécution de npm start. OK pour l'instant.

Cependant, lorsque je lance npm run build, le processus semble fonctionner correctement (création de dossier de création, qui contient le logiciel et le fichier js index.html fichier), mais quand je l'ouvre index.html dans mon navigateur, il ne rend rien. Ce qui me manque?

De côté: j'ai aussi essayé de le télécharger vers un serveur distant et quand je suis allé à l'URL, le navigateur est revenu avec...

Interdit: Vous n'avez pas la permission d'accéder à /sur ce serveur.

...si quelqu'un a une idée de comment résoudre ce que je serais aussi de l'apprécier.

Voyez-vous une erreur js dans le navigateur de la console lors du chargement de la page d'index?
Utilisation webpack. Il y a tellement de façons de créer une réagir app. Webpack émet un faisceau de fichier qui est invisible lorsque nous sommes en cours d'exécution webpack serveur par npm run start. Je ne comprends pas pourquoi vous êtes à la construction d'un autre fichier séparément. Dans mon cas, je viens de créer index.html fichier, index.js fichier et d'autres fichiers js. Utilisé webpack à intégrer.
Charan Cerise: je suis déjà à l'aide de webpack. créer-réagir-app est un sur mesure webpack de configuration. La ligne de commande npm run build crée la index.html fichier, et le javascript correspondant est tous regroupés dans un minifiés fichier js, tous placés dans un dossier unique, la "construction".

OriginalL'auteur Paulos3000 | 2016-09-30

  1. 19

    Cependant, lorsque je lance mnp exécuter construction, le processus semble fonctionner correctement (création de dossier de création, qui contient le logiciel fichier js et html.fichier d'index), mais quand je l'ouvre index.html dans mon navigateur, il ne rend rien. Ce qui me manque?

    Lorsque vous exécutez npm run build, il imprime les instructions pertinentes:

    créer-réagir-app mnp exécuter commande de construction

    Vous ne pouvez pas ouvrir index.html parce qu'il est censé être servi avec un fichier statique serveur.

    C'est parce que la plupart de Réagir aux applications d'utiliser côté client de routage, et vous ne pouvez pas faire cela avec file:// Url.

    Dans la production, vous pouvez utiliser Nginx, Apache, Nœud (par exemple, l'Express), ou toute autre serveur de servir statique actifs. Assurez-vous juste que si vous utiliser côté client, de routage, de vous servir index.html pour n'importe quel inconnu demande, comme /*, et pas seulement pour les /.

    Dans le développement, vous pouvez utiliser pushstate-server pour cela. Il fonctionne avec le côté client de routage. C'est exactement ce que les instructions imprimées vous suggérons de le faire.

    J'ai aussi essayé de le télécharger vers un serveur distant et quand je suis allé à l'URL, le navigateur est revenu avec un Interdit: Vous n'avez pas la permission d'accéder à /sur ce serveur.

    Vous avez besoin de télécharger le contenu de la build dossier, pas le build dossier lui-même. Sinon le serveur ne peut pas trouver votre index.html parce qu'il est à l'intérieur de build/index.html, et donc il échoue. Si votre serveur ne détecte pas un haut niveau index.html, veuillez vous référer à la documentation de votre serveur sur la configuration de fichiers desservies par défaut.

    Ok, merci. J'ai entendu parler d'Heroku - blog.heroku.com/deploying-react-with-zero-configuration - je vais vous la lire, mais est-ce une façon de déploiement d'un live (pas en local) réagissent application sur un serveur distant?
    Yep. Sinon, vous pouvez copier le dossier de création à distance de votre serveur, vous avez accès à et de configurer n'importe quel serveur statique de logiciels pour le servir.
    Fonctionne pour moi! Réponse courte: la Confiance les instructions que vous voyez à partir de npm run build.

    OriginalL'auteur Dan Abramov

  2. 4

    Ici Vous pouvez résoudre ce problème en 2 façons possibles.

    1.De modifier le routage de l'histoire "hashHistory" au lieu de browserHistory à la place de 

     <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

    Maintenant de construire l'application à l'aide de la commande 

    sudo npm run build

    Puis placez le dossier de création dans votre var/www/dossier, et Maintenant l'application fonctionne bien avec plus de # tag dans chaque et chaque url. comme

    localhost/#/home
    localhost/#/aboutus

    Solution 2 : Sans # balise à l'aide de browserHistory,

    Définir votre histoire = {browserHistory} dans votre Routeur,Maintenant, de le construire à l'aide de sudo npm exécuter construire.

    Vous avez besoin pour créer la "conf" fichier de résoudre le 404 not found page,
    le fichier conf devrait ressembler à ceci.

    ouvrez votre terminal tapez les commandes ci-dessous

    cd /etc/apache2/sites-available
    ls
    nano échantillon.conf
    Ajouter le contenu ci-dessous.

     <VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

    Maintenant, vous avez besoin pour permettre à l'échantillon.fichier conf à l'aide de la commande suivante

    cd /etc/apache2/sites-available
sudo a2ensite sample.conf

    ensuite il va vous demander de recharger le serveur apache,à l'aide de
    sudo service apache2 reload ou redémarrer

    ensuite, ouvrez votre localhost/dossier de création et ajoutez le .fichier htaccess avec le contenu de ci-dessous.

       RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

    Maintenant, l'application fonctionne normalement.

    Remarque: le changement de ip 0.0.0.0 à votre adresse ip locale.

    J'espère que ça sera utile à d'autres personnes.

    OriginalL'auteur Venkatesh Somu

  3. 2
    1. cd de votre dossier de création,
    2. python -m SimpleHTTPServer 8080 pour démarrer un serveur sur le port 8080,
    3. aller à l'adresse localhost:8080/index.html dans votre navigateur.
    J'ai essayé la même chose. Elle fonctionne. Mais la route ne change pas. Aucune Idée pourquoi?
    Super simple moyen de lancer une production de construire des fichiers dans le système local. Merci
    Une autre méthode simple consiste à exécuter serve -s build

    OriginalL'auteur Abdullah Malik

  4. 1

    J'ai essayé de lancer la même commande et de réagir application a également été montrant un écran blanc.
    principal fichier js prenait le chemin relatif vers le fichier et montrant erreur lorsque j'essaie d'ouvrir le fichier js dans le nouveau navigateur "Votre fichier n'a pas été trouvé"
    Je le fais pour chemin d'accès absolu et sa fonctionne très bien.

    OriginalL'auteur Pawan Jasoria

  5. 1

    vous ne pouvez pas exécuter la production de construire en cliquant sur index.html, vous devez modifier votre script comme ci-dessous.

    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

    après l'exécution de mnp de l'exécution du script de build, run mnp de l'exécution du script de déploiement, vous obtiendrez quelque chose comme ceci, c'est là que vous pouvez charger votre production de construire.

    npm install-g servir avant de lancer mnp de l'exécution du script de déploiement.

    créer-réagir-app mnp exécuter commande de construction

    OriginalL'auteur Viraj

  6. 1

    Serveur Web de google Chrome extension est super facile à utiliser. Installer et paramétrer le répertoire ~/mon-réagir-app/construire/

    OriginalL'auteur blackops

  7. 0

    Après la construction de votre demande par le biais de create-react-app créer-réagir-app

    Commande exécuter npm run build Après que la commande run npm install -g serve & enfin serve -s build

    Des informations plus détaillées peuvent être trouvées à partir d'ici créer-réagir-app-déploiement

    OriginalL'auteur Anurag Tomar

  8. 0

    ouvrir index.html fichier.
    faites défiler près de la fin et vous verrez

    <script src="/static/js/2.b5125f99.chunk.js"></script><script src="/static/js/main.fcdfb32d.chunk.js"></script></body></html>

    juste ajouter un point à l'avant des deux attribut src:

    <script src="./static/js/2.b5125f99.chunk.js"></script><script src="./static/js/main.fcdfb32d.chunk.js"></script></body></html>

    aussi, si vous avez des styles vous devez également faire défiler près de début, où vous pourrez voir:

    <link href="/static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

    et également placer un point en face de l'attribut href

    <link href="./static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

    REMARQUE: le nom de fichier peut/ne sera pas la même pour vous

    veillez également à ce changement lors de l'utilisation d'un serveur ou tout simplement courir mnp exécuter construire à nouveau(je n'ai aucune idée de ce qui se passe si vous n'avez pas)

    OriginalL'auteur kyle belle