Comment faire fonctionner le serveur de développement Webpack 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 excuses si ma question semble idiote. Donc je joue avec reactabular.js .

Chaque fois que je fais un, npm startça continue toujours localhost:8080.

Comment puis-je le modifier pour qu'il s'exécute 0.0.0.0:8080pour le rendre accessible au public? J'ai essayé de lire le code source dans le repo ci-dessus mais je n'ai pas réussi à trouver le fichier qui fait ce paramètre.

Aussi, pour ajouter à cela - comment le faire fonctionner sur le port 80si cela est possible?

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

C'est ainsi que je l'ai fait et cela semble 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 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 fonctionnaient sur le même port.

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

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

Je suis nouveau dans le développement JavaScript et ReactJS. Je n'ai pas pu trouver une réponse qui fonctionne pour moi, jusqu'à ce que je la trouve en visualisant le code de react-scripts. En utilisant ReactJS 15.4.1+ en utilisant des scripts de réaction, vous pouvez démarrer avec un hôte et / ou un port personnalisé en utilisant des variables d'environnement:

HOST='0.0.0.0' PORT=8080 npm start

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

La suite a fonctionné pour moi -

1) Package.jsonAjoutez ceci:

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

2) webpack.config.jsAjoutez ceci sous l'objet de configuration que vous exportez:

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

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

4) Une fois que le n ° 3 est compilé et prêt, rendez-vous simplement dans votre navigateur et entrez l'adresse comme 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 le nom de mon ordinateur, alors remplacez-le par le vôtre sur votre machine.

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

"start": "react-scripts start",

à ... ( unix )

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

ou pour ... ( gagner )

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

J'ai eu du mal avec certaines 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 avoir créé mon projet en utilisant vue init webpackune boîte virtuelle Ubuntu 18.04 sous Windows. J'ai configuré vagrant pour transférer le port 3000 vers l'hôte.)

• Malheureusement, la mise npm run dev --host 0.0.0.0 --port 3000ne fonctionnait pas - elle fonctionnait toujours sur localhost: 8080.
• De plus, le fichier webpack.config.jsn'existait pas et sa création n'a pas non plus aidé.
• Ensuite, j'ai trouvé que les fichiers de configuration se trouvent maintenant dans build/webpack.dev.conf.js(et build/webpack.base.conf.jset build/webpack.prod.conf.js). Cependant, cela ne semblait pas être une bonne idée de modifier ces fichiers, car ils lisent en fait l'hôte et le port à partir de process.env.

J'ai donc cherché comment définir les variables process.env et obtenu le succès en exécutant la commande:

HOST=0.0.0.0 PORT=3000 npm run dev

Après avoir fait cela, j'obtiens enfin "Votre application s'exécute ici: http://0.0.0.0:3000 " et je peux enfin le voir en naviguant vers localhost:3000la machine hôte.

EDIT: Une autre façon de le faire est de modifier l'hôte et le port de développement config/index.js.

La suite a fonctionné pour moi dans le fichier de configuration JSON:

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

Pour moi: changer l'hôte d'écoute a fonctionné:

.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

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.jset trouvé cette ligne:

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

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

Dans package.json, modifiez la valeur "start" comme suit

Remarque: exécutez $ sudo npm start , vous devez utiliser sudo exécutez pour exécuter des scripts de réaction sur le port 80

Pour moi, ce code a fonctionné. Ajoutez-le simplement à votrepackage.json fichier:

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

Et exécutez le script "build" en exécutant npm run build

J'ai essayé ceci pour utiliser facilement un autre port:

PORT=80 npm run dev