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

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

Ответы (23)

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

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

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

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

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

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

yarn add -D cross-env

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

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

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

  1. В "\ node_modules \ response-scripts \ 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 start. Это запустит приложение в 9999 порт.

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

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

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

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

yourapp/scripts/start.js

прокрутите вниз и измените порт на любой

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

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

Работает как в Windows, так и в Linux (не работает на Mac)

package.json

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

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

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

package.json (Windows):

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

package.json (Ubuntu):

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

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

Например:

.env

PORT=4200

Вы можете найти документацию для этого действия здесь: https://create-react-app.dev/docs/advanced-configuration

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

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

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

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

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

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

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

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

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

PORT=3005

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

 node_modules/react-scripts/scripts/start.js

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

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

И все готово.

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

PORT=3001 npm start

Я просто создаю .env в корне своего проекта и меняю PORT = 3001

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

npm start port=30022

Для Windows вы можете напрямую запустить эту команду на cmd

set PORT=3001 && npm start

Это работало для Linux Elementary OS

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

В Powershell в Windows (Запуск от имени администратора):

(cd в корневую папку вашего приложения CRA)

$ env: PORT = 3002; npm start

Why not just

PORT=3030 npm run start

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

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

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

вроде:

$ экспорт ПОРТ = 4000 && начало npm

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

2022 WebDevInsider