Como especificar uma porta para executar um projeto baseado em criar-reagir-aplicativo?

Meu projeto é baseado em create-react-app . npm startou, yarn startpor padrão, executará o aplicativo na porta 3000 e não há opção de especificar uma porta no package.json.

Como posso especificar uma porta de minha escolha neste caso? Eu quero executar dois deste projeto simultaneamente (para teste), um na porta 3005e outro é3006

Se você não deseja definir a variável de ambiente , outra opção é modificar a scriptsparte do package.json de:

"start": "react-scripts start"

para

Linux (testado no Ubuntu 14.04 / 16.04) e MacOS (testado por @ aswin-s no MacOS Sierra 10.12.4):

"start": "PORT=3006 react-scripts start"

ou (pode ser) solução mais geral por @IsaacPak

"start": "export PORT=3006 react-scripts start"

Solução Windows @JacobEnsor

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

A lib cross-env funciona em qualquer lugar. Ver resposta de Aguinaldo Possatto para detalhes

Atualização devido à popularidade da minha resposta: Atualmente, prefiro usar variáveis ​​de ambiente salvas em .envarquivo (útil para armazenar conjuntos de variáveis ​​para diferentes deployconfigurações de forma conveniente e legível). Não se esqueça de adicionar *.envem .gitignorese você ainda está armazenando seus segredos em .envarquivos. Aqui está a explicação de por que usar variáveis ​​de ambiente é melhor na maioria dos casos. Aqui está a explicação de por que guardar segredos no ambiente é uma má ideia.

Aqui está outra maneira de realizar essa tarefa.

Crie um .envarquivo na raiz do seu projeto e especifique o número da porta. Gostar:

PORT=3005

Você poderia usar cruzado para definir a porta e ela funcionará no Windows, Linux e Mac.

yarn add -D cross-env

então, no package.json, o link inicial pode ser assim:

"start": "cross-env PORT=3006 react-scripts start",

Você pode especificar uma variável de ambiente denominada PORTpara especificar a porta na qual o servidor será executado.

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

Para o pessoal do Windows, descobri uma maneira de alterar a porta do ReactJS para executar em qualquer porta desejada. Antes de executar o servidor, acesse

 node_modules/react-scripts/scripts/start.js

Nele, procure a linha abaixo e altere o número da porta para a porta desejada.

 var DEFAULT_PORT = process.env.PORT || *4000*;

E você está pronto para ir.

Crie um arquivo com o nome .envno diretório principal package.jsone defina a PORTvariável como o número da porta desejada.

Por exemplo:

.env

PORT=4200

Basta atualizar um pouco em webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

depois corra npm startnovamente.

No seu package.json, vá para scripts e use --port 4000ou set PORT=4000, como no exemplo abaixo:

package.json (Janelas):

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (Ubuntu):

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

Isso funciona no Windows e Linux

package.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

mas você provavelmente prefere criar .env com PORT = 3006 escrito dentro dele

Mudar no meu arquivo package.json também "start": "export PORT=3001 && react-scripts start"funcionou para mim e estou no macOS 10.13.4

Para resumir, temos três abordagens para fazer isso:

1. Defina uma variável de ambiente chamada "PORT"
2. Modifique a chave "start" em "scripts", parte do package.json
3. Crie um arquivo .env e coloque a configuração PORT nele

A mais portátil será a última abordagem. Mas, como mencionado em outro pôster, adicione .env ao .gitignore para não carregar a configuração no repositório de origem público.

Mais detalhes: este artigo

você pode encontrar a configuração de porta padrão ao iniciar seu aplicativo

yourapp / scripts / start.js

role para baixo e altere a porta para o que quiser

const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 4000;

espero que isso possa ajudá-lo;)

Tente o seguinte:

npm start port=30022

Seria bom poder especificar uma porta diferente de 3000 seja, como parâmetro de linha de comando ou variável de ambiente.

No momento, o processo está bastante envolvido:

1. Corre npm run eject
2. Espere que isso termine
3. Edite scripts/start.jse localize / substitua 3000por qualquer porta que você deseja usar
4. Edite config/webpack.config.dev.jse faça o mesmo
5. npm start

No Windows, isso pode ser feito de duas maneiras.

1. Em "\ node_modules \ react-scripts \ scripts \ start.js", procure por "DEFAULT_PORT" e adicione o número da porta desejada.

   Por exemplo: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. No package.json, abra a linha abaixo. "start": "set PORT = 9999 && react-scripts start" Em seguida, inicie o aplicativo usando o NPM start. Ele iniciará o aplicativo na porta 9999.

Que tal dar o número da porta enquanto invoca o comando sem precisar alterar nada no código do aplicativo ou nos arquivos de ambiente? Dessa forma, é possível executar e servir a mesma base de código de várias portas diferentes.

gostar:

$ export PORT=4000 && npm start

Você pode colocar o número da porta que desejar no lugar do valor de exemplo 4000acima.

Caso já tenha feito npm run eject, vá para scripts / start.js e altere a porta em const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 neste caso) para a porta que desejar.

Alterando a porta padrão no React-App

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

Vá para esta linha:

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

Altere o número da porta com o número da porta

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

Por exemplo:

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3100;

Salvar e sair