Come far funzionare il server di sviluppo webpack sulla porta 80 e su 0.0.0.0 per renderlo accessibile al pubblico?

Sono nuovo in tutto il mondo nodejs / reazionejs quindi mi scuso se la mia domanda sembra sciocca. Quindi sto giocando con reattabular.js .

Ogni volta che lo faccio npm startfunziona sempre localhost:8080.

Come faccio a cambiarlo per continuare 0.0.0.0:8080a renderlo accessibile al pubblico? Ho cercato di leggere il codice sorgente nel repository precedente ma non sono riuscito a trovare il file che esegue questa impostazione.

Inoltre, per aggiungere a quello - come posso farlo funzionare sulla porta 80se è possibile?

Qualcosa del genere ha funzionato per me. Immagino che questo dovrebbe funzionare per te.

Esegui webpack-dev usando questo

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

E impostalo in webpack.config.js

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

Nota Se si utilizza il caricamento a caldo, è necessario farlo.

Esegui webpack-dev usando questo

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

E impostalo in 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()]

È così che l'ho fatto e sembra funzionare abbastanza bene.

Nel tuo file webpack.config.js aggiungi quanto segue:

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

Ovviamente puoi usare qualsiasi porta che non sia in conflitto con un'altra. Cito il problema del conflitto solo perché ho trascorso circa 4 ore. combattere un problema solo per scoprire che i miei servizi erano in esecuzione sulla stessa porta.

Configura webpack (in webpack.config.js) con:

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

Sono nuovo nello sviluppo di JavaScript e ReactJS. Non sono stato in grado di trovare una risposta che funzioni per me, fino a quando non ho capito visualizzando il codice di script di reazione. Utilizzando ReactJS 15.4.1+ usando reagenti-script puoi iniziare con un host e / o una porta personalizzati usando le variabili d'ambiente:

HOST='0.0.0.0' PORT=8080 npm start

Spero che questo aiuti i nuovi arrivati ​​come me.

Seguito ha funzionato per me -

1) In Package.jsonaggiungere questo:

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

2) webpack.config.jsAggiungilo sotto l'oggetto config che esporti:

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

3) Ora sul tipo di terminale: npm run dev

4) Dopo aver compilato # 3 e pronto basta andare sul browser e digitare l'indirizzo come http://GACDTL001SS369k:8080/

Si spera che la tua app funzioni ora con un URL esterno a cui altri possano accedere sulla stessa rete.

PS: GACDTL001SS369kera il mio nome computer, quindi sostituiscilo con quello che è tuo sul tuo computer.

Se sei in un'applicazione React creata con 'create -eagire-app' vai su package.jsone cambia

"start": "react-scripts start",

a ... ( unix )

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

o per ... ( vincere )

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

Di seguito ha funzionato per me nel file di configurazione JSON:

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

Ho lottato con alcune delle altre risposte. (La mia installazione è: sto correndo npm run dev, con webpack 3.12.0, dopo aver creato il mio progetto usando vue init webpacksu una virtualbox Ubuntu 18.04 sotto Windows. Ho vagagrant configurato per inoltrare la porta 3000 all'host.)

• Sfortunatamente mettendo npm run dev --host 0.0.0.0 --port 3000 non ha funzionato --- funzionava ancora su localhost: 8080.
• Inoltre, il file webpack.config.jsnon esisteva e la sua creazione non ha aiutato neanche.
• Poi ho scoperto che i file di configurazione ora si trovano in build/webpack.dev.conf.js(e build/webpack.base.conf.jse build/webpack.prod.conf.js). Tuttavia, non sembra una buona idea modificare questi file, perché in realtà leggono l'HOST e il PORT process.env.

Quindi ho cercato su come impostare le variabili process.env e ho raggiunto il successo eseguendo il comando:

HOST=0.0.0.0 PORT=3000 npm run dev

Dopo averlo fatto, finalmente ottengo "La tua applicazione è in esecuzione qui: http://0.0.0.0:3000 " e finalmente riesco a vederlo sfogliando localhost:3000dal computer host.

EDIT: trovato un altro modo per farlo è modificando l'host di sviluppo e la porta config/index.js.

Per me: cambiare l'host di ascolto ha funzionato:

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

è stato modificato in:

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

e il server ha iniziato l'ascolto su 0.0.0.0

Ho provato le soluzioni sopra, ma non ho avuto fortuna. Ho notato questa riga nel pacchetto del mio progetto.json:

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

},

Ho guardato bin/webpack-dev-server.jse trovato questa riga:

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

Ho cambiato la porta in 3000. Un po 'di approccio alla forza bruta, ma ha funzionato per me.

In package.json modificare il valore "start" come segue

Nota: eseguire $ sudo npm start , è necessario utilizzare sudo per eseguire script di reazione sulla porta 80

Per me, questo codice ha funzionato. Aggiungilo sul tuo package.jsonfile:

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

Ed esegui lo script "build" eseguendo npm run build

Ho provato questo per usare facilmente un'altra porta:

PORT=80 npm run dev