My site neramclasses.com was working fine few days back.
Today, I tried to change some content and did npm run build and deploy to firebase hosting.
My build folder is created good with all the images and contents. When I run the build index.html with serve, it is also working fine.
When I deploy it to the firebase with firebase deploy from today the page is not working. No image links , page links etc.. nothing is working but I see all the files are uploaded to firebase in firebase console.
.firebase/hosting.YnVpbGQ.cache is created on deploy which also shows all the files
My firebase.json is
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
My scripts in package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sitemap": "babel-node ./sitemap-generator.js",
"predeploy": "npm run sitemap"
},
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/images/favicon/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="Unlock your architectural dreams with our comprehensive NATA coaching center, serving aspiring architects in Trichy, Chennai, Madurai, Coimbatore, Tiruppur, Pudukkottai, and across Tamil Nadu. Our expert tutors blend online and offline learning, ensuring top-notch preparation for NATA exams. Join us for personalized guidance, extensive study materials, and interactive sessions. Discover your path to success, whether you're in Tamil Nadu or the UAE. Enroll today and sculpt your future in architecture!"
content="A well Architected NATA Coaching center"
/>
<meta
property="og:image"
content="https://neramclasses.com/images/instagram.jpg"
/>
<link
rel="apple-touch-icon"
href="%PUBLIC_URL%/images/favicon/apple-icon-60x60"
/>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Handlee&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Bakbak+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Suez+One&display=swap"
rel="stylesheet"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>neramClasses - Online / Offline NATA coaching classroom</title>
</head>
<body>
<noscript
>neram classes is a online/offline NATA coaching center located in chennai
- Tambaram & Anna Nagar, Trichy, Madurai, Coimbatore, Tiruppur,
Pudukkottai.Neram Classes is an entrance exam coaching center, primarily
focusing on architecture exams such as NATA and JEE-MAINs. We are
committed to giving back to society by providing coaching to students from
smaller towns and rural areas. Established in 2017 by alumni from
.....etc.</noscript
>
<div id="root"></div>
</body>
</html>
Am adding some screenshots of whats happening before and after deploy:
In the after image Javascript is interepted as html only content in the index meta data is shown
2nd Image
No file is pushed in root from App.js, also errors
I'm a beginner in web development. I tried every answer from stack overflow and chatgpt but no luck for me. Anyone willing to answer kindly explain in basic level. As for as my understanding, after deploying, the chunk.js files are considered as html file instead of js.
I tried
- delete node modules , package json and npm install
- I tried reinstalling firebase
- I npm build many times and firebase deploy many times.
- If the local build works fine with npx serve -s build but the deployment serves JavaScript files as HTML, the issue is likely related to Firebase hosting configuration or deployment process.
