একটি তৈরি-প্রতিক্রিয়া-অ্যাপ ভিত্তিক প্রকল্পটি চালানোর জন্য কীভাবে কোনও পোর্ট নির্দিষ্ট করবেন?

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 এর সিয়েরা 10.12.4 উপর aswin-এস):

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

বা (ইসসাকপাক) আরও সাধারণ সমাধান হতে পারে

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

উইন্ডোজ @ জ্যাকোবএেন্সর সমাধান

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

ক্রস এনভ লিব সব জায়গায় কাজ করে। বিশদ জন্য Aguinaldo Possatto উত্তর দেখুন

আমার উত্তরের জনপ্রিয়তার কারণে আপডেট: বর্তমানে আমি .envফাইলটিতে সংরক্ষিত পরিবেশের ভেরিয়েবলগুলি ব্যবহার করতে পছন্দ করি ( deployসুবিধাজনক এবং পঠনযোগ্য আকারে বিভিন্ন কনফিগারেশনের জন্য ভেরিয়েবলের সেট সংরক্ষণ করতে দরকারী )। যোগ করতে ভুলবেন না *.envমধ্যে .gitignoreযদি এখনও আপনার গোপন সংরক্ষণ করছেন .envফাইল। বেশিরভাগ ক্ষেত্রে কেন পরিবেশের ভেরিয়েবল ব্যবহার করা ভাল তার ব্যাখ্যা এখানে । এখানে কেন পরিবেশে গোপন সংরক্ষণকারী খারাপ ধারণা ব্যাখ্যা।

— এল রুসো
সূত্র

33

উইন্ডোজের জন্য:"start": "set PORT=3005 && react-scripts start"

— জ্যাকব এনসোর

3

উবুন্টুর জন্য: "start": "export PORT=3006 react-scripts start"আমার পক্ষে কাজ করেছেন

— আইজাক পাক

উইন্ডোজ সেট করার জন্য পোর্ট = 3005 &&-র স্ক্রিপ্টগুলি আমার জন্য কাজ শুরু করে :)

— স্কাইলিন আর

2

"start": "export PORT=3001 && react-scripts start"এই আমার জন্য উবুন্টু 16

— কোড কুকার

2

@ এলরুসো যদি প্রকল্পটি কেবল নির্দিষ্ট পরিবেশে ব্যবহৃত হয় তবে আমি সম্মতি জানাই, এটি ওভারকিল। cross-envআপনি যখন বিভিন্ন সিস্টেমে একাধিক বিকাশকারী কাজ করেন তখন এর মতো ব্যবহারের ক্ষেত্রে ব্যবহার হয়। হয়তো কেউ ম্যাককে পছন্দ করেন, আবার কেউ কেউ উইন্ডোজকে পছন্দ করেন। অথবা, অন্য দৃশ্যে, সমস্ত বিকাশকারী উইন্ডোজ ব্যবহার করে তবে আপনি একটি পরিবেশ পরিবর্তনশীল যুক্ত করতে চান যা আপনার সিআই / সিডি সার্ভারে চালিত হবে যা উবুন্টু চালায়। আমি আশা করি এটি সাহায্য করবে.

— মরিসিওলিওল

132

এই কাজটি সম্পাদনের জন্য এখানে আরও একটি উপায়।

.envআপনার প্রকল্পের মূলটিতে একটি ফাইল তৈরি করুন এবং সেখানে পোর্ট নম্বর নির্দিষ্ট করুন। ভালো লেগেছে:

PORT=3005

— শাহরিয়ার হাসান সাeedদ
সূত্র

2

একটি .env ফাইল ব্যবহার করা তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন সহ বাক্সের বাইরে সমর্থিত। আপনি যদি সেখানে সংবেদনশীল তথ্য রাখেন তবে উত্স নিয়ন্ত্রণে .env পরীক্ষা না করে নিশ্চিত হন।

— ডন

11

README.md- এর ক্রিয়া

— ট্র্যাভিস স্টিল

3

@carkod বাস্তবিক, তারা একটি ফাইলে সংবেদনশীল তথ্য লাগাতে বলছে অন্য তুলনায় .env। তাদের ক্ষেত্রে তারা .env.localএমনটি ব্যবহারের পরামর্শ দেয় যা আপনার উত্স নিয়ন্ত্রণে যাচাই করা উচিত নয়, যাতে আপনি নিরাপদে .envউত্স নিয়ন্ত্রণে চেক করতে পারেন । সুতরাং একই পরামর্শ এখনও প্রযোজ্য।

— ডন

1

আমি এই উত্তরটি আরও ভাল পছন্দ করি, কারণ এটি কনফিগারেশন বিকল্পগুলি উপলভ্য করে তোলে, অন্য সমাধানগুলি কৌশলগুলি / হ্যাকগুলির মতো মনে হয়।

— হান্স ওয়াউটারস

1

এটি একই প্যাকেজ.জসন ফাইল সহ ম্যাকোএসএক্স এবং উইন্ডোজের জন্য কাজ করে।

— কিথ জন হাচিসন

24

আপনি পোর্টটি সেট করতে ক্রস-এনভিভি ব্যবহার করতে পারেন এবং এটি উইন্ডোজ, লিনাক্স এবং ম্যাকের জন্য কাজ করবে।

yarn add -D cross-env

তারপরে প্যাকেজ.জসনে শুরু লিঙ্কটি এটির মতো হতে পারে:

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

— আগুনিয়ালদো পোসাস্তো
সূত্র

এটাই আমার দরকার ছিল। এমন কিছু যা বেশিরভাগ সাধারণ প্ল্যাটফর্মগুলিতে ভাল কাজ করতে পারে উদাহরণস্বরূপ আমার হোম সেটআপটি উইন্ডোজ এবং কাজ ম্যাক।

— আইকোসমিন

22

আপনি যে পোর্টটিতে PORTসার্ভারটি চলবে তা নির্দিষ্ট করতে একটি পরিবেশের পরিবর্তনশীল নির্দিষ্ট করতে পারেন।

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

— হর্ষিল লোধি
সূত্র

1

আমি দুটি প্রতিক্রিয়া প্রয়োগ করব, একটি অবশ্যই পোর্টে 3005 এবং অন্যটি 3006

— letthefireflieslive

1

@ লেলেম আপনি দুটি কনসোল খুলতে পারেন, প্রতিটির মধ্যে 3005 এবং 3006 এ পরিবেশের ভেরিয়েবল সেট করতে পারেন এবং অ্যাপ্লিকেশনটি চালাতে পারেন।

— হর্ষিল লোধি

1

"start": "set PORT=3005 react-scripts start"কেবল বন্দরটি সেট করুন তবে অ্যাপটি চালায় না

— letthefireflieslive

5

@legnoban 2 টি কমান্ডের মধ্যে একটি&& যুক্ত করুন। "start": "set PORT=3005 && react-scripts start"

— জ্যাকব এনসর

5

আমার উইন্ডোজ লোকেদের জন্য আমি আপনার যে কোনও পোর্টে যেতে চাইলে রিঅ্যাকটিজেএস পোর্টটি পরিবর্তন করার একটি উপায় আবিষ্কার করেছি server সার্ভার চালানোর আগে এখানে যান

 node_modules/react-scripts/scripts/start.js

এটিতে নীচের লাইনটি অনুসন্ধান করুন এবং পোর্ট নম্বরটি আপনার পছন্দসই বন্দরে পরিবর্তন করুন

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

এবং আপনি যেতে ভাল।

— Ayodeji
সূত্র

13

সাবধানতা: ডিরেক্টরিগুলির মধ্যে থাকা পরিবর্তনগুলি node_modulesপ্যাকেজ আপডেট হওয়ার পরে উড়িয়ে দেওয়া হবে। অন্য উত্তরগুলির মধ্যে একটি ব্যবহার করা সম্ভবত সেরা।

— ডন

আপোভোটেড কারণ এটি কোথায় তারা এই ফাইলটি সেট করেছেন তার বিষয়ে অন্তর্দৃষ্টি দেয় (আমি এখানে কেবল শেষ হয়ে গিয়েছিলাম যখন তৈরির-প্রতিক্রিয়া-অ্যাপ্লিকেশনটি পর্দার পিছনে কী করে তা বোঝার চেষ্টা করছিলাম)

— ওজেনারাল

4

.envমূল ডিরেক্টরিতে নামের সাথে একটি ফাইল তৈরি করুন package.jsonএবং সেট করুনPORT এবং পছন্দসই পোর্ট সংখ্যাতে ভেরিয়েবল ।

উদাহরণ স্বরূপ:

.env

PORT=4200

— মুহাম্মদ ওজডোগান
সূত্র

এটি এমনকি বের করে দেওয়া ছাড়াও কাজ করবে এবং ডকুমেন্টেশনে বর্ণিত পদ্ধতিটি হ'ল

— অক্ষয় বিজয় জৈন

@ অক্ষয় বিজয়জাইন আপনার প্রতিক্রিয়ার জন্য ধন্যবাদ আমি উত্তরটি সম্পাদনা করেছি।

— মুহাম্মাদ ওজডোগান

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

আপনার কোডের উদ্দেশ্যটি ব্যাখ্যা করতে কিছুটা গদ্য যুক্ত করার বিষয়টি বিবেচনা করুন।

— এনটনার্ড

2

এটি উইন্ডোজ এবং লিনাক্স উভয় ক্ষেত্রেই কাজ করে

package.json

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

তবে আপনি সম্ভবত এর ভিতরে লেখা পোর্ট = 3006 দিয়ে .env তৈরি করতে পছন্দ করেন

— আমিও
সূত্র

এটি উইন্ডোতে কাজ করে না:'PORT' is not recognized as an internal or external command, operable program or batch file.

— এমজিপিপি

এটা ইশারা জন্য ধন্যবাদ। আমি আদেশটি স্থির করেছি, আপনি এখনই এটি চেষ্টা করতে পারেন।

— মেটু

1

আমার প্যাকেজ.জসন ফাইলটিতে পরিবর্তন করা আমার পক্ষেও "start": "export PORT=3001 && react-scripts start"কাজ করেছে এবং আমি ম্যাকোএস 10.13.4 এ আছি

— রেফায়াত হক
সূত্র

1

সংক্ষেপে বলতে গেলে, আমাদের এটি সম্পাদন করার জন্য তিনটি পন্থা রয়েছে:

"পোর্ট" নামে একটি পরিবেশের পরিবর্তনশীল সেট করুন
প্যাকেজ.জসনের "স্ক্রিপ্ট" অংশের অধীনে "শুরু" কীটি সংশোধন করুন
একটি .env ফাইল তৈরি করুন এবং এতে পোর্ট কনফিগারেশন রাখুন

সর্বাধিক বহনযোগ্য এক হ'ল শেষ পন্থা। তবে অন্যান্য পোস্টার হিসাবে উল্লিখিত হিসাবে, সার্বজনীন উত্স সংগ্রহস্থলটিতে কনফিগারেশন আপলোড না করার জন্য .env .gitignore এ যুক্ত করুন।

আরও বিশদ: এই নিবন্ধ

— mikaelfs
সূত্র

1

আপনি আপনার অ্যাপ্লিকেশন শুরু করতে ডিফল্ট পোর্ট কনফিগারেশন খুঁজে পেতে পারেন

yourapp / স্ক্রিপ্ট / start.js

নীচে স্ক্রোল করুন এবং পোর্টটি যা চান তা পরিবর্তন করুন

কনট ডিএএফএএলএলপিএপিটি = পার্সেন্ট (প্রক্রিয়া.এনভি.অ্যাপ্টেট, 10) || 4000;

আশা করি এটি আপনাকে সহায়তা করতে পারে;)

— akhisyabab
সূত্র

কোন স্ক্রিপ্ট আমার তৈরি-প্রতিক্রিয়া-অ্যাপে Dir হয়

— AlxVallejo

1

কাজের এই উত্তরটির জন্য আপনাকে yarn ejectপ্রথমে দরকার ।

— জ্যাচ ব্লুমকুইস্ট

1

এটা চেষ্টা কর:

npm start port=30022

— ওবেন ডেসমন্ড
সূত্র

আমার জন্য উবুন্টু মেশিনে (ডিজিটাল মহাসাগর) কাজ করবেন না

— লিঙ্গার

0

3000কমান্ড লাইন প্যারামিটার বা পরিবেশের পরিবর্তনশীল হিসাবে অন্য কোনও পোর্ট নির্দিষ্ট করতে সক্ষম হওয়াই ভাল It

এখনই, প্রক্রিয়াটি বেশ জড়িত:

চালান npm run eject
এটি শেষ হওয়ার জন্য অপেক্ষা করুন
আপনি যে কোনও বন্দরটি ব্যবহার করতে চান তা সম্পাদনা করুন scripts/start.jsএবং সন্ধান করুন / প্রতিস্থাপন করুন3000
সম্পাদনা করুন config/webpack.config.dev.jsএবং একই কাজ
npm start

— MD.ALIMUL Alrazy
সূত্র

হ্যাঁ, আমি (শুধুমাত্র), একটি কমান্ড লাইন পরিবর্তনশীল যেমন পোর্টকে নির্দিষ্ট পাবে চাই যখন আমি অন্য সার্ভার ইতিমধ্যে ব্যবহার করছেন 3000. পেয়েছেন

— SherylHohman

0

উইন্ডোজে এটি 2 উপায়ে করা যেতে পারে।

"Ode node_modules Under প্রতিক্রিয়া-স্ক্রিপ্টস \ স্ক্রিপ্টস \ start.js" এর অধীনে, "DEFAULT_PORT" অনুসন্ধান করুন এবং ইচ্ছা পোর্ট নম্বর যুক্ত করুন।

উদাহরণস্বরূপ: কনট ডিএফএলএইএলএইপিএপিটি = পার্সেন্ট (প্রক্রিয়া.এনভি.অ্যাপ্ট, 10) || 9999;
প্যাকেজ.জসনে, নীচের লাইনটি যুক্ত করুন। "start": "PORT = 9999 সেট করুন && প্রতিক্রিয়া-স্ক্রিপ্টগুলি শুরু করুন" তারপরে এনপিএম স্টার্ট ব্যবহার করে অ্যাপ্লিকেশনটি শুরু করুন। এটি 9999 বন্দরে অ্যাপ্লিকেশন শুরু করবে।

— rahulnikhare
সূত্র

0

আপনার অ্যাপ্লিকেশন কোড বা পরিবেশের ফাইলগুলিতে কোনও পরিবর্তন করার প্রয়োজন ছাড়াই কমান্ডটি চাওয়ার সময় পোর্ট নম্বর দেওয়ার বিষয়ে কীভাবে? এই পদ্ধতিতে বেশ কয়েকটি বিভিন্ন বন্দর থেকে একই কোড বেসটি চালানো এবং পরিবেশন করা সম্ভব।

মত:

$ export PORT=4000 && npm start

4000উপরের উদাহরণ মানের জায়গায় আপনি পছন্দ করতে পোর্ট নম্বর রাখতে পারেন ।

— Selçuk
সূত্র

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করা এড়ানো উচিত।

— মেমার্ক