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

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

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

Ответ 1

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

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

Ответ 2

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

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

PORT = 3005

Ответ 3

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

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

Ответ 4

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

yarn add -D cross-env

тогда в package.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*;

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

Ответ 6

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

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

затем снова запустите npm start.

Ответ 7

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

yourapp/scripts/start.js

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

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

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

Ответ 8

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

Ответ 9

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

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

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

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

Ответ 10

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

package.json

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

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

Ответ 11

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

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

Например: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;
В package.json добавьте следующую строку. "start": "set PORT = 9999 && start-scripts start" Затем запустите приложение с помощью запуска NPM. Это запустит приложение в 9999 порту.

Ответ 12

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

лайк:

$ export PORT=4000 && npm start

Вы можете поместить номер порта, который вам нравится, вместо значения примера 4000 выше.

Ответ 13

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

В настоящий момент процесс довольно активно:

Выполнить npm run eject
Подождите, пока закончится
Измените scripts/start.js и найдите/замените 3000 на любой порт, который вы хотите использовать
Изменить config/webpack.config.dev.js и сделать то же самое
npm start