Как указать порт для запуска проекта, основанного на создании-реакции-приложения?

Мой проект основан на создании-реагировать-приложение . npm startили yarn startпо умолчанию приложение будет запущено на порту 3000, и нет никакой возможности указать порт в файле package.json.

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

Если вы не хотите устанавливать переменную окружения , другой вариант - изменить scriptsчасть package.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"

lib Cross-env работает везде. См. Ответ Агуинальдо Поссатто для деталей

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

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

Создайте .envфайл в корневом каталоге вашего проекта и укажите там номер порта. Подобно:

PORT=3005

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

yarn add -D cross-env

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

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

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

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

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

 node_modules/react-scripts/scripts/start.js

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

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

И тебе хорошо идти.

Кроме того, создайте файл с именем .envв главном каталоге package.jsonи задайте для PORTпеременной нужный номер порта.

Например:

.env

PORT=4200

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

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

затем беги npm startснова.

В вашем package.json, перейдите к сценариям и используйте --port 4000или set PORT=4000, как в примере ниже:

package.json (Windows):

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

package.json (Ubuntu):

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

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

package.json

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

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

Изменение в моем файле package.json "start": "export PORT=3001 && react-scripts start"тоже сработало, и я нахожусь на macOS 10.13.4

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

1. Установите переменную среды с именем "PORT"
2. Измените ключ «start» в разделе «scripts» в package.json
3. Создайте файл .env и поместите в него конфигурацию PORT.

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

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

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

YourApp / скрипты / start.js

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

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

надеюсь, это поможет вам;)

Попробуй это:

npm start port=30022

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

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

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

В Windows это можно сделать двумя способами.

1. В «\ node_modules \ реагировать-скрипты \ scripts \ start.js» найдите «DEFAULT_PORT» и добавьте желаемый номер порта.

   Например: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. В package.json добавьте следующую строку. "start": "set PORT = 9999 && start-scripts start" Затем запустите приложение с помощью запуска NPM. Это запустит приложение в 9999 порту.

Как насчет указания номера порта при вызове команды без необходимости что-либо менять в коде приложения или файлах среды? Таким образом, можно запускать и обслуживать одну и ту же кодовую базу из нескольких разных портов.

лайк:

$ export PORT=4000 && npm start

Вы можете поместить номер нужного вам порта вместо приведенного 4000выше значения .

Если вы уже сделали это npm run eject, перейдите в scripts / start.js и измените порт в const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 в нашем случае) на любой порт, который вы хотите.

Изменение порта по умолчанию в React-App

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

Перейти к этой строке:

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

Измените номер порта на свой номер порта

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

Например:

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

Сохранить и выйти