Как поменять порт react приложения

Обновлено: 06.01.2025

Изменить порт React Native (как запустить несколько React Native одновременно, проблема занятости порта 8081)

Когда мы запускаем проект React Native, React Native запускает локальную службу с номером порта по умолчанию 8081. Служба 8081 является локальным сервером проекта React Native, который используется для предоставления пакетов JSBundle и некоторых статических ресурсов. Все это настроено React Native, чтобы помочь разработчикам, все так просто, но если возникают следующие ситуации, вам необходимо внимательно прочитать эту статью:

Порт 8081 занят другими программами (такими как антивирусное программное обеспечение), что не позволяет React Native нормально запускать службу 8081;
Если вы хотите запустить несколько проектов React Native одновременно;
Если вам интересно, как установлен React Native по умолчанию 8081, вы можете изменить его;

Изменить React Native слушающий порт

Служба запуска React Native будет прослушивать по умолчанию 8081 Порт, так как изменить этот порт по умолчанию? Далее, следуйте за мной шаг за шагом, чтобы изменить порт прослушивания по умолчанию для службы React Native!

Шаг 1: Изменить порт сервера

Так называемый порт сервера - это то, что мы передаем npm start или react-native run-xxx Номер порта локального сервера React Native, запущенного командой, как показано на рисунке:

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

Посмотреть последние server.js Исходный код, это не сложно найти кусок кода:

Как видно из приведенного выше кода, мы можем указать номер порта для собственной службы реагирования при запуске:

Постоянно изменять порт сервера

Чтобы навсегда изменить этот номер порта по умолчанию, нам нужно изменить server.js файл, server.js Расположение по адресу:

Найдите этот файл, откройте его, а затем измените порт 8081 по умолчанию на номер порта, который вы хотите:

После внесения изменений необходимо проверить, является ли он эффективным, как его проверить, метод очень простой, запустить в корневом каталоге проекта. npm start Просто:

Как видно из приведенного выше рисунка, здесь мы изменили порт по умолчанию реактивной системы на 8082.

Шаг 2: Измените номер порта проекта iOS

После изменения номера порта службы React Native нам нужно изменить номер порта проекта iOS, чтобы он получал jsbundle от нового порта, в противном случае он появится No bundle URL present ошибка.

Откройте проект iOS в проекте React Native через XCode;
Измените номера портов следующих файлов:
- RCTWebSocketExecutor.m
- RCTBridgeDelegate.h
- RCTBundleURLProvider.m
- RCTInspectorDevServerHelper.mm
- RCTPackagerConnectionBridgeConfig.m
Тогда вы можете пройти react-native run-ios Давайте запустим проект iOS и прочитаем jsbundle из нового порта.

Шаг 3: Измените номер порта проекта Android

После изменения номера порта службы React Native нам нужно изменить номер порта проекта Android, чтобы он получал jsbundle от нового порта, иначе он появится No bundle URL present ошибка.
- Откройте инструмент отладки (Dev Settings), что можно сделать через (команда + M);
- щелчок Debug server host & port for device ,Добавить в localhost:xxx Где ххх - это новый адрес порта;
- Перезагрузите снова, вы можете загрузить jsbundle из нового порта.
Как запустить несколько реагирующих нативных проектов одновременно

Из-за привязки порта React Native не поддерживает запуск нескольких проектов по умолчанию.

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

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

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

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

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

Windows @JacobEnsor решение

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

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

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

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

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

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

create-react-app помогает мне быстро встать и бежать. Тем не менее, я извлек созданное приложение, сделал несколько модификаций в нем и создал свой собственный шаблон проекта со всеми инструментами, необходимыми для быстрого запуска (это включает в себя такие вещи, как i18n, организация файлов.

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

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

.env

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

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

И ты можешь идти.

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

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

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

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

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

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

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

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

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

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

$ export PORT=4000 && npm start

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

Подводя итог, у нас есть три подхода для достижения этой цели:
1. Установите переменную окружения с именем "PORT"
2. Измените ключ "start" в разделе "scripts" части package.json
3. Создайте файл .env и поместите в него конфигурацию PORT
Самым портативным будет последний подход. Но, как упоминалось в другом плакате, добавьте .env в .gitignore, чтобы не загружать конфигурацию в репозиторий с открытым исходным кодом.

Более подробная информация: эта статья

Почему бы и нет

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

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

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

E.g : const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9999;

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

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

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

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

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

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

Похожие вопросы:

Я новичок в React.JS и использую react-create-app для настройки проекта. Мне интересно, есть ли способ использовать один и тот же хост и порт для ответа на запросы API (сервер обслуживает как.

Я хотел бы использовать create-react-app, поэтому я следую инструкции: npm install -g create-react-app create-react-app my-app cd my-app/ npm start Но у меня есть ошибка на последнем шаге. После.

create-react-app помогает мне быстро встать и бежать. Тем не менее, я извлек созданное приложение, сделал несколько модификаций в нем и создал свой собственный шаблон проекта со всеми инструментами.

У меня есть проект React, построенный с create-react-app 1.5. Я хотел бы получить функции create-react-app 2.0 для моего проекта React. В частности, я хотел бы использовать это.

Я настроил create-react-native-app , как сказано в родных документах react . Если мое имя проекта- proj , то, согласно документам, команды для запуска должны быть : create-react-native-app proj cd.

Я недавно установил yarn на свою машину, но раньше использовал npm. Для моего текущего проекта в React я хочу снова использовать npm. Однако, если я запускаю create-react-app, он строится с помощью.

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Windows @JacobEnsor решение

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

Подводя итог, у нас есть три подхода для достижения этой цели:
1. Установите переменную среды с именем "PORT"
2. Измените ключ "start" в разделе "scripts" в package.json
3. Создайте файл .env и поместите в него конфигурацию PORT.
Самый переносимый будет последним подходом. Но, как упоминалось другим автором, добавьте .env в .gitignore, чтобы не загружать конфигурацию в общедоступный репозиторий.

Ответ 10

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

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

Я мог бы запустить react js с портом по умолчанию 3000. Но, когда я настроил порт на 4200, "start": "PORT=4200 react-scripts start" (только что измененный в package.json), я не могу запустить приложение react js.

2 ответа

В Odoo по умолчанию порт установлен на 8069, я хочу изменить его на другой порт. Я пробовал изменить в openerp-server.conf значение xmlprc, но даже после пересчета сервера новый порт не работает

В моей системе другое приложение использует порт 8081. Я запускаю нижеприведенную команду для запуска приложения react-native на 9988 react-native start --port 9988 Однако, когда я запускаю android, приложение все еще прослушивает порт 8081 react-naive run-android Мне удалось запустить его с.

чтобы запустить APP на другом порту, выполните следующую команду npm

npm start --port 3002

или для настройки в использовании пакета

замените команду start на следующую

Другой вариант, который не был упомянут в другом ответе, состоял бы в том, чтобы создать файл .env в корневом каталоге и поместить в него PORT=4200 . Он будет автоматически загружен в переменные среды.

Похожие вопросы:

Как изменить порт по умолчанию EMM WSO2, порт управления изменениями 9443 У меня есть ESB e EMM, установленный только на одном сервере, но эти две службы использовали порт 9443. Мне нужно изменить.

У меня есть вопрос о apache, как я знаю, по умолчанию apache работает на порту 80, мне нужно изменить этот порт по умолчанию на другой, скажем 8080. на самом деле я успешно изменил этот порт.

Я использую react native android и сталкиваюсь с проблемами при развертывании приложения на устройстве android. Когда я выполню react-native start, он не будет запускать сервер разработки на порту.

В Odoo по умолчанию порт установлен на 8069, я хочу изменить его на другой порт. Я пробовал изменить в openerp-server.conf значение xmlprc, но даже после пересчета сервера новый порт не работает

В моей системе другое приложение использует порт 8081. Я запускаю нижеприведенную команду для запуска приложения react-native на 9988 react-native start --port 9988 Однако, когда я запускаю android.

Я попробовал поискать в файле /opt/graphite/webapp/graphite/local_settings.py. Но я не нашел, как изменить порт по умолчанию 80. На самом деле я хотел установить OMD на ту же машину, которая по.

Я пытаюсь установить автономный react-devtools, который по умолчанию прослушивает порт 8097. Мое приложение использует порт 3001. В документации говорится следующее: По умолчанию DevTools.

Я скачал пакет приложения React по ссылке create-react-app . Порт по умолчанию, который он назначает, - port:3000 Как изменить этот порт на пользовательский порт типа 3002 или 3006 ?

Я не понимаю, как изменить порт 5000 по умолчанию в svelte на какой-то другой порт, если мы установим образец шаблона через degit.

Читайте также: