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


212

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


4
Apenas mencione aqui rapidamente que para os projetos Next.js. você usará apenas next -p 3005se alguém cair aqui procurando a mesma coisa.
Giovannipds

Respostas:


397

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.


33
para Windows:"start": "set PORT=3005 && react-scripts start"
Jacob Ensor

3
para ubuntu: "start": "export PORT=3006 react-scripts start"trabalhou para mim
Isaac Pak

Para Windows definir PORT = 3005 && reagem-scripts de início trabalhou para mim :)
Skylin R

2
"start": "export PORT=3001 && react-scripts start"Este funcionou para mim no Ubuntu 16
Code Cooker

2
@ElRuso Se o projeto for usado apenas em um ambiente específico, eu concordo, é um exagero. O caso de uso para algo como cross-envé quando você tem vários desenvolvedores trabalhando em sistemas diferentes. Talvez alguns prefiram MACs, e outros preferem o Windows. Ou, em outro cenário, todos os desenvolvedores usam o Windows, mas você deseja adicionar uma variável de ambiente que será executada no servidor de CI / CD que executa o Ubuntu. Espero que ajude.
MauricioLeal

132

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

2
O uso de um arquivo .env é suportado imediatamente com o create-react-app. Apenas certifique-se de não verificar .env no controle de origem se você colocar informações confidenciais nele.
Don

11
A é o método descrito na app criar-reagir README.md
Travis Aço

3
@carkod Na verdade, eles estão dizendo para colocar os dados confidenciais em um arquivo de outro do que .env. No caso deles, eles recomendam o uso .env.localque você não deve verificar no controle de origem, para que possa verificar com segurança .envno controle de origem. Portanto, o mesmo conselho ainda se aplica.
Don

1
Gosto mais dessa resposta, pois ela utiliza as opções de configuração disponíveis, enquanto as outras soluções parecem mais truques / hacks.
Hans Wouters

1
Isso funciona para MacOSX e Windows com o mesmo arquivo package.json.
Keith John Hutchison

25

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",

Isso é exatamente o que eu precisava. Algo que pode funcionar bem nas plataformas mais comuns, por exemplo, minha configuração inicial é o Windows e o trabalho é Mac.
icosmin 16/04

23

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

1
vou executar dois aplicativos de reação, um deve estar na porta 3005 e o outro deve estar na 3006
letthefireflieslive

1
@lem Você pode abrir dois consoles, definir variáveis ​​de ambiente para 3005 e 3006 em cada um deles e executar o aplicativo.
Harshil Lodhi

1
"start": "set PORT=3005 react-scripts start"apenas definir a porta, mas não executar o aplicativo
letthefireflieslive

5
@legnoban adicione um && entre os 2 comandos. "start": "set PORT=3005 && react-scripts start"
Jacob Ensor

5

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.


13
Cuidado: as alterações que você fizer dentro do node_modulesdiretório serão surpreendidas quando os pacotes forem atualizados. Provavelmente é melhor usar uma das outras respostas.
Don

upvoted porque dá uma visão sobre onde eles definir esta imagem (acabou aqui enquanto eu estava simplesmente tentando entender o que criar-reagir app faz por trás da cortina)
ozgeneral

4

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

isso funcionará mesmo sem ejetar e é o método descrito na documentação
Akshay Vijay Jain

@AkshayVijayJain Obrigado pelo seu feedback. Eu editei a resposta.
Muhammed Ozdogan 16/06

3

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.


3

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"
}

2
Considere adicionar uma pequena prosa para explicar a intenção do seu código.
entpnerd 15/02

2

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


que não funciona no Windows:'PORT' is not recognized as an internal or external command, operable program or batch file.
mgPePe

Obrigado por apontar isso. Corrigi o comando, você pode tentar agora.
Metu

1

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


1

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


1

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;)


Não há roteiros dir no meu criar-reagir app
AlxVallejo

1
Para que esta resposta funcione, você precisa yarn ejectprimeiro.
Zach Bloomquist


0

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

sim, eu gostaria de ser capaz de especificar a porta como uma variável de linha de comando, (somente) quando eu tenho outro servidor que já utilizam 3000.
SherylHohman

0

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.


0

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.


0

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.


-1

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


3
É claro que essa mudança estará disponível apenas para você e possivelmente destruída na próxima vez que você executar npm/yarn install. A alteração de arquivos node_modulesdeve ser evitada.
MEMark 9/04
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.