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

Мій проект базується на додатку create-react-app . 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"

cross-env lib працює скрізь. Див Агуінальдо Possatto відповідь подробиці

Оновлення через популярність моєї відповіді: В даний час я вважаю за краще використовувати змінні середовища, збережені у .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" у розділі "script" частини пакета package.json
3. Створіть .env файл і покладіть у нього конфігурацію PORT

Найбільш портативним буде останній підхід. Але, як згадує інший плакат, додайте .env в .gitignore, щоб не завантажувати конфігурацію у сховище загальнодоступних джерел.

Детальніше: ця стаття

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

yourapp / script / 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 \ react-scriptpts \ scriptpts \ start.js" знайдіть "DEFAULT_PORT" та додайте номер порту бажання.

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

2. У package.json додайте рядок нижче. "start": "встановити PORT = 9999 && react-script start" Потім запустіть програму за допомогою запуску NPM. Він запустить додаток у порту 9999.

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

подібно до:

$ export PORT=4000 && npm start

Ви можете поставити номер порта, який вам подобається, замість наведеного 4000вище значення прикладу .

Якщо ви вже зробили npm run eject, перейдіть до скриптів / 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;

Збережіть і вийдіть