Comment faire en sorte que le serveur Webpack dev fonctionne sur le port 80 et sur 0.0.0.0 pour le rendre accessible au public?

Je suis nouveau dans le monde entier de nodejs / reactjs, donc je vous prie de m’excuser si mon QS semble idiot. Donc, je joue avec cette application Reajs ici: https://github.com/bebraw/reactabular

Chaque fois que je fais un “npm start”, il tourne toujours sur localhost: 8080

Comment puis-je le changer pour fonctionner sur 0.0.0.0:8080 pour le rendre accessible au public? J’ai essayé de lire le code source dans le repository ci-dessus, mais j’ai échoué à trouver le fichier qui fait ce réglage.

À append à cela – comment le faire fonctionner sur le port 80 si cela est possible?

Merci.

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

Lancez webpack-dev en utilisant cette

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 un chargement à chaud, vous devrez le faire.

Lancez webpack-dev en utilisant cette

 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()] 

C’est comme ça que je l’ai fait et ça semble bien marcher.

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

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

De toute évidence, vous pouvez utiliser n’importe quel port qui n’est pas en conflit avec un autre. Je mentionne la question du conflit uniquement parce que j’ai passé environ 4 heures. combattre un problème uniquement pour découvrir que mes services s’exécutaient sur le même port.

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

 devServer: { // ... host: '0.0.0.0', port: 80, // ... } 

Je suis nouveau en développement JavaScript et ReactJS. J’ai été incapable de trouver une réponse qui fonctionne pour moi, jusqu’à ce que je le découvre en consultant le code de react-scripts. L’utilisation de ReactJS 15.4.1+ à l’aide de rea-scripts permet de démarrer avec un hôte et / ou un port personnalisé à l’aide de variables d’environnement:

 HOST='0.0.0.0' PORT=8080 npm start 

J’espère que cela aidera les nouveaux arrivants comme moi.

Après a travaillé pour moi –

1) Dans Package.json ajoutez ceci:

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

2) Dans webpack.config.js ajoutez cet object 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 n ° 3 et prêt, http://GACDTL001SS369k:8080/ vous sur votre navigateur et http://GACDTL001SS369k:8080/ adresse http://GACDTL001SS369k:8080/

Nous espérons que votre application fonctionnera maintenant avec une URL externe à laquelle les autres utilisateurs pourront accéder sur le même réseau.

PS: GACDTL001SS369k était mon nom d’ordinateur, donc remplacez-le par ce que vous GACDTL001SS369k sur votre machine.

Si vous êtes dans une application React créée avec ‘create-react-app’, accédez à votre package.json et modifiez

"start": "react-scripts start",

pour … ( unix )

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

ou à … ( gagner )

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

Suivant 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" }, 

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 bin/webpack-dev-server.js trouvé cette ligne:

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

J’ai changé le port en 3000. Une approche un peu brute, mais cela a fonctionné pour moi.

dans package.json j’ai trouvé

“scripts”: {“start”: “node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js”,

vérifier le contenu du fichier de configuration référencé.

vim ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

.describe (“port”, “Le port”). default (“port”, 8080) .describe (“public”, “Le nom d’hôte public / adresse IP du serveur”) .describe (“host”, “Le nom d’hôte / ip address auquel le serveur se liera “). default (” host “,” localhost “);

changer la dernière ligne de localhost à 0.0.0.0

.describe (“host”, “Le nom d’hôte / l’adresse IP auquel le serveur va se connecter”). default (“host”, “0.0.0.0”);

J’ai essayé de changer le port par défaut de 8080 à 80, mais j’ai reçu ce message d’erreur.

r $ npm start

redux-simple-starter@1.0.0 Noeud start / home / ubuntu / ReduxSimpleStarter ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

events.js: 183 jeter; // Événement “erreur” non géré

Auparavant, certains serveurs n’aimaient pas les numéros de port <8000.

pour l’instant j’ai npm commencer à exécuter le serveur et à s’y connecter sur l’instance Ubuntu AWS EC2 sur cette adresse.

http: //xx.xx.xx.xx: 8080 / webpack-dev-server /

mais au lieu de charger ma page Web, j’obtiens cette erreur 🙁

En-tête d’hôte non valide