Page 404 Not Found After Reloading React Application that is hosted in Firebase

 

 ফায়ারবেইজে আমদের React Application হোস্ট করলে আমরা  বেশিরভাগ সময় এই এরর দেখে থাকি   😑

সমস্যার কারণঃ 🤔

ফায়ারবেইজে হোস্টিং স্টেপ এ আমরা   Configure as a single-page app (rewrite all urls to /index.html)? (y/N)  No দেওয়ার কারণে  আমাদের এপ্লিকেশন single page  হিসেবে কাজ করছে না।

সমাধান এর উপায়ঃ 😀

Step-1:  

VS  Code  থেকে আপনার   firebase.json ফাইল ওপেন করুন ।  এটি নিচের মত দেখাবে

Step-2:  

নিচের  json  দিয়ে  এটা রি-প্লেস করে দিন ।

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Replace  করার পর এমন দেখাবে -->

Step-3: 

build folder  delete করে দিয়ে আবার npm run build দিন । আপনার নতুন করে build folder  তৈরি  হবে । 

Step-4:  

এবার  firebase deploy কমান্ড দিন  । তাহলে ডিপ্লয় হয়ে যাবে ।

Step-5:   

৩ minute পর আপনার লাইভ লিঙ্ক chrome browser  গিয়ে আপনার লাইভ লিঙ্ক হিট করুন ।  console tab ওপেন রেখে reload button এ মাউস  চেপে ধরে empy cache and hard reload করেন কয়েকবার। সার্ভার আপডেট হতে একটু সময় লাগে তাই ৩ মিনিট কমপক্ষে অপেক্ষা করবেন।

সমাধান হয়ে গেলে আয়নায় নিজেকে  দেখে দাত ৩২ টা বের করে হাসি দিন । 

                                                                        😁