javascripthtmlfirebasewebpackfirebase-hosting

How to host a webpack-based project with Firebase Hosting while maintaining functionality?


I’m trying to host my social media-like web app on Firebase Hosting. My project uses Webpack for bundling and includes HTML, CSS, and JavaScript(firebase) files. However, I’m facing issues with maintaining the functionality of my app after deploying it to Firebase.

This is my project structure

project structure

project structure

  1. I configured Firebase Hosting and copied my dist/ files into the public/ folder.
  1. I considered moving all my dist/ and src/ files into the public/ folder to maintain the directory structure.

Solution

  • It seems that you are confusing the public directory of firebase with public directory in your source code.

    You do not need to copy your dist directory to public directory. Instead, update Firebase hosting config to treat dist directory as root instead of public directory.

    Secondly, dist files are sufficient in themselves. They do not require connecting back to your src directory. If that is the case, then you are doing something wrong during the build.

    As per the image shared in comments, you are ignoring all files in firebase.json. remove */. Line.