Search code examples
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.
  • Result: The website loads, but functionality breaks because the bundled files are not connected to the src/ files.
  1. I considered moving all my dist/ and src/ files into the public/ folder to maintain the directory structure.
  • Problem: It seems unconventional and messy, and I’m unsure if this approach works with Firebase Hosting.
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.