অ্যাপ্লিকেশন ভিত্তিক-তৈরির প্রকল্পগুলিতে ফন্টগুলি কীভাবে যুক্ত করবেন?

Question

আমি ব্যবহার করছি তৈরি-প্রতিক্রিয়া-অ্যাপ এবং পছন্দ না করেন eject।

এটি স্পষ্ট নয় যেখানে ফন্টগুলি ফন্টের মাধ্যমে আমদানি করা হবে এবং স্থানীয়ভাবে লোড হওয়া উচিত।

যথা, আমি লোড করছি

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

কোনও পরামর্শ?

- সম্পাদনা

ড্যান তার উত্তরে উল্লেখ করেছেন এমন সংক্ষেপ সহ

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

Comments

আপনি কি এর ব্যবহারকারী নির্দেশিকাতে "ফন্ট যোগ করার" বিভাগটি পরীক্ষা করেছেন?

— ড্যান আব্রামভ

আমার কাছে ড্যানআব্রামভ, সুপারিশটি হ'ল ফন্টটি আমদানি করা। তবে অনুশীলনে এটি কীভাবে করা উচিত সে সম্পর্কে এটি পরিষ্কার নয় (কমপক্ষে আমার কাছে নয়) I মধ্যবর্তী সময়ে আমি এই gist.github.com/maximveksler/5b4f80c5ded20237c3deebc82a31dcd5 করেছি এবং এটি কাজ করছে বলে মনে হচ্ছে (ওয়েব প্যাক সতর্কতা যদি এটি কোনও ফন্ট ফাইল খুঁজে না পায়) তবে আমি নিশ্চিত যে এটি সর্বোত্তম সমাধান এবং একটি উদাহরণ নয় বা এটি এখানে নথিভুক্ত করা সাহায্য করবে। পৌঁছানোর জন্য ty!

— ম্যাক্সিম ভেক্সলার 12

আমি উত্তর দিলাম। আপনার দৃষ্টিভঙ্গি আমার কাছে ভুল দেখাচ্ছে: %PUBLIC_URL%একটি সিএসএস ফাইলে কাজ করতে পারে না (এবং অপ্রয়োজনীয়)। এছাড়াও, গাইডে বর্ণিত হিসাবে, আপনার পাবলিক ফোল্ডারটি নয়, প্রায় সব ক্ষেত্রেই জেএস আমদানি ব্যবহার করা উচিত।

— ড্যান আব্রামভ

হরফের জন্য নির্দিষ্ট ফোল্ডারটি স্ক্যান করতে এবং সমস্ত ফন্টের বৈচিত্র সহ স্ক্রিপ্ট ফাইল তৈরি করার জন্য কি কোনও ইউটিলিটি / প্যাকেজ রয়েছে? এটি সমস্ত ম্যানুয়ালি লিখতে বিরক্তিকর

— হেলোরল্ড

Answer 1

দুটি বিকল্প রয়েছে:

আমদানি ব্যবহার করা হচ্ছে

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

"চিত্র, ফন্ট এবং ফাইল যুক্ত করা" তে বর্ণিত হিসাবে আপনার জেএস থেকে একটি সিএসএস ফাইল আমদানি করা দরকার। উদাহরণস্বরূপ, ডিফল্ট src/index.jsআমদানি দ্বারা src/index.css:

import './index.css';

এর মতো একটি সিএসএস ফাইল বিল্ড পাইপলাইন দিয়ে যায় এবং হরফ এবং চিত্রগুলি উল্লেখ করতে পারে। উদাহরণস্বরূপ, আপনি যদি কোনও ফন্ট রাখেন তবে src/fonts/MyFont.woffআপনার index.cssএতে অন্তর্ভুক্ত থাকতে পারে:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

লক্ষ্য করুন আমরা কীভাবে কোনও আপেক্ষিক পথটি ব্যবহার করছি ./। এটি একটি বিশেষ স্বরলিপি যা পাইপলাইন তৈরি করতে সহায়তা করে (ওয়েবপ্যাক দ্বারা চালিত) এই ফাইলটি আবিষ্কার করতে।

সাধারণত এটি পর্যাপ্ত হওয়া উচিত।

publicফোল্ডার ব্যবহার করে

যদি কোনও কারণে আপনি বিল্ড পাইপলাইনটি ব্যবহার না করা পছন্দ করেন এবং পরিবর্তে এটি "সর্বোত্তম উপায়" করেন তবে আপনি ফোল্ডারটি ব্যবহার করতে পারেনpublic এবং আপনার ফন্টগুলি সেখানে রাখতে পারেন।

এই পদ্ধতির খারাপ দিকটি হ'ল আপনি যখন উত্পাদনের জন্য সংকলন করেন তখন ফাইলগুলি হ্যাশ পায় না তাই প্রতিবার আপনি যখন সেগুলি পরিবর্তন করবেন তাদের নামগুলি আপডেট করতে হবে, বা ব্রাউজারগুলি পুরানো সংস্করণগুলিকে ক্যাশে করবে ache

আপনি এটি এই ভাবে কাজ করতে চান তাহলে, হরফ কোথাও পুরা publicফোল্ডারের, উদাহরণস্বরূপ, মধ্যে public/fonts/MyFont.woff। আপনি যদি এই পদ্ধতির অনুসরণ করেন তবে আপনার সিএসএস ফাইলগুলিও publicফোল্ডারে রেখে দেওয়া উচিত এবং এটিকে জেএস থেকে আমদানি করা উচিত নয় কারণ এই পদ্ধতির মিশ্রণটি খুব বিভ্রান্তিকর হতে চলেছে। সুতরাং, আপনি যদি এখনও এটি করতে চান তবে আপনার কাছে একটি ফাইল থাকতে হবে public/index.css। <link>আপনাকে এই স্টাইলশীটটিতে ম্যানুয়ালি যোগ করতে হবে public/index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

এবং এর অভ্যন্তরে, আপনি নিয়মিত সিএসএস স্বরলিপি ব্যবহার করবেন:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

আমি কীভাবে fonts/MyFont.woffপথ হিসাবে ব্যবহার করছি তা লক্ষ্য করুন । এ কারণে যে index.cssহয়public ফোল্ডারের তাই এটি পাবলিক পথ থেকে সার্ভ করা হবে (সাধারণত এটা সার্ভার রুট, কিন্তু যদি আপনি GitHub পৃষ্ঠাগুলিতে স্থাপন এবং আপনার সেট homepageথেকে ক্ষেত্র http://myuser.github.io/myproject, তা থেকে সার্ভ করা হবে /myproject)। তবে fontsরয়েছে publicফোল্ডারের, তাই তারা থেকে সার্ভ করা হবে fontsঅপেক্ষাকৃত (হয় http://mywebsite.com/fontsবা http://myuser.github.io/myproject/fonts)। অতএব আমরা আপেক্ষিক পথটি ব্যবহার করি।

নোট করুন যেহেতু আমরা এই উদাহরণে বিল্ড পাইপলাইন এড়াচ্ছি, এটি ফাইলটি আসলে বিদ্যমান কিনা তা যাচাই করে না। এই কারণেই আমি এই পদ্ধতির প্রস্তাব দিই না। আর একটি সমস্যা হ'ল আমাদের index.cssফাইলটি মিনিফাইড হয় না এবং হ্যাশ পায় না। সুতরাং এটি শেষ ব্যবহারকারীদের জন্য ধীর হতে চলেছে, এবং আপনি ব্রাউজারগুলিকে ফাইলের পুরানো সংস্করণগুলি ক্যাশে করতে ঝুঁকিপূর্ণ করছেন।

 কোন উপায়টি ব্যবহার করবেন?

প্রথম পদ্ধতিটির সাথে যান ("আমদানি ব্যবহার করে")। আপনি কেবল যা করার চেষ্টা করেছিলেন (আমি আপনার মন্তব্যে বিচার করে) সেহেতু আমি কেবল দ্বিতীয়টিই বর্ণনা করেছি তবে এতে অনেক সমস্যা রয়েছে এবং আপনি যখন কোনও সমস্যা নিয়ে কাজ করছেন তখন কেবল এটিই শেষ অবলম্বন হওয়া উচিত।

Comments

দস্তাবেজের একটি উদাহরণ কার্যকর হবে,

— টম

আমি দেখতে পেলাম যে আমাকে আসলে url ./fonts/Myfont.woff ব্যবহার করতে হবে এবং না ./Myfont.woff

— th3morg

যদি কেউ কোনও ttfফন্ট যুক্ত করে থাকে তবে আপনার পরামিতিটি *truetype এর পরিবর্তে দেওয়া উচিত । ttfformat

— মিল্কারসারাক

@ মিলাকার্স আপনি সেরা!

— জোও ভাইলা

@Milkersarac অনুসরণ যদি আপনি ব্যবহার করছেন otfআপনি করা প্রয়োজন opentype।

— কার্ল টেলর

Answer 2

এটি করার কিছু উপায় এখানে রইল:

1. ফন্ট আমদানি করা হচ্ছে

উদাহরণস্বরূপ, রোবোটো ব্যবহারের জন্য, প্যাকেজটি ব্যবহার করে ইনস্টল করুন

yarn add typeface-roboto

অথবা

npm install typeface-roboto --save

ইনডেক্স.জেজে:

import "typeface-roboto";

প্রচুর ওপেন সোর্স ফন্ট এবং বেশিরভাগ গুগল ফন্টের জন্য এনপিএম প্যাকেজ রয়েছে। আপনি এখানে সব ফন্ট দেখতে পারেন । সমস্ত প্যাকেজ আছে প্রকল্পের ।

২. তৃতীয় পক্ষের হোস্ট করা ফন্টগুলির জন্য

উদাহরণস্বরূপ, গুগল ফন্টস, আপনি fouts.google.com এ যেতে পারেন যেখানে আপনি যে লিঙ্কগুলি রাখতে পারেন তা পেতে পারেনpublic/index.html

ভালো লাগবে

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

অথবা

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

৩. ফন্টটি ডাউনলোড করে এটি আপনার সোর্স কোডে যুক্ত করুন।

ফন্টটি ডাউনলোড করুন। উদাহরণস্বরূপ, গুগল ফন্টগুলির জন্য, আপনি fouts.google.com এ যেতে পারেন । ফন্টটি ডাউনলোড করতে ডাউনলোড বোতামে ক্লিক করুন।

fontsআপনার srcডিরেক্টরিতে ফন্টটি ডিরেক্টরিতে সরান

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

এখন, App.cssএটিকে যোগ করুন

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

জন্য ttfফরম্যাট, আপনি উল্লেখ করতে হবে format('truetype')। জন্যwoff ,format('woff')

এখন আপনি ক্লাসে ফন্ট ব্যবহার করতে পারেন।

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

৪. ওয়েব-ফন্ট-লোডার প্যাকেজ ব্যবহার করা

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

yarn add webfontloader

অথবা

npm install webfontloader --save

ইন src/index.js, আপনি এটি আমদানি করতে পারেন এবং প্রয়োজনীয় ফন্টগুলি নির্দিষ্ট করতে পারেন

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});

Comments

— সেভটি

@ নাটালি মন্তব্যের জন্য আপনাকে ধন্যবাদ, আমি আনন্দিত যে এনপিএম এই পরিবর্তন করেছে।

— sudo bangbang

@ সুডোবাংবাং ধন্যবাদ, সমাধান # 3 আমার পক্ষে কাজ করেছে। তবে - একটি উপায় আছে লাগাতে নয় fontsঅধীনে ফোল্ডারের srcকিন্তু অধীনে publicপরিবর্তে? আমি চেষ্টা করেছিলাম, তবে এটি অনুমোদিত নয় বলে মনে হচ্ছে ...

— ইয়াসি ভেনস্টাইন

@ ইউসিভিয়েনস্টেইন, আমার মনে হয় না। আপনি যেমন App.css এ হরফ ব্যবহার করছেন, এটি এটি দিয়ে সংকলন করা উচিত।

— sudo bangbang

For ttf format, you have to mention format('truetype'). For woff, format('woff')এটা আমার জন্য! ধন্যবাদ!

— জোসেফ ব্রিগেস

Answer 3

1. গুগল ফন্টে যান https://fouts.google.com/
2. নীচে ছবিতে প্রদর্শিত হিসাবে আপনার ফন্ট নির্বাচন করুন:

3. অনুলিপি করুন এবং তারপরে সেই ইউআরএলটিকে নতুন ট্যাবে আটকান আপনি সেই ফন্টটি যুক্ত করার জন্য সিএসএস কোড পাবেন। এই ক্ষেত্রে যদি আপনি যান

https://fonts.googleapis.com/css?family=Spicy+Rice

এটি এভাবে খোলা হবে:

4, আপনার স্টাইল। CSS এ কোডটি অনুলিপি করুন এবং আটকান এবং কেবল এই জাতীয় ফন্টটি ব্যবহার শুরু করুন:

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

ফলাফল:

Comments

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

— অ্যানবিসউ

Answer 4

আপনি ওয়েবফন্ট মডিউলটি ব্যবহার করতে পারেন যা প্রক্রিয়াটি ব্যাপকভাবে সরল করে।

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

Answer 5

আমি এইভাবে ভুল করছি।

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

এটি এইভাবে সঠিকভাবে কাজ করে

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

Answer 6

এই স্ট্যাক প্রশ্নটিতে নামার পরে আমি পুরো সকালটি একই ধরণের সমস্যার সমাধান করতে কাটিয়েছি। আমি উপরের উত্তরে ড্যানের প্রথম সমাধানটি জাম্প পয়েন্ট হিসাবে ব্যবহার করেছি।

সমস্যা

আমার একটি ডেভ আছে (এটি আমার স্থানীয় মেশিনে রয়েছে), মঞ্চায়ন এবং উত্পাদন পরিবেশ। আমার মঞ্চায়ন এবং উত্পাদন পরিবেশ একই সার্ভারে লাইভ।

অ্যাপটি স্টেজিংয়ের জন্য মোতায়েন করা হয়েছে acmeserver/~staging/note-taking-appএবং প্রোডাকশন সংস্করণটি acmeserver/note-taking-app(দোষ আইটি) এ বাস করে।

ফন্টের মতো সমস্ত মিডিয়া ফাইলগুলি ডিভ (যেমন, react-scripts start) এ পুরোপুরি সূক্ষ্মভাবে লোড হচ্ছে ।

যাইহোক, যখন আমার তৈরি ও আপলোড করা উপস্থাপনকারী এবং উৎপাদন তৈরী করে, যখন .cssএবং .jsফাইল ঠিকমত লোড হচ্ছে সেটা, হরফ ছিল না। সংকলিত .cssফাইলটির সঠিক পথ রয়েছে বলে মনে হয়েছে কিন্তু ব্রাউজারের এইচটিপি অনুরোধটি কিছু খুব ভুল পথ পাচ্ছে (নীচে দেখানো হয়েছে)।

সংকলিত main.fc70b10f.chunk.cssফাইল:

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

ব্রাউজার HTTP অনুরোধ নীচে প্রদর্শিত হবে। /static/css/ফন্ট ফাইলটি কেবল যখন বাস করে এবং /static/media/গন্তব্য ফোল্ডারটি সদৃশ করার সময় এটি কীভাবে যুক্ত হয় তা নোট করুন । আমি সার্ভার কনফিগারেশনটিকে অপরাধী বলে উড়িয়ে দিয়েছি।

Refererআংশিকভাবে ভুল অত্যধিক।

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

package.jsonফাইল ছিল homepageথেকে সম্পত্তি সেট ./note-taking-app। এটি সমস্যার কারণ ছিল।

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

সমাধান

এটি দীর্ঘায়িত ছিল - তবে সমাধানটি হ'ল:

1. পরিবর্তন PUBLIC_URLপরিবেশের উপর নির্ভর করে env পরিবর্তনশীল
2. ফাইল homepageথেকে সম্পত্তি অপসারণpackage.json

নীচে আমার .env-cmdrcফাইল আছে। আমি .env-cmdrcনিয়মিত ওভার ব্যবহার করি .envকারণ এটি একটি ফাইলে সবকিছু একসাথে রাখে।

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

রাউটিংয়ের মাধ্যমে react-router-domখুব ভাল কাজ করে - কেবল সম্পত্তি PUBLIC_URLহিসাবে এনভির ভেরিয়েবল ব্যবহার করুন basename।

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

সার্ভার কনফিগারেশন ./index.htmlফাইলটিতে সমস্ত অনুরোধ রুট সেট করা আছে ।

অবশেষে, main.fc70b10f.chunk.cssআলোচিত পরিবর্তনগুলি কার্যকর করার পরে সংকলিত ফাইলটি দেখতে কেমন তা এখানে রয়েছে ।

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

পড়ার উপাদান

• https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

• https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

• https://create-react-app.dev/docs/advanced-configuration

  • এটি PUBLIC_URLপরিবেশের পরিবর্তনশীল ব্যাখ্যা করে

    প্রতিক্রিয়াযুক্ত অ্যাপ্লিকেশনটি ধরে নেয় আপনার অ্যাপ্লিকেশনটি সার্ভিং ওয়েব সার্ভারের মূল বা প্যাকেজ.জসনে (হোমপেজ) উল্লিখিত একটি সাবপথে হোস্ট করা আছে। সাধারণত, তৈরি প্রতিক্রিয়া অ্যাপ্লিকেশনটি হোস্টটির নাম উপেক্ষা করে। আপনি সরবরাহ করে এমন ইউআরএলকে হোস্টেটটি রেফারেন্স করতে বাধ্য করতে আপনি এই পরিবর্তনশীলটি ব্যবহার করতে পারেন (হোস্টনাম অন্তর্ভুক্ত)। আপনার অ্যাপ্লিকেশনটি হোস্ট করার জন্য সিডিএন ব্যবহার করার সময় এটি বিশেষত কার্যকর হতে পারে।