Como fazer com que o servidor de desenvolvimento webpack seja executado na porta 80 e na 0.0.0.0 para torná-lo acessível ao público?

Eu sou novo em todo o mundo nodejs / reactjs, então peço desculpas se minha pergunta parecer boba. Então, eu estou brincando com o reactabular.js .

Sempre que eu faço, npm startele sempre funciona localhost:8080.

Como faço para alterá-lo para ser executado 0.0.0.0:8080publicamente? Eu tenho tentado ler o código fonte no repositório acima, mas não consegui encontrar o arquivo que faz essa configuração.

Além disso, para adicionar a isso - como faço para rodar na porta, 80se isso é possível?

Algo assim funcionou para mim. Acho que isso deve funcionar para você.

Execute o webpack-dev usando este

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

E defina isso em webpack.config.js

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

Nota Se você estiver usando carregamento a quente, precisará fazer isso.

Execute o webpack-dev usando este

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

E defina isso em 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()]

Foi assim que eu fiz e parece funcionar muito bem.

No arquivo webpack.config.js, adicione o seguinte:

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

Obviamente, você pode usar qualquer porta que não esteja em conflito com outra. Mencionei a questão do conflito apenas porque passei cerca de 4 horas. lutando contra um problema apenas para descobrir que meus serviços estavam sendo executados na mesma porta.

Configure o webpack (em webpack.config.js) com:

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

Eu sou novo no desenvolvimento de JavaScript e ReactJS. Não consegui encontrar uma resposta que funcionasse para mim, até descobrir isso visualizando o código react-scripts. Usando o ReactJS 15.4.1+ usando o react-scripts, você pode começar com um host e / ou porta personalizados usando variáveis ​​de ambiente:

HOST='0.0.0.0' PORT=8080 npm start

Espero que isso ajude os novatos como eu.

A seguir trabalhou para mim -

1) Package.jsonAdicione isto:

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

2) webpack.config.jsAdicione isto no objeto de configuração que você exporta:

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

3) Agora no tipo de terminal: npm run dev

4) Depois de # 3 compilar e pronto, vá para o navegador e digite o endereço como http://GACDTL001SS369k:8080/

Espera-se que seu aplicativo esteja trabalhando agora com um URL externo que outras pessoas possam acessar na mesma rede.

PS: GACDTL001SS369kera o nome do meu computador, então substitua pelo que for seu na sua máquina.

Se você estiver em um aplicativo React criado com 'create-react-app', vá para o seu package.jsone altere

"start": "react-scripts start",

para ... ( unix )

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

ou para ... ( vitória )

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

A seguir funcionou para mim no arquivo de configuração JSON:

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

Eu lutei com algumas das outras respostas. (Minha configuração é: estou executando npm run dev, com o webpack 3.12.0, depois de criar meu projeto usando vue init webpackuma caixa virtual Ubuntu 18.04 no Windows. Tenho vagrant configurado para encaminhar a porta 3000 para o host.)

• Infelizmente colocando npm run dev --host 0.0.0.0 --port 3000 não funcionou - ainda funcionava no localhost: 8080.
• Além disso, o arquivo webpack.config.jsnão existia e criá-lo também não ajudou.
• Então eu encontrei os arquivos de configuração agora localizados em build/webpack.dev.conf.js(e build/webpack.base.conf.jse build/webpack.prod.conf.js). No entanto, não parecia uma boa ideia modificar esses arquivos, porque eles realmente liam HOST e PORT de process.env.

Então, pesquisei sobre como definir variáveis ​​process.env e obtive sucesso executando o comando:

HOST=0.0.0.0 PORT=3000 npm run dev

Depois de fazer isso, finalmente recebo "Seu aplicativo está sendo executado aqui: http://0.0.0.0:3000 " e finalmente consigo vê-lo navegando para a localhost:3000partir da máquina host.

EDIT: Encontrada outra maneira de fazer isso é editando o host e a porta de desenvolvimento config/index.js.

Para mim: alterar o host de escuta funcionou:

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

foi alterado para:

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

e o servidor começou a ouvir no 0.0.0.0

Eu tentei as soluções acima, mas não tive sorte. Notei esta linha no package.json do meu projeto:

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

}

Eu olhei bin/webpack-dev-server.jse encontrei esta linha:

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

Mudei a porta para 3000. Uma abordagem de força bruta, mas funcionou para mim.

No package.json, altere o valor "start" da seguinte maneira

Nota: Execute $ sudo npm start , você precisa usar o sudo para executar scripts de reação na porta 80

Para mim, esse código funcionou. Basta adicioná-lo ao seu package.jsonarquivo:

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

E execute o script "build" executando npm run build

Eu tentei isso para usar facilmente outra porta:

PORT=80 npm run dev