Как указать порт для запуска проекта на основе приложения create-react?
мой проект основан на create-react-app. npm start
или yarn start
по умолчанию будет работать приложение на порт 3000 и там нет возможности указать порт в пакете.формат JSON.
как я могу указать порт по моему выбору в этом случае? Я хочу запустить два проекта одновременно (для тестирования), один в port 3005
и 3006
11 ответов
если вы не хотите устанавливать переменные среды, другой вариант-изменить scripts
часть пакета.json from:
"start": "react-scripts start"
to
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"
окна @JacobEnsor решение
"start": "set PORT=3006 && react-scripts start"
обновление из-за популярности моего ответа: в настоящее время я предпочитаю использовать переменные среды, сохраненные в .env
file (полезно хранить наборы переменных для разных deploy
конфигурации в удобной и читаемой форме). Не забудьте добавить *.env
на .gitignore
если вы все еще храните свои секреты в .env
файлы. здесь объяснение того, почему использование переменных среды лучше всего случаи. здесь - это объяснение того, почему хранить секреты в окружающей среде-это плохая идея.
вот еще один способ выполнить эту задачу.
создать .env файл в корне проекта и указать номер порта там. Например:
порт=3005
Вы можете указать переменную окружения с именем PORT
чтобы указать порт, на котором будет работать сервер.
$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell
можно использовать кросс-ОКР установить порт, и он будет работать на Windows, Linux и Mac.
yarn add -D cross-env
потом в пакет.JSON начальная ссылка может быть такой:
"start": "cross-env PORT=3006 react-scripts start",
для моих людей windows я обнаружил способ изменить порт ReactJS для запуска на любом порту, который вы хотите.Перед запуском сервера перейдите в
node_modules/react-scripts/scripts/start.js
в нем найдите строку ниже и измените номер порта на нужный порт
var DEFAULT_PORT = process.env.PORT || *4000*;
и вы хорошо идти.
было бы неплохо иметь возможность указать порт, отличный от 3000
, либо в качестве параметра командной строки или переменной среды.
прямо сейчас, процесс довольно сложный:
- Run
npm run eject
- ждать, что отделка
- редактировать
scripts/start.js
найти/заменить3000
с любым портом, который вы хотите использовать - редактировать
config/webpack.config.dev.js
и сделать то же самое npm start
изменение в моем пакете.файл json "start": "export PORT=3001 && react-scripts start"
работал для меня тоже, и я на macOS 10.13.4
настройки порта по умолчанию при запуске приложения, вы можете найти в
yourapp/scripts/start.js
прокрутите вниз и измените порт, как вы хотите
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4000;
надежда может помочь вам ;)
просто обновите немного в webpack.config.js
:
devServer: {
historyApiFallback: true,
contentBase: './',
port: 3000 // <--- Add this line and choose your own port number
}
выполнить npm start
сноваподводя итог, у нас есть три подхода для достижения этого:
- установите переменную среды с именем "PORT"
- измените ключ " пуск "в разделе" скрипты " части пакета.в JSON
- создать .env-файл и поместите в него конфигурацию порта
самый портативный будет последним подходом. Но, как упоминалось в другом плакате, добавьте .env into .gitignore, чтобы не загружать конфигурацию в открытый источник хранилище.
Подробнее: в этой статье
это работает как на Windows, так и на Linux
пакета.в JSON
"scripts": {
"start": "set PORT=3006 && PORT=3006 react-scripts start || react-scripts start"
...
}
но вы, вероятно, предпочитают создавать .env с портом=3006, написанным внутри него