Wie kann der Webpack-Entwicklungsserver auf Port 80 und 0.0.0.0 ausgeführt werden, um ihn öffentlich zugänglich zu machen?

Ich bin neu in der ganzen Welt der Nodejs / Reactjs, also entschuldige mich, wenn meine Frage albern klingt. Also spiele ich mit reactabular.js herum .

Wann immer ich ein mache npm start, läuft es immer weiter localhost:8080.

Wie ändere ich es so, dass es ausgeführt wird 0.0.0.0:8080, um es öffentlich zugänglich zu machen? Ich habe versucht, den Quellcode im obigen Repo zu lesen, konnte jedoch die Datei mit dieser Einstellung nicht finden.

Hinzu kommt: Wie kann ich es auf dem Port ausführen, 80wenn dies überhaupt möglich ist?

So etwas hat bei mir funktioniert. Ich denke, das sollte für Sie funktionieren.

Führen Sie webpack-dev damit aus

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

Und setzen Sie dies in webpack.config.js

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

Hinweis Wenn Sie Hot Loading verwenden, müssen Sie dies tun.

Führen Sie webpack-dev damit aus

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

Und setzen Sie dies 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()]

So habe ich es gemacht und es scheint ziemlich gut zu funktionieren.

Fügen Sie in Ihrer Datei webpack.config.js Folgendes hinzu:

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

Natürlich können Sie jeden Port verwenden, der nicht mit einem anderen in Konflikt steht. Ich erwähne das Konfliktproblem nur, weil ich ungefähr 4 Stunden verbracht habe. Ich habe ein Problem bekämpft, nur um festzustellen, dass meine Dienste auf demselben Port ausgeführt wurden.

Konfigurieren Sie das Webpack (in webpack.config.js) mit:

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

Ich bin neu in der JavaScript-Entwicklung und in ReactJS. Ich konnte keine Antwort finden, die für mich funktioniert, bis ich sie durch Anzeigen des React-Scripts-Codes herausgefunden habe. Wenn Sie ReactJS 15.4.1+ mit React-Skripten verwenden, können Sie mit einem benutzerdefinierten Host und / oder Port beginnen, indem Sie Umgebungsvariablen verwenden:

HOST='0.0.0.0' PORT=8080 npm start

Hoffentlich hilft das Neulingen wie mir.

Folgendes hat bei mir funktioniert -

1 in Package.json Fügen Sie Folgendes hinzu:

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

2) webpack.config.jsFügen Sie dies unter dem exportierten Konfigurationsobjekt hinzu:

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

3) Jetzt am Terminaltyp: npm run dev

4) Nachdem # 3 kompiliert und fertig ist, gehen Sie einfach zu Ihrem Browser und geben Sie die Adresse als ein http://GACDTL001SS369k:8080/

Ihre App sollte jetzt hoffentlich mit einer externen URL arbeiten, auf die andere im selben Netzwerk zugreifen können.

PS: GACDTL001SS369kWar mein Computername, also ersetzen Sie ihn durch Ihren Computer.

Wenn Sie sich in einer mit 'create-react-app' erstellten React-Anwendung befinden, gehen Sie zu Ihrer package.jsonund ändern Sie diese

"start": "react-scripts start",

zu ... ( Unix )

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

oder um ... (zu gewinnen )

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

Folgendes hat bei mir in der JSON-Konfigurationsdatei funktioniert:

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

Ich kämpfte mit einigen der anderen Antworten. (Mein Setup lautet: Ich verwende npm run devWebpack 3.12.0, nachdem ich mein Projekt mit vue init webpackeiner Ubuntu 18.04-Virtualbox unter Windows erstellt habe. Ich habe vagrant so konfiguriert, dass Port 3000 an den Host weitergeleitet wird.)

• Leider setzen npm run dev --host 0.0.0.0 --port 3000 nicht funktioniert --- es lief immer noch auf localhost: 8080.
• Außerdem die Datei webpack.config.js nicht und das Erstellen half auch nicht.
• Dann habe ich festgestellt, dass sich die Konfigurationsdateien jetzt in build/webpack.dev.conf.js(und build/webpack.base.conf.jsund build/webpack.prod.conf.js) befinden. Es schien jedoch keine gute Idee zu sein, diese Dateien zu ändern, da sie tatsächlich HOST und PORT von lesen process.env.

Also suchte ich nach dem Setzen von process.env-Variablen und erzielte Erfolg, indem ich den folgenden Befehl ausführte :

HOST=0.0.0.0 PORT=3000 npm run dev

Danach erhalte ich endlich "Ihre Anwendung läuft hier: http://0.0.0.0:3000 " und ich kann sie endlich sehen, indem ich zu navigierelocalhost:3000 vom Host-Computer aus zu .

BEARBEITEN: Eine andere Möglichkeit besteht darin, den Entwicklerhost und den Port zu bearbeiten config/index.js.

Für mich: Das Ändern des Listen-Hosts hat funktioniert:

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

wurde geändert in:

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

und der Server begann 0.0.0.0 abzuhören

Ich habe die oben genannten Lösungen ausprobiert, hatte aber kein Glück. Ich habe diese Zeile im package.json meines Projekts bemerkt:

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

},

Ich bin/webpack-dev-server.jshabe diese Zeile angeschaut und gefunden:

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

Ich habe den Port auf 3000 geändert. Ein bisschen Brute-Force-Ansatz, aber es hat bei mir funktioniert.

Ändern Sie in package.json den Wert "start" wie folgt

Hinweis: Führen Sie $ sudo npm start aus . Sie müssen sudo verwenden , um Reaktionsskripte auf Port 80 auszuführen

Bei mir hat dieser Code funktioniert. Fügen Sie es einfach Ihrer package.jsonDatei hinzu:

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

Führen Sie das Skript "build" aus, indem Sie es ausführen npm run build

Ich habe versucht, einfach einen anderen Port zu verwenden:

PORT=80 npm run dev