एक बनाएँ-प्रतिक्रिया-ऐप आधारित परियोजना को चलाने के लिए एक पोर्ट कैसे निर्दिष्ट करें?

211

मेरा प्रोजेक्ट क्रिएट-रिएक्शन-ऐप पर आधारित है । npm startया yarn startडिफ़ॉल्ट रूप से पोर्ट 3000 पर एप्लिकेशन चलाएगा और पैकेज.जॉन में पोर्ट निर्दिष्ट करने का कोई विकल्प नहीं है।

मैं इस मामले में अपनी पसंद का पोर्ट कैसे निर्दिष्ट कर सकता हूं? मैं इस परियोजना के दो (एक साथ परीक्षण के लिए) चलाना चाहता हूं, एक बंदरगाह 3005और अन्य में है3006

reactjs npm

— letthefireflieslive
स्रोत

4

बस जल्दी से यहाँ उल्लेख है कि Next.js परियोजनाओं के लिए आप बस का उपयोग करेंगे next -p 3005अगर किसी और को यहाँ एक ही चीज़ की तलाश में गिर जाते हैं।

— जियोनीनीड्स

395

यदि आप पर्यावरण चर सेट नहीं करना चाहते हैं , तो scriptsपैकेज का भाग संशोधित करने के लिए एक अन्य विकल्प है :

"start": "react-scripts start"

सेवा

लिनक्स (उबंटू 14.04 / 16.04 पर परीक्षण किया गया) और MacOS (MacOS Sierra 10.12.4 पर @ aswin-s द्वारा परीक्षण):

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

या (हो सकता है) @IsaacPak द्वारा अधिक सामान्य समाधान

"start": "export PORT=3006 react-scripts start"

विंडोज @JacobEnsor समाधान

"start": "set PORT=3006 && react-scripts start"

हर जगह क्रॉस एनवी काम करता है। विवरण के लिए Aguinaldo Possatto उत्तर देखें

मेरे उत्तर की लोकप्रियता के कारण अपडेट करें: वर्तमान में मैं .envफ़ाइल में सहेजे गए पर्यावरण चर का उपयोग करना पसंद करता हूं ( deployसुविधाजनक और पठनीय रूप में विभिन्न कॉन्फ़िगरेशन के लिए चर के स्टोर को उपयोगी बनाता है)। जोड़ने के लिए मत भूलना *.envमें .gitignoreअगर आप अभी भी अपनी रहस्य भंडारण कर रहे हैं .envफ़ाइलें। यहां इस बात की व्याख्या की गई है कि अधिकांश मामलों में पर्यावरण चर का उपयोग बेहतर क्यों है। यहां इस बात की व्याख्या की गई है कि पर्यावरण में रहस्यों को संग्रहीत करना बुरा विचार क्यों है।

— एल रुसो
स्रोत

33

विंडोज के लिए:"start": "set PORT=3005 && react-scripts start"

— जैकब एनशोर

3

ubuntu के लिए: "start": "export PORT=3006 react-scripts start"मेरे लिए काम किया

— इसहाक पाक

विंडोज़ सेट के लिए PORT = 3005 && प्रतिक्रिया-स्क्रिप्ट्स ने मेरे लिए काम शुरू किया :)

— Skylin R

2

"start": "export PORT=3001 && react-scripts start"इसने मेरे लिए उबंटू 16 में

— कोड कुकर

2

@ElRuso यदि परियोजना केवल एक विशिष्ट वातावरण में उपयोग की जाती है, तो मैं सहमत हूं, यह ओवरकिल है। जैसे कुछ के लिए उपयोग का मामला cross-envहै जब आपके पास कई डेवलपर्स हैं जो विभिन्न प्रणालियों पर काम कर रहे हैं। शायद कुछ मैक पसंद करते हैं, और कुछ अन्य विंडोज पसंद करते हैं। या, एक अन्य परिदृश्य, सभी डेवलपर्स विंडोज का उपयोग करते हैं, लेकिन आप एक पर्यावरण चर जोड़ना चाहते हैं जो आपके CI / CD सर्वर पर चलेगा जो उबंटू चलाता है। मुझे आशा है कि वह मदद करेंगे।

— MauricioLeal

132

यहाँ इस कार्य को पूरा करने का एक और तरीका है।

.envअपने प्रोजेक्ट रूट पर एक फ़ाइल बनाएं और वहां पोर्ट नंबर निर्दिष्ट करें। पसंद:

PORT=3005

— शहरयार हसन सईद
स्रोत

2

.Env फ़ाइल का उपयोग करना बॉक्स के बाहर क्रिएट-रिएक्शन-ऐप के साथ समर्थित है। यदि आप संवेदनशील जानकारी रखते हैं, तो बस यह सुनिश्चित न करें कि स्रोत नियंत्रण में नहीं हैं।

— डॉन

11

यह विधि है जो बनाने के लिए प्रतिक्रिया- एप-README.md में वर्णित है

— ट्रैविस स्टील

3

@carkod वास्तव में, वे एक फ़ाइल में संवेदनशील डेटा डाल करने के लिए कह रहे हैं अन्य की तुलना में .env। उनके मामले में वे उपयोग करने की सलाह देते हैं, .env.localजिसे आपको स्रोत नियंत्रण में नहीं देखना चाहिए, ताकि आप .envस्रोत नियंत्रण में सुरक्षित रूप से जांच कर सकें । तो वही सलाह आज भी लागू होती है।

— डॉन

1

मुझे यह उत्तर बेहतर लगता है, क्योंकि यह विन्यास विकल्पों को उपलब्ध करता है, जबकि अन्य समाधान अधिक पसंद करते हैं जैसे कि ट्रिक्स / हैक।

— हंस वाउचर

1

यह MacOSX और Windows के लिए एक ही पैकेज के साथ काम करता है। Json फ़ाइल।

— कीथ जॉन हचिसन

24

आप पोर्ट सेट करने के लिए क्रॉस-एनवी का उपयोग कर सकते हैं , और यह विंडोज, लिनक्स और मैक पर काम करेगा।

yarn add -D cross-env

तो package.json में शुरू लिंक इस तरह हो सकता है:

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

— एगुइनलो पोसट्टो
स्रोत

मुझे ठीक इसी की आवश्यकता थी। कुछ ऐसा जो ज्यादातर सामान्य प्लेटफार्मों पर अच्छी तरह से काम कर सकता है उदाहरण के लिए मेरा घर सेटअप विंडोज है और काम मैक है।

— icosmin

22

आप PORTउस पोर्ट को निर्दिष्ट करने के लिए नामित परिवेश चर निर्दिष्ट कर सकते हैं जिस पर सर्वर चलेगा।

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

— हर्षिल लोधी
स्रोत

1

मैं दो रिएक्शन एप्लिकेशन

— चलाऊंगा

1

@ आप दो कंसोल खोल सकते हैं, पर्यावरण चर को 3005 और 3006 में से प्रत्येक में सेट कर सकते हैं और एप्लिकेशन चला सकते हैं।

— हर्षिल लोधी

1

"start": "set PORT=3005 react-scripts start"बस पोर्ट सेट करें, लेकिन ऐप को न चलाएं

— letthefireflieslive

5

@legnoban 2 कमांड्स के बीच में एक && जोड़ें। "start": "set PORT=3005 && react-scripts start"

— जैकब एंसोर

5

मेरी विंडोज़ के लोगों के लिए मैंने किसी भी पोर्ट पर चलाने के लिए ReactJS पोर्ट को बदलने का एक तरीका खोजा। फिर भी सर्वर पर जाने के लिए

 node_modules/react-scripts/scripts/start.js

इसमें, नीचे की लाइन खोजें और पोर्ट नंबर को अपने इच्छित पोर्ट में बदलें

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

और आप जाने के लिए अच्छे हैं।

— Ayodeji
स्रोत

13

खबरदार: node_modulesपैकेज के अपडेट होने पर आप निर्देशिका के अंदर होने वाले बदलावों को उड़ा देंगे। संभवतः अन्य उत्तरों में से किसी एक का उपयोग करना सबसे अच्छा है।

— डॉन

upvoted क्योंकि यह अंतर्दृष्टि देता है जहां उन्होंने इस फ़ाइल को सेट किया (यहाँ समाप्त हुआ जबकि मैं बस यह समझने की कोशिश कर रहा था कि पर्दे के पीछे क्या प्रतिक्रिया-प्रतिक्रिया-ऐप करता है)

— ozgeneral

4

.envइसके अलावा मुख्य निर्देशिका में नाम के साथ एक फ़ाइल बनाएं package.jsonऔर PORTवांछित पोर्ट संख्या के लिए चर सेट करें ।

उदाहरण के लिए:

.env

PORT=4200

— मुहम्मद ओजदोगन
स्रोत

यह बेदखल के बिना भी काम करेगा, और प्रलेखन में वर्णित विधि है

— अक्षय विजय जैन

@AkshayVijayJain आपकी प्रतिक्रिया के लिए धन्यवाद मैंने इसका उत्तर संपादित किया है।

— मुहम्मद ओजदोगन

3

बस इसमें थोड़ा अपडेट करें webpack.config.js:

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

फिर चला npm start।

— संचित भटनागर
स्रोत

3

अपने में package.json, स्क्रिप्ट पर जाएं और नीचे दिए गए उदाहरण की तरह उपयोग करें --port 4000या set PORT=4000,:

package.json (खिड़कियाँ):

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

package.json (उबंटू):

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

— लियोनेल
स्रोत

2

अपने कोड के इरादे को समझाने के लिए थोड़ा गद्य जोड़ने पर विचार करें।

— entpnerd

2

यह विंडोज और लिनक्स दोनों पर काम करता है

package.json

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

लेकिन आप संभवतः इसके अंदर लिखे PORT = 3006 के साथ .env बनाना पसंद करते हैं

— मैं भी
स्रोत

यह विंडोज़ पर काम नहीं करता है:'PORT' is not recognized as an internal or external command, operable program or batch file.

— mgPePe

इस पर ध्यान दिलाने के लिए धन्यवाद। मैंने कमांड को ठीक किया, आप इसे अभी आज़मा सकते हैं।

— मेतू

1

मेरे पैकेज में बदलना। "start": "export PORT=3001 && react-scripts start"जसन फ़ाइल ने मेरे लिए भी काम किया और मैं macOS 10.13.4 पर हूं

— रिफ़ायत हक़
स्रोत

1

संक्षेप में, हमारे पास इसे पूरा करने के लिए तीन दृष्टिकोण हैं:

"PORT" नाम का एक पर्यावरण चर सेट करें
Package.json के "स्क्रिप्ट" भाग के तहत "स्टार्ट" कुंजी को संशोधित करें
.Env फ़ाइल बनाएँ और उसमें PORT कॉन्फ़िगरेशन डालें

सबसे पोर्टेबल एक अंतिम दृष्टिकोण होगा। लेकिन जैसा कि अन्य पोस्टर द्वारा उल्लेख किया गया है, सार्वजनिक स्रोत के रिपॉजिटरी में कॉन्फ़िगरेशन अपलोड न करने के लिए .itignore में .env जोड़ें।

अधिक विवरण: इस लेख

— mikaelfs
स्रोत

1

आप अपना ऐप शुरू करने के लिए डिफ़ॉल्ट पोर्ट कॉन्फ़िगरेशन पा सकते हैं

yourapp / scripts / start.js

नीचे स्क्रॉल करें और जो चाहें पोर्ट को बदल दें

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

आशा है कि यह आपकी मदद कर सकता है;)

— akhisyabab
स्रोत

मेरे बनाए रिएक्शन-ऐप में कोई स्क्रिप्ट नहीं है

— AlxVallejo

1

काम करने के इस जवाब के लिए, आपको yarn ejectपहले की जरूरत है ।

— जच ब्लूमक्विस्ट

1

इसे इस्तेमाल करे:

npm start port=30022

— ओबेस डेसमंड
स्रोत

मेरे लिए उबंटू मशीन (डिजिटल ओशन) में काम न करें

— लिंग

0

3000कमांड लाइन पैरामीटर या पर्यावरण चर के रूप में या तो एक पोर्ट को निर्दिष्ट करने में सक्षम होना अच्छा होगा ।

अभी, इस प्रक्रिया में शामिल है:

Daud npm run eject
उसके खत्म होने का इंतजार करें
जो भी पोर्ट आप उपयोग करना चाहते हैं, उसे संपादित करें scripts/start.jsऔर खोजें / बदलें3000
संपादित करें config/webpack.config.dev.jsऔर ऐसा ही करें
npm start

— MD.ALIMUL अल्जीर
स्रोत

हाँ, मैं (केवल), एक कमांड लाइन चर के रूप में पोर्ट निर्दिष्ट करने में सक्षम होना चाहते हैं, जब मैं किसी अन्य सर्वर पहले से ही प्रयोग 3000 मिल गया है

— SherylHohman

0

विंडोज में इसे 2 तरीकों से किया जा सकता है।

"\ नोड_मॉड्यूल्स \ प्रतिक्रिया-लिपियों \ स्क्रिप्ट \ start.js" के तहत, "DEFAULT_PORT" के लिए खोज करें और इच्छा पोर्ट नंबर जोड़ें।

जैसे: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;
Package.json में, नीचे की रेखा को संलग्न करें। "start": "PORT = 9999 और& प्रतिक्रिया-स्क्रिप्ट सेट करें" तब NPM प्रारंभ का उपयोग करके एप्लिकेशन प्रारंभ करें। यह 9999 पोर्ट में एप्लिकेशन शुरू करेगा।

— rahulnikhare
स्रोत

0

अपने एप्लिकेशन कोड या पर्यावरण फ़ाइलों में कुछ भी बदलने की आवश्यकता के बिना कमांड को लागू करते समय पोर्ट नंबर देने के बारे में कैसे? इस तरह यह कई अलग-अलग बंदरगाहों से एक ही कोड बेस को चलाने और परोसने में संभव है।

पसंद:

$ export PORT=4000 && npm start

आप 4000ऊपर दिए गए उदाहरण मूल्य के स्थान पर अपनी पसंद का पोर्ट नंबर डाल सकते हैं ।

— सेल्चुक
स्रोत

0

यदि आप पहले से ही ऐसा कर चुके npm run ejectहैं, तो स्क्रिप्ट / start.js पर जाएं और const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;जो कुछ भी पोर्ट चाहते हैं, उसमें (3000 इस मामले में) पोर्ट बदल दें ।

— गौरव सिंह
स्रोत

-1

प्रतिक्रिया-ऐप पर डिफ़ॉल्ट पोर्ट को बदलना

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;

सुरषित और बहार

— nu11secur1ty
स्रोत

3

यह परिवर्तन निश्चित रूप से आपके लिए ही उपलब्ध होगा, और संभवतः अगली बार आपके द्वारा चलाए जाने पर नष्ट हो जाए npm/yarn install। फाइलों को बदलने node_modulesसे बचना चाहिए।

— मेमोरियल