Как указать порт для запуска проекта на основе create-react-app?

мой проект основан на create-react-app. npm start или yarn start по умолчанию приложение будет запущено на порт 3000 и там нет возможности указать порт в пакете.формат JSON.

как я могу указать порт по моему выбору в этом случае? Я хочу запустить два из этого проекта одновременно (для тестирования), один в port 3005 и 3006

11 60
npm reactjs

11 ответов:

если вы не хотите устанавливать переменные среды, другой вариант-изменить scripts часть пакета.json от:

"start": "react-scripts start"

до

Linux (проверено на Ubuntu 14.04/16.04) и MacOS (проверено @aswin-s на MacOS Sierra 10.12.4):

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

или (может быть) более общее решение @IsaacPak

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

Windows @JacobEnsor решение

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

обновление из-за популярности моего ответа: в настоящее время я предпочитаю использовать переменные среды, сохраненные в .env file (полезно хранить наборы переменных для разных deploy конфигурации в удобной и читаемой форме). Не забудьте добавить *.env на .gitignore если вы все еще храните свои секреты в .env файлы. здесь - это объяснение того, почему использование переменных среды в наиболее случаи. здесь это объяснение того, почему хранение секретов в окружающей среде является плохой идеей.

103

вот еще один способ выполнить эту задачу.

создать .env-файл в корневом каталоге проекта и укажите там номер порта. Например:

порт=3005

46

Вы можете указать переменную окружения с именем PORT чтобы указать порт, на котором будет работать сервер. 

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

вы могли бы использовать cross-env установить порт, и он будет работать на Windows, Linux и Mac.

yarn add -D cross-env

потом в пакет.json начальная ссылка может быть такой:

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

для моих людей с windows я обнаружил способ изменить порт ReactJS для запуска на любом порту, который вы хотите.Перед запуском сервера перейдите в 

node_modules/react-scripts/scripts/start.js

в нем найдите строку ниже и измените номер порта на нужный порт

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

и вы хорошо идти.

1

было бы неплохо иметь возможность указать порт, отличный от 3000, либо в качестве параметра командной строки, либо в качестве переменной среды.

прямо сейчас, процесс довольно сложный:

  1. выполнить npm run eject
  2. подождите, пока это закончится
  3. Edit scripts/start.js найти/заменить 3000 с любым портом, который вы хотите использовать
  4. Edit config/webpack.config.dev.js и сделать то же самое
  5. npm start
1

изменение в моем пакете.файл JSON "start": "export PORT=3001 && react-scripts start" работал для меня тоже, и я на macOS 10.13.4

1

настройки порта по умолчанию при запуске приложения, вы можете найти в 

yourapp/scripts/start.js

прокрутите вниз и измените порт, как вы хотите

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

надежда может помочь вам ;)

0

просто обновите немного в webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
  }
выполнить npm start снова
0

подводя итог, у нас есть три подхода для достижения этой цели:

  1. установите переменную окружения с именем "PORT"
  2. измените ключ " пуск "в разделе" скрипты " части пакета.json
  3. создать .env-файл и поместите в него конфигурацию порта

самым портативным будет последний подход. Но, как упоминалось в другом плакате, добавьте .в ОКР .gitignore, чтобы не загружать конфигурацию в общедоступный источник хранилище.

Подробнее: в этой статье

0

это работает как на Windows, так и на Linux

пакета.json

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

но вы, вероятно, предпочитают создавать .env с портом=3006 написано внутри него

0