Come rendere il server di sviluppo webpack eseguito sulla porta 80 e su 0.0.0.0 per renderlo pubblicamente accessibile?

Question

Sono nuovo di tutto il mondo nodejs/reactjs, quindi mi scuso se il mio qs sembra sciocco. Così sto giocando intorno con questo reactjs applicazione qui: https://github.com/bebraw/reactabular

Ogni volta che faccio un "avvio NPM" funziona sempre su localhost: 8080

Come faccio a cambiare per funzionare su 0.0.0.0:8080 fare è pubblicamente accessibile? Ho cercato di leggere il codice sorgente nel repository sopra, ma non sono riuscito a trovare il file che esegue questa impostazione.

Anche per aggiungere a ciò - come faccio a farlo funzionare sulla porta 80 se è possibile?

Grazie.

Answer 1

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

Run webpack-dev utilizzando questo

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

e impostare questa in webpack.config.js

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

Nota Se si utilizza carico caldo, si dovrà fare questo.

Run webpack-dev utilizzando questo

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

e impostare questa 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()] 

Answer 2

Ecco come ho fatto e sembra funzionare abbastanza bene.

In te webpack.config.js file di aggiungere quanto segue:

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

Ovviamente è possibile utilizzare qualsiasi porta che non sia in conflitto con un altro. 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.

Answer 3

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

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

Answer 4

Sono nuovo di sviluppo JavaScript e ReactJS. Non sono stato in grado di trovare una risposta che funzioni per me, fino a quando non riesco a scoprirlo visualizzando il codice di script di reazione. Utilizzando ReactJS 15.4.1+ utilizzando reagisce-script si può iniziare con un host personalizzato e/o porta utilizzando le variabili d'ambiente:

HOST='0.0.0.0' PORT=8080 npm start 

Speriamo che questo aiuta i nuovi arrivati ​​come me.

Answer 5

In seguito ha lavorato per me -

1) In Package.json aggiungere questo:

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

2) In webpack.config.js aggiungere questo sotto oggetto di configurazione che si esporta:

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

3) Ora per 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/

L'app dovrebbe funzionare ora con un URL esterno a cui altri utenti possono accedere sulla stessa rete.

PS: GACDTL001SS369k era il mio nome computer, quindi sostituirlo con quello che è il proprio sulla macchina.

Answer 6

In seguito ha lavorato per me nel file di configurazione JSON:

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

Answer 7

Se siete in un'applicazione creata con Reagire 'create-reagiscono-app' andare al tuo package.json e cambiare

"start": "react-scripts start",

a ... (unix)

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

o per ... (vincere)

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