Firebase not displaying css properly

Question

i'm working on a college project and my coding skills aren't the greatest. I've created a Firebase project to host a temporary website. The website is going to be developed using bootstrap. When i connect to the site after it has been deployed there is no styling present at all. However when i run the same index.html & CSS code on codeply or jsbin it appears exactly how i want it to. Can anyone think of anything that might be causing the issue? It's been wrecking my head for a very long week! Any pointers would be great. Here is a link to my git with the latest code: https://github.com/Realcolm/New-Gers-Garage/tree/Update-CSS

Catamite

cntrl + shift + i then right click the reload icon and choose "Empty Cache And Hard Reload" – Jumpy

Answer 1

This is due to the browser caching your styles. To fix it just use a hard refresh on the browser you are using. Ctrl and ⇧ Shift and then press R for windows on chrome and ⌘ Cmd and ⇧ Shift and then press R on mac.

Precess

Answer 2

Your public directory in firebase.json is the root directory for a Firebase Hosting deploy. Only files that are within that directory will be deployed and available.

Your CSS files are in your top-level project directory, and so are likely not getting deployed. You should move all of your HTML/CSS/JS inside the public directory.

Mayramays

Answer 3

Upgrade/Downgrade your firebase-tools in case anyone is seeing a similar issue when deploying Next.js static sites (SSG). Site would work fine outside of firebase (ex. locally) but fail when deployed.

I know firebase-tools version 13.11.4 has this issue. Downgrading to version 13.11.2 fixed the problem for me.

Cirque

update the firebase tool was my mistake. thank you for figure out the problem. – Kurt

Yes, that issue held me back for hours, and I didn't want others to go through the same. – Cirque