Comment faire le webpack dev de fonctionnement du serveur sur le port 80 et sur 0.0.0.0 pour le rendre accessible au public?

Je suis nouveau à l'ensemble de la nodejs/reactjs monde alors, toutes mes excuses si ma question semble stupide. Donc je joue avec reactabular.js.

Chaque fois que je fais un npm start elle s'exécute toujours sur localhost:8080.

Comment puis-je modifier pour qu'il marche sur 0.0.0.0:8080 pour le rendre accessible au public? J'ai essayé de lire le code source ci-dessus repo mais impossible de trouver le fichier qui ne ce paramètre.

Aussi, à ajouter à celle - comment puis-je le faire fonctionner sur le port 80 si c'est possible?

InformationsquelleAutor 90abyss | 2015-10-22

217

Quelque chose comme ce qui a fonctionné pour moi. Je suppose que cela devrait fonctionner pour vous.

Exécuter webpack-dev à l'aide de cette
```
webpack-dev-server --host 0.0.0.0 --port 80
```
Et dans la webpack.config.js
```
entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]
```
Note Si vous utilisez chaude de chargement, vous devrez le faire.

Exécuter webpack-dev à l'aide de cette
```
webpack-dev-server --host 0.0.0.0 --port 80
```
Et dans la webpack.config.js
```
entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]
```
- Salut, je suis nouveau à cela, mais souhaitez utiliser redux pour mon script client. Le problème est que l'application est un .net application qui sert le contenu et json points de terminaison. Pour ce faire, pendant le développement, j'ai besoin d'ajouter <script src="http://localhost:8080/webpack-dev-server.js"></script> à la page et installer quelques croix de domaine permettant plugin? Ces outils semblent intéressants, mais ils semblent assumer votre serveur est à nœud ou alors j'ai loupé quelque chose?
- Peut-être que cela va m'aider: webpack.github.io/docs/webpack-dev-serveur.html#proxy je pense que pour utiliser le proxy pour tout, à l'exception des demandes pour les fichiers javascript et de certaines demandes formulées par la webpack serveur, hotloader et redux le temps voyage. donc /data:image ..., ... .js et /sockjs-node...
- Si vous obtenez non Valide-Tête de l'Hôte, vous pouvez être amené à définir disableHostCheck de vrai dans webpack.serve.config.js. Voir github.com/webpack/webpack-dev-server/issues/882. Selon votre situation, il peut être un trou de sécurité, alors soyez prudent.
InformationsquelleAutor Bhargav Ponnapalli
127

C'est la façon dont je l'ai fait et il semble fonctionner assez bien.

En vous webpack.config.js fichier ajouter le texte suivant:
```
devServer: {
    inline:true,
    port: 8008
  },
```
Évidemment, vous pouvez utiliser n'importe quel port qui n'est pas en conflit avec un autre. Je mentionne le problème de conflit uniquement parce que j'ai passé environ 4 heures. lutte contre un problème seulement pour découvrir que mes services ont été en cours d'exécution sur le même port.
- je le prends c'est au lieu de spécifier l'hôte et le port dans la section d'entrée du fichier de config?
- Pourriez-vous s'il vous plaît ajouter un lien vers les documentation?
- Simplement en ajoutant en ligne:vrai a fonctionné pour moi. BTW le webpack fichier que j'ai modifié a 'webpack.dev.conf.js (comme de Mar 2018).
- Meilleure réponse, à mon humble avis. C'est fondamentalement ce qui est dans les docs.
InformationsquelleAutor bkane56
60

Configurer webpack (en webpack.config.js) avec:
```
devServer: {
  //...
  host: '0.0.0.0',
  port: 80,
  //...
}
```
- il ne fonctionne pas pour pour. devServer: { en ligne: vrai, l'hôte: '0.0.0.0', port: 8088 },
- Son travail pour moi, quand j'utilise(webpack.config): devServer: { hôte: "xx.xx.xx.xxx', port: 8089 },
- Cela a résolu un très étroitement liée problème pour moi, tout en essayant de suivre le Moderne Réagir avec Redux cours sur Udemy. Je fais tourner mon environnement de développement sous Windows dans un Les virtual box. Le cours prévoit absolument pas de conseils à propos de la configuration de l'environnement de développement.
- Oui, cela répond à un problème j'ai eu running webpack sur un Cloud9 instance. Merci!
- J'ai été en mesure de changer le numéro de port à l'aide de l'extrait ci-dessus mais l'armée n'a toujours pas de changement. J'ai essayé de faire de l'hôte 0.0.0.0 afin que je puisse accéder au site à partir de l'adresse-ip, mais il ne fonctionne pas. Toute aide dans la manière de réaliser cela?
- C'est la meilleure réponse parce que je suis en utilisant package.json fichier de configuration et que je devrais utiliser un nouvel HÔTE.
InformationsquelleAutor Beder Acosta Borges
25

Je suis nouveau sur le développement JavaScript et ReactJS. J'ai été incapable de trouver une réponse qui fonctionne pour moi, jusqu'à essayer de le comprendre grâce à la visualisation de la réaction des scripts de code. À l'aide de ReactJS 15.4.1+ à l'aide de réagir-scripts, vous pouvez commencer avec un accueil personnalisé et/ou un port en utilisant des variables d'environnement:
```
HOST='0.0.0.0' PORT=8080 npm start
```
J'espère que cela aide les nouveaux arrivants comme moi.

InformationsquelleAutor Anonymous
14

La suite travaillé pour moi -

1) Dans Package.json ajouter ceci:
```
"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}
```
2) Dans webpack.config.js ajouter ce sous configuration de l'objet que vous exportez:
```
devServer: {
    host: "GACDTL001SS369k", //Your Computer Name
    port: 8080
}
```
3) Maintenant, sur le type de terminal: npm run dev

4) Après #3 compile et prêt juste sur la tête de votre navigateur et saisissez l'adresse que http://GACDTL001SS369k:8080/

Votre application devrait être de travailler avec une URL externe qui les autres peuvent accéder sur le même réseau.

PS: GACDTL001SS369k était mon Nom de l'Ordinateur afin de ne remplacer ce qui est la vôtre sur votre machine.

InformationsquelleAutor Sumeet
4

Si vous êtes dans une Réagir Application créée avec "créer-réagir-app' aller à votre package.json et changement

"start": "react-scripts start",

à ... (unix)

"start": "PORT=80 react-scripts start",

ou à ... (gagner)

"start": "set PORT=3005 && react-scripts start"

InformationsquelleAutor R01010010

La suite travaillé pour moi en JSON fichier de config:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

InformationsquelleAutor Roman

1

J'ai du mal avec certains des autres réponses. (Ma configuration est la suivante: je suis en cours d'exécution npm run dev, avec webpack 3.12.0, après la création de mon projet à l'aide de vue init webpack sur une Ubuntu 18.04 virtualbox sous Windows. J'ai vagrant configuré pour rediriger le port 3000 à l'hôte.)
- Malheureusement mettre npm run dev --host 0.0.0.0 --port 3000 ne fonctionne pas--- - il encore, a couru sur localhost:8080.
- En outre, le fichier webpack.config.js n'existait pas et de la création, il n'a pas aidé non plus.
- Puis j'ai trouvé les fichiers de configuration se trouvent maintenant dans build/webpack.dev.conf.js (et build/webpack.base.conf.js et build/webpack.prod.conf.js). Cependant, il ne ressemble pas à une bonne idée de modifier ces fichiers, car ils réellement lu l'HÔTE et le PORT de process.env.
J'ai donc cherché sur comment définir les processus.des variables d'environnement et obtenu des succès en exécutant la commande:
```
HOST=0.0.0.0 PORT=3000 npm run dev
```
Après avoir fait cela, je reçois enfin "Votre demande est en cours d'exécution ici: http://0.0.0.0:3000" et je suis enfin en mesure de le voir en parcourant localhost:3000 de la machine hôte.

EDIT: Trouvé une autre façon de le faire est par l'édition du dev de l'hôte et le port dans les config/index.js.
- Ce doit être la accepté de répondre.
InformationsquelleAutor krubo

Pour moi: la modification de l'écouter hôte travaillé:

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

a été changé pour :

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

et le serveur est démarré à l'écoute sur 0.0.0.0

InformationsquelleAutor Ankush

0

J'ai essayé les solutions ci-dessus, mais pas eu de chance. J'ai remarqué cette ligne dans mon projet de paquet.json:
```
 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"
```
},

J'ai regardé bin/webpack-dev-server.js et trouve cette ligne:
```
.describe("port", "The port").default("port", 8080)
```
J'ai changé le port 3000. Un peu d'une approche par force brute, mais il a travaillé pour moi.

InformationsquelleAutor Sparky1
0

J'ai essayé ce facilement utiliser un autre port:
```
PORT=80 npm run dev
```
InformationsquelleAutor kyrre

Vous devez vous connecter pour publier un commentaire.