প্রতিক্রিয়া প্রকল্পে একটি .env ফাইল যুক্ত করা হচ্ছে

Question

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

আমি কীভাবে তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন এপিআই কী লুকাব?

আমি পরিবর্তনগুলি করেছি এবং সুতাটি আবার চালু করেছি। আমি কী ভুল করছি তা আমি নিশ্চিত নই –– আমি .envআমার প্রকল্পের মূলটিতে একটি ফাইল যুক্ত করেছি (আমি নাম দিয়েছি process.env) এবং যে ফাইলটি আমি রেখেছি REACT_APP_API_KEY = 'my-secret-api-key'।

আমি ভাবছিলাম এটি fetchএপিস.জেজে আমার কী-টি যুক্ত করার উপায় হতে পারে এবং আমি টেম্পলেটটি আক্ষরিক ব্যবহার না করে একাধিক ফর্ম্যাট চেষ্টা করেছি, তবে আমার প্রকল্পটি এখনও সংকলন করবে না।

কোন সাহায্যের অনেক প্রশংসা করা হয়।

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

Comments

এর পরিবর্তে process.envএটির নাম দিন .env.local or .env.process এবং এটি

— এসসিআর

হাই @RYAJKHAN আমি ফাইলটি .env.local এ পরিবর্তন করেছি এবং এটি অবশ্যই এসআরসি ডিরেক্টরি থেকে বাইরে রয়েছে তবে আমি এখনও পেয়ে যাচ্ছি REACT_APP_API_KEY সংজ্ঞায়িত করা হয়নি: /

— বিয়ানকা এম

আমার জন্য এটি কী স্থির করে তা হ'ল আমার স্থানীয় ডেভ সার্ভারটি চালানো টার্মিনালটি বন্ধ করে আবার চলমান npm run start।

— n00bAppDev

প্রতিক্রিয়া অ্যাপে আপনি গোপনীয়তা লুকিয়ে রাখতে পারবেন না। Stackoverflow.com/a/46839021/4722345 দেখুন

— JBallin

গোপনীয়তা সংরক্ষণ করতে এটি ব্যবহার করবেন না। দস্তাবেজগুলি থেকে ...WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

— নিশান্ত মেহতা

Answer 1

4 পদক্ষেপ

1. npm install dotenv --save

2. এরপরে আপনার অ্যাপে নিম্নলিখিত লাইনটি যুক্ত করুন।

   require('dotenv').config()

3. তারপরে .envআপনার অ্যাপ্লিকেশনটির মূল ডিরেক্টরিতে একটি ফাইল তৈরি করুন এবং এতে ভেরিয়েবল যুক্ত করুন।

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. অবশেষে, .envআপনার .gitignoreফাইলে যুক্ত করুন যাতে গিট এটিকে উপেক্ষা করে এবং এটি কখনই গিটহাবের মধ্যে শেষ হয় না।

আপনি যদি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করে থাকেন তবে আপনার কেবলমাত্র পদক্ষেপ 3 এবং 4 প্রয়োজন তবে REACT_APP_এটির কাজটি শুরু করার জন্য পরিবর্তনশীল প্রয়োজনীয়তার কথা মনে রাখবেন ।

তথ্যসূত্র: https://create-react-app.dev/docs/adding-custom-en पर्यावरण- পরিবর্তনশীল /

দ্রষ্টব্য - .env ফাইলে ভেরিয়েবল যুক্ত করার পরে অ্যাপ্লিকেশনটি পুনরায় চালু করতে হবে।

তথ্যসূত্র - https://medium.com/@thejasonfile/using-dotenv-package-to-create-en वातावरण-variables- 33da4ac4ea8f

Comments

.env ফাইলে ভেরিয়েবল যুক্ত করার পরে অ্যাপ্লিকেশনটি পুনরায় চালু করতে হবে vari "ক্রিয়ে-রিএ্যাক্ট-অ্যাপ" ব্যবহার করে আপনি যদি ভেরিয়েবল অ্যাপ্লিকেশন তৈরি করেন তবে ভেরিয়েবল নামের আগে "REACT_APP_" ব্যবহার করুন।

— বিকাশ

@ আর্টজেন চুগ যদি আমি উদাহরণস্বরূপ আমার অ্যাপ্লিকেশনটি এডাব্লুএসে স্থাপন করি। যেহেতু .env গিটিগনোরের একটি অঙ্গ, তাই কি এটি উপেক্ষা করা হবে না? আমি এর উত্পাদন সহ কীভাবে যেতে পারি?

— ব্যবহারকারী 2763557

আমি কোথায় যুক্ত করব require('dotenv').config()? কোন ফাইল?

— akteifan

@ অ্যাকটিফান আপনার এই স্নিপেট যুক্ত করার দরকার নেই, তবে তারপরে .ENV ফাইলের নামকরণ একটি গুরুত্বপূর্ণ ভূমিকা পালন করে

— পরীক্ষিত

@ ব্যবহারকারী2763557 আমি যে প্যাটার্নটি ব্যবহার করি তা হ'ল এমন একটি .env.exampleফাইল তৈরি করা যেখানে এনভির কীগুলির সংজ্ঞা নির্ধারণ করা হয়। তারপরে, আপনি অনুলিপি করতে পারেন .env.exampleএবং একটি .envফাইল তৈরি করতে পারেন (বিকাশ এবং উত্পাদনে) আপনার বৈধ মানগুলি যেমন কীগুলি, বেস ইউআরএল ইত্যাদি থাকে আপনাকে .envফাইলটি যুক্ত করতে হবে .gitignore।

— আদিস আজাহার

Answer 2

সুতরাং আমি নিজেকে প্রতিক্রিয়াতে নতুন এবং আমি এটি করার একটি উপায় খুঁজে পেয়েছি।

এই সমাধানের জন্য কোনও অতিরিক্ত প্যাকেজ প্রয়োজন হয় না ।

পদক্ষেপ 1 রিঅ্যাক্টডোকস

উপরের ডক্সে তারা শেল এবং অন্যান্য বিকল্পগুলির রফতানির কথা উল্লেখ করে, আমি যার ব্যাখ্যা করার চেষ্টা করব সেটি হ'ল .env ফাইলটি ব্যবহার করা

1.1 রুট / .env তৈরি করুন

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

গুরুত্বপূর্ণ নোট এটা হবে দিয়ে শুরু REACT_APP_

1.2 অ্যাক্সেস ENV পরিবর্তনশীল

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 এনভ ইস্যু তৈরি করুন

সুতরাং আমি 1.1 | 2 পদক্ষেপটি করার পরে এটি কাজ করছে না, তারপরে আমি উপরের সমস্যা / সমাধানটি পেয়েছি। রিভিড রিড / এনভিটি তৈরির সময় প্রতিক্রিয়া জানায় তাই প্রতিবার আপনি .env ফাইলটি সংশোধন করার জন্য এনপিএম রান শুরু করা দরকার যাতে ভেরিয়েবলগুলি আপডেট হয়।

Comments

আমার মতে এটিই সঠিক উত্তর! কোনও অতিরিক্ত প্যাকেজ প্রয়োজন নেই, এবং পরিবেশ ভেরিয়েবলগুলি আমদানির জন্য সঠিক প্রতিক্রিয়া। অন্যান্য উপায়ে কাজ করবে, তবে এটি ইতিমধ্যে আপনার জন্য হয়ে গেলে কেন প্যাকেজ এবং কোড কনফিগারেশন যুক্ত করবেন? দুর্দান্ত উত্তর!

— রায়য়ান

আমি REACT_APP_আপনাকে ধন্যবাদ অনুপস্থিত ছিল । অন্য কোনও ব্যক্তি এটি উল্লেখ করেননি।

— রোটিমি-সেরা

এটি কোনও কারণে আমার পক্ষে কাজ করে নি। আমি পেয়েছিundefined

— Si8

@ Si8 আপনি ত্রুটি / প্রক্রিয়া প্রসারিত করতে পারে? কোন পদক্ষেপটি আপনি পেয়েছেন undefined, আপনি একটি নতুন পরিবর্তনশীল যোগ করার পরে অ্যাপ্লিকেশন পুনরায় আরম্ভ করার জন্য .env 1.3 এবং দেখতেও পেত না

— T04435

আমি সব চেষ্টা করেছি। process.env.REACT_APP_API_KEYবলে undefined।

— মিশেল রেজেন

Answer 3

আজ এটি করার একটি সহজ উপায় রয়েছে।

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

REACT_APP_API_KEY = 'my-secret-api-key'

তারপরে আপনি এটিকে আপনার জেএস ফাইলটিকে কল করুন:

process.env.REACT_APP_API_KEY

প্রতিক্রিয়া প্রতিক্রিয়া স্ক্রিপ্টগুলি ০.০.০.০ থেকে পরিবেশ পরিবর্তনশীলকে সমর্থন করে that এটি করার জন্য আপনার বাহ্যিক প্যাকেজ দরকার নেই।

https://facebook.github.io/create-react-app/docs/adding-custom-en वातावरण- পরিবর্তনশীল#adding-de વિકાસment- পরিবেশ- পরিবর্তনশীল- ইন-env

* দ্রষ্টব্য: আমি .env এর পরিবর্তে .env.local প্রস্তাব করছি কারণ প্রকল্প তৈরি করার সময় তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনটি এই ফাইলটিকে গিটিগনরে যুক্ত করে।

ফাইল অগ্রাধিকার:

এনপিএম স্টার্ট: .env.de વિકાસment.local, .env.de વિકાસment, .env.local, .env

এনপিএম রান বিল্ড: .এনভি.প্রডাকশন.লোকাল, .এনভি.প্রডাকশন, .এনভি.লোকাল, .এনভি

এনপিএম পরীক্ষা: .env.test.local, .env.test, .env (নোট .env.local অনুপস্থিত)

আরও তথ্য: https://facebook.github.io/create-react-app/docs/adding-custom-en पर्यावरण- পরিবর্তনশীল

Comments

সঠিক নামকরণ আমার পক্ষে কাজটি করেছে। আমি .env.dev ব্যবহার করেছি এবং প্রতিক্রিয়া .env.de વિકાસের সন্ধানের সাথে সাথে .env এ ফিরে গিয়েছিলাম

— Omnibyte

Answer 4

ওয়েবপ্যাক ব্যবহারকারীরা

আপনি যদি ওয়েবপ্যাক ব্যবহার করছেন তবে dotenv-webpackনীচের পদক্ষেপগুলি অনুসরণ করতে আপনি প্লাগইন ইনস্টল ও ব্যবহার করতে পারেন :

প্যাকেজ ইনস্টল করুন

yarn add dotenv-webpack

একটি .envফাইল তৈরি করুন

// .env
API_KEY='my secret api key'

এটি যোগ করুন webpack.config.jsফাইল

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

আপনার কোড হিসাবে এটি ব্যবহার করুন

process.env.API_KEY

আরও তথ্য এবং কনফিগারেশন তথ্যের জন্য, এখানে যান

Comments

আপনি যদি ওয়েবপ্যাক-ডেসারভার ব্যবহার করছেন তবে এটি পুনরায় আরম্ভ না করা পর্যন্ত আপনি পরিবর্তনগুলি দেখতে পাবেন না।

— ইসহাক পাক 21

এটি আমার জন্য সেরা সমাধান ছিল। ধন্যবাদ একটি নোট: আমি সার্ভার সাইড রেন্ডারিং ব্যবহার করছি, সুতরাং আমাকে উভয় ওয়েবপ্যাক ফাইল আপডেট করতে হয়েছিল (ক্লায়েন্টও)।

— হোর্হে মরিসিও

@ আমিনু কানো আপনি কি দয়া করে আমাকে ব্যাখ্যা করতে পারছেন যে আমি যদি সোর্সগুলিতে বান্ডেল.জেএস ফাইলটি অনলাইনে দেখি তবে এপি-কীটি এখনও দৃশ্যমান থাকে তবে এই পদ্ধতির ব্যবহারের কী উপায়?

— লিনাস এম।

@ লিনাসম হ্যাঁ নিশ্চিত, তবে "অনলাইন" বলতে কী বোঝ?

— আমিনু কানো

@ আমিনোকানো, হ্যাঁ, বিষয়টি খুব স্পষ্টভাবে ব্যাখ্যা করেছে। ধন্যবাদ

— লিনাস এম।

Answer 5

আপনার রুট ফোল্ডারে .env ফাইলটি তৈরি করুন

কিছু উত্স ব্যবহার করতে পছন্দ করে .env.developmentএবং .env.productionএটি বাধ্যতামূলক নয়।

২. আপনার ভ্যারিয়েবল-নামটির নাম- REACT_APP_YOURVARIABLENAME দিয়ে শুরু হবে

মনে হচ্ছে আপনার পরিবেশের পরিবর্তনশীল যদি এটির মতো শুরু না হয় তবে আপনার সমস্যা হবে

৩. আপনার পরিবর্তনশীল অন্তর্ভুক্ত করুন

আপনার পরিবেশ পরিবর্তনশীল অন্তর্ভুক্ত করতে আপনার কোডটি রেখে দিন process.env.REACT_APP_VARIABLE

আপনাকে কোনও বাহ্যিক নির্ভরতা ইনস্টল করতে হবে না

Comments

আমি একই জিনিসটি করি তবে এটি কনসোলে

— অপরিজ্ঞাত

যদি আপনি মানগুলি অপরিজ্ঞাতকৃত হিসাবে পেতে থাকেন তবে পুনরায় সংশোধন করুন।

— অজানা

পুনরায় কম্পাইল করার পরে এখনও অপরিজ্ঞাত। console.log('process', process.env.REACT_APP_BASE_URL);

— সনাত গুপ্ত

Answer 6

আপনাকে এনপিএম ইনস্টল করতে হবে এনভি-সেমিডি

রুট ডিরেক্টরিতে .env তৈরি করুন এবং এর মতো আপডেট করুন & REACT_APP_ পরিবর্তনশীল নামের জন্য বাধ্যতামূলক উপসর্গ।

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

প্যাকেজ.জসন আপডেট করুন

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Answer 7

1. dotenvডেভডিপেন্ডেন্স হিসাবে ইনস্টল করুন :

npm i --save-dev dotenv

2. .envরুট ডিরেক্টরিতে একটি ফাইল তৈরি করুন :

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. .envনীচের মত ফাইল আপডেট করুন এবং REACT_APP_ পরিবর্তনশীল নামের জন্য বাধ্যতামূলক উপসর্গ।

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

4. [ Butচ্ছিক তবে ভাল অনুশীলন ] এখন আপনি ভেরিয়েবলগুলি সংরক্ষণ করতে এবং পরিবর্তনশীলটি রফতানি করতে একটি কনফিগারেশন ফাইল তৈরি করতে পারেন যাতে এটি অন্যের ফাইল থেকে ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, আমি একটি ফাইল তৈরি করেছি base.jsএবং নীচের মত এটি আপডেট করেছি:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

5. অথবা আপনি কেবল নীচের উপায়ে আপনার জেএস ফাইলটিতে পরিবেশ পরিবর্তনশীল বলতে পারেন:

process.env.REACT_APP_BASE_URL

Comments

কেবলমাত্র একটি একক .envফাইল ব্যবহার করার সময় আপনি কীভাবে ডেভ এবং প্রোড পরিবেশের মধ্যে পার্থক্য করতে পারেন ? আমি সচেতন যদি আমাদের তৈরি করতে .env.developmentএবং .env.prodফাইলগুলি তৈরি করা দরকার তবে আমরা কীভাবে তাদের পদ্ধতি ব্যবহার করে তাদের মধ্যে পার্থক্য করব?

— আমেয়ারেজে

@ আামায়ারাজে মূলত, আমরা .envআমাদের ফাইলটি উপেক্ষা করি .gitignore। সুতরাং, স্থাপনার সময়, আমরা কেবল .envফাইলটি আমাদের সার্ভারে অনুলিপি করি এবং কেবল BASE_URL এবং অন্যান্য প্রয়োজনীয় মানগুলি পরিবর্তন করি । এইভাবে, যখন এটি সর্বশেষতম কোড মোতায়েন করা দরকার, আমরা কেবল গিট মাস্টার থেকে টানতে এবং এটি স্থাপন করি। আমরা .envএটিকে এড়িয়ে যাচ্ছি এবং আমাদের সার্ভারে একেবারে শুরুতে সেট করে দেওয়ার বিষয়ে আমরা ভাবি না । ধন্যবাদ!

— ফাতেমা টি। জুহোরা

process.env.REACT_APP_API_KEY অপরিবর্তিত মান দেখাচ্ছে না। আমি সার্ভারটি বন্ধ করে দিয়ে এনপিএম স্টার্ট দিয়ে পুনরায় শুরু করেছি

— বিক্রমভি

@vikramvi আপনি কি REACT_APP_BASE_URL.env ফাইলে একই নামের একটি ভেরিয়েবলের মান রেখেছেন?

— ফাতেমা টি। জুহোরা

@ ফাতেমাটি.জুহোড়া এটি আমার খারাপ ছিল, আমি মূল ডিরেক্টরিতে রাখার পরিবর্তে ভুল করে শিশু ডিরেক্টরিতে .env স্থাপন করেছিলাম

— বিক্রমভি

Answer 8

যদি আপনি এই মানগুলি পেয়ে undefinedযাচ্ছেন তবে নোড সার্ভারটি পুনরায় চালু করার বিষয়টি আবার বিবেচনা করা উচিত।