web-dev-qa-db-fra.com

Comment faire en sorte que le serveur de développement Webpack s'exécute sur le port 80 et sur la version 0.0.0.0 pour le rendre accessible au public?

Je suis nouveau dans le monde des nœuds/réacteurs, alors excuses-moi si mon qs a l'air idiot. Donc, je joue avec cette application reactjs ici: https://github.com/bebraw/reactabular

Chaque fois que je fais un "démarrage npm", il fonctionne toujours sur localhost: 8080

Comment puis-je le changer pour qu'il fonctionne sous 0.0.0.0:8080 afin de le rendre accessible au public? J'ai essayé de lire le code source dans le dépôt ci-dessus mais je n'ai pas trouvé le fichier qui fait ce réglage.

Ajoutons également à cela - comment puis-je le faire fonctionner sur le port 80 si cela est possible?

Merci.

node.jsreactjsnpmwebpackwebpack-dev-server
143
90abyss

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

Exécutez webpack-dev en utilisant ceci

webpack-dev-server --Host 0.0.0.0 --port 80

Et définissez ceci dans webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

Remarque Si vous utilisez le chargement à chaud, vous devrez le faire.

Exécutez webpack-dev en utilisant ceci

webpack-dev-server --Host 0.0.0.0 --port 80

Et définissez ceci dans 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()]
185
Bhargav Ponnapalli

C'est comme ça que je l'ai fait et ça semble plutôt bien fonctionner.

Dans votre fichier webpack.config.js, ajoutez ce qui suit:

devServer: {
    inline:true,
    port: 8008
  },

Évidemment, vous pouvez utiliser n'importe quel port qui ne soit pas en conflit avec un autre. Je mentionne la question du conflit uniquement parce que j'ai passé environ 4 heures. lutter contre un problème seulement pour découvrir que mes services fonctionnaient sur le même port.

114
bkane56

Configurez le Webpack (dans webpack.config.js) avec:

devServer: {
  // ...
  Host: '0.0.0.0',
  port: 80,
  // ...
}
51
Beder Acosta Borges

Je suis nouveau dans le développement JavaScript et ReactJS. Je suis incapable de trouver une réponse qui fonctionne pour moi, jusqu'à le trouver en consultant le code de réact-scripts. En utilisant ReactJS 15.4.1+ en utilisant react-scripts, vous pouvez commencer avec un hôte et/ou un port personnalisé à l'aide de variables d'environnement:

Host='0.0.0.0' PORT=8080 npm start

Espérons que cela aide les nouveaux arrivants comme moi.

18
Anonymous

Après travaillé pour moi - 

1) Dans Package.json, ajoutez ceci:

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2) Dans webpack.config.js, ajoutez cet objet sous config que vous exportez:

devServer: {
    Host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) Maintenant sur le type de terminal: npm run dev 

4) Après la compilation et la préparation du n ° 3, il suffit de vous rendre sur votre navigateur et de saisir l’adresse au format http://GACDTL001SS369k:8080/.

Espérons que votre application fonctionne maintenant avec une URL externe à laquelle d'autres personnes peuvent accéder sur le même réseau.

PS: GACDTL001SS369k était mon nom d’ordinateur alors remplacez-le par ce qui est le vôtre sur votre machine.

9
Sumeet

Si vous êtes dans une application React créée avec 'create-react-app', allez dans votre package.json et modifiez 

"start": "react-scripts start",

à ... ( unix )

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

ou pour ... ( gagner )

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

4
R01010010

Après a travaillé pour moi dans le fichier de configuration JSON:

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

J'ai essayé d'utiliser facilement un autre port:

PORT=80 npm run dev
0
kyrre

J'ai essayé les solutions ci-dessus, mais je n'ai pas eu de chance. J'ai remarqué cette ligne dans le package.json de mon projet:

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

J'ai regardé bin/webpack-dev-server.js et trouvé cette ligne:

.describe("port", "The port").default("port", 8080)

J'ai changé le port à 3000. Un peu d'une approche de force brute, mais cela a fonctionné pour moi.

0
Sparky1

J'ai eu du mal avec certaines des autres réponses. (Ma configuration est la suivante: j'exécute npm run dev avec Webpack 3.12.0 après avoir créé mon projet à l'aide de vue init webpack sur une machine virtuelle Ubuntu 18.04 sous Windows. J'ai configuré vagrant pour transférer le port 3000 vers l'hôte.)

  • Malheureusement, mettre npm run dev --Host 0.0.0.0 --port 3000 n'a pas fonctionné - il fonctionnait toujours sur localhost: 8080.
  • De plus, le fichier webpack.config.js n’existait pas et sa création n’a pas aidé non plus.
  • Ensuite, j'ai trouvé que les fichiers de configuration sont maintenant situés dans build/webpack.dev.conf.js (et build/webpack.base.conf.js et build/webpack.prod.conf.js). Cependant, il ne semblait pas judicieux de modifier ces fichiers, car ils lisaient réellement l'hôte et le port depuis process.env.

J'ai donc cherché à propos de comment définir les variables process.env et j'ai réussi en exécutant la commande:

Host=0.0.0.0 PORT=3000 npm run dev

Après cela, je reçois enfin "Votre application s'exécute ici: http://0.0.0.0:3000 " et je peux enfin le voir en parcourant le chemin vers localhost:3000 à partir de la machine hôte.

EDIT: une autre façon de le faire consiste à éditer l’hôte et le port dev dans config/index.js.

0
krubo

Pour moi: changer l'écoute

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

a été changé en:

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

et le serveur a commencé à écouter sur 0.0.0.0

0
Ankush