How to enable hot reload when using Webpack in watch mode and Firebase emulators:start

Question

I'm starting off a new project and I though it would be nice to use the full firebase emulators suite.

Se here's what I've thought could work:

// THIS IS MY package.json SCRIPT

"start-firebase-build": "set NODE_ENV=development_firebase&& webpack --config webpack.config.js",

webpack.config.js

That webpack config will do the following:

if (DEVELOPMENT_FIREBASE) {
  
  const DEV_PLUGINS = [
    new webpack.HotModuleReplacementPlugin(),             // ENABLE HMR
    new webpack.HashedModuleIdsPlugin()                   // INCLUDE HASH IN MODULE IDS AND FILENAMES
  ];
  const PLUGINS = config.plugins.concat(DEV_PLUGINS);     // MERGE COMMON AND DEV PLUGINS

  config = {
    ...config,
    watch: true,
    mode: "development",
    devtool: "inline-source-map",
    plugins: PLUGINS,
    output: {
      filename: "[name].[hash:5].js",
      path: path.resolve(__dirname, "public"),           // OUTPUT FILES WILL BE IN /public
      publicPath: "/"
    },
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        ["react-dom"]: "@hot-loader/react-dom"
      }
    }
  };
}

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
  },
  "hosting": {
    "public": "public",                     // <---- SERVING FILES FROM /public
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/app.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    }
  }
}

So I've opened two terminals and I did the following:

TERMINAL 1

npm run start-firebase-build

// THIS WILL RUN THE BUILD FOR FIREBASE IN /public IN WATCH MODE (SO IT CAN BE HOT RELOADED)

TERMINAL 2

firebase emulators:start

// START ALL FIREBASE EMULATORS

---

THE RESULT:

Everything works. But I get no HMR. From what I can see from the script logs, Webpack is doing its thing (regarding reloading the modules), but I have to refresh the page in order to get Firebase to get the new bundle version.

QUESTION

Is it possible to develop using firebase hosting emulator and still get hot reloading while making changes to the front-end code?

I mean, if this is not possible, a solution to this could be just use firestore and functions emulators while still using webpack-dev-server as the "hosting provider", but I kind of "lose communication" with the hosting settings from firebase.json.

Imagine I have a buildSitemap cloud function that responds to the URL /sitemap.xml. That information is stored in firebase.json and that rewrite is done by Firebase hosting.

firebase.json

"rewrites": [
  {
    "source": "/sitemap.xml",
    "function": "buildSitemap"
  },
]

How do people usually handle this?

Roter

I'm not sure I get the idea, Firebase is a DB, Webpack HMR ment to reload app files when they change... what is your idea? – Neddy

Thanks for your reply. Firebase is more than a DB. It's a "backend as a service" product that incorporates hosting, data storage, cloud functions and also a realtime database/firestore that you can use. When you are developing, there a package called firebase-tools that allows you to serve your local content to your dev environment. I was just thinking if it's possible to enable some kind of hot reload into this feature. – Roter

Hot reload of what? :] – Neddy

@Neddy I mean hot reload of the changes I'm doing to the code in development. Webpack in --watch mode will auto re-build everything and injected the updated modules into the build files. I was thinking if firebase could auto update that. But I think now that this is not possible. – Roter

It can be done, but you need to decide what firebase should update... For example I've created i18next-hmr package which attaches to the build an hmr capabilities for translation files. – Neddy