¿Cómo hacer que el servidor de desarrollo webpack se ejecute en el puerto 80 y en 0.0.0.0 para que sea de acceso público?

Soy nuevo en todo el mundo nodejs / reactjs, así que me disculpo si mi pregunta suena tonta. Así que estoy jugando con reactabular.js .

Cada vez que hago un npm startsiempre se ejecuta localhost:8080.

¿Cómo lo cambio para que se ejecute 0.0.0.0:8080para que sea accesible públicamente? He estado tratando de leer el código fuente en el repositorio anterior, pero no pude encontrar el archivo que realiza esta configuración.

Además, para agregar a eso, ¿cómo hago para que se ejecute en el puerto 80si eso es posible?

Algo como esto funcionó para mí. Supongo que esto debería funcionar para ti.

Ejecute webpack-dev usando esto

webpack-dev-server --host 0.0.0.0 --port 80

Y configure esto en webpack.config.js

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

Nota Si está utilizando carga en caliente, deberá hacerlo.

Ejecute webpack-dev usando esto

webpack-dev-server --host 0.0.0.0 --port 80

Y configure esto en 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()]

Así es como lo hice y parece funcionar bastante bien.

En su archivo webpack.config.js agregue lo siguiente:

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

Obviamente, puede usar cualquier puerto que no entre en conflicto con otro. Menciono el problema del conflicto solo porque pasé alrededor de 4 horas. luchando contra un problema solo para descubrir que mis servicios se estaban ejecutando en el mismo puerto.

Configure webpack (en webpack.config.js) con:

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

Soy nuevo en el desarrollo de JavaScript y ReactJS. No pude encontrar una respuesta que funcione para mí, hasta que lo descubrí viendo el código de los scripts de reacción. Usando ReactJS 15.4.1+ usando react-scripts puede comenzar con un host y / o puerto personalizado usando variables de entorno:

HOST='0.0.0.0' PORT=8080 npm start

Espero que esto ayude a los recién llegados como yo.

Lo siguiente funcionó para mí:

1) En Package.jsonagregar esto:

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

2) webpack.config.jsAgregue esto en el objeto de configuración que exporta:

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

3) Ahora en tipo de terminal: npm run dev

4) Después de que el # 3 compila y está listo, simplemente diríjase a su navegador y escriba la dirección como http://GACDTL001SS369k:8080/

Con suerte, su aplicación debería estar funcionando ahora con una URL externa a la que otros puedan acceder en la misma red.

PD: GACDTL001SS369kera mi nombre de computadora, así que reemplácelo con lo que sea suyo en su máquina.

Si está en una aplicación React creada con 'create-react-app', vaya a su package.jsony cambie

"start": "react-scripts start",

a ... ( unix )

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

o para ... ( ganar )

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

Lo siguiente funcionó para mí en el archivo de configuración JSON:

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

Luché con algunas de las otras respuestas. (Mi configuración es: estoy ejecutando npm run dev, con webpack 3.12.0, después de crear mi proyecto usando vue init webpackun Ubuntu 18.04 virtualbox en Windows. Tengo un vagabundo configurado para reenviar el puerto 3000 al host).

• Desafortunadamente, poner npm run dev --host 0.0.0.0 --port 3000no funcionó --- todavía se ejecutaba en localhost: 8080.
• Además, el archivo webpack.config.jsno existía y crearlo tampoco ayudó.
• Luego encontré que los archivos de configuración ahora se encuentran en build/webpack.dev.conf.js(y build/webpack.base.conf.jsy build/webpack.prod.conf.js). Sin embargo, no parecía una buena idea modificar estos archivos, porque en realidad leen el HOST y el PUERTO process.env.

Así que busqué sobre cómo configurar las variables de process.env y logré el éxito ejecutando el comando:

HOST=0.0.0.0 PORT=3000 npm run dev

Después de hacer esto, finalmente aparece "Su aplicación se está ejecutando aquí: http://0.0.0.0:3000 " y finalmente puedo verla navegando localhost:3000desde la máquina host.

EDITAR: Encontramos otra forma de hacerlo es editando el host de desarrollo y el puerto config/index.js.

Para mí: cambiar el host de escucha funcionó:

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

fue cambiado a:

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

y el servidor comenzó a escuchar en 0.0.0.0

Probé las soluciones anteriores, pero no tuve suerte. Noté esta línea en el paquete de mi proyecto. Json:

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

},

Miré bin/webpack-dev-server.jsy encontré esta línea:

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

Cambié el puerto a 3000. Un enfoque de fuerza bruta, pero funcionó para mí.

En package.json cambie el valor de "inicio" de la siguiente manera

Nota: Ejecute $ sudo npm start , debe usar sudo para ejecutar scripts de reacción en el puerto 80

Para mí, este código funcionó. Solo agrégalo a tu package.jsonarchivo:

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

Y ejecute el script "build" ejecutando npm run build

Intenté esto para usar fácilmente otro puerto:

PORT=80 npm run dev