How to use webpack-hot-server-middleware with Firebase functions in express

Question

I am trying to use cloud functions for Firebase in a Server side rendering React Project.

First, when I trying running express server with babel-watch in webpack is working! So I want to be able to make firebase functions in express server with babel-watch, I read functions-samples/isomorphic-react-app/ repository and make below codes. but maybe I don't understand..

So, Is there a way using webpack-hot-server-middleware with functions.https.onRequest(app); using babel-watch in developing ?

Or Is correct firebase serve --only functions,hosting in my case?

server/index.js

import express from "express";
import webpack from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotServerMiddleware from "webpack-hot-server-middleware";
import clientConfig from "../webpack/client";
import serverConfig from "../webpack/server";

const app = express();
const compiler = webpack([clientConfig, serverConfig]);

app.use(webpackDevMiddleware(compiler));
app.use(webpackHotServerMiddleware(compiler));

export let firebaseTrigger = functions.https.onRequest(app);

webpack/server.js

const path = require("path");

module.exports = {
  name: "server",
  target: "node",
  entry: [path.resolve(__dirname, "../server/render.js")],
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "../functions"),
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "firebaseTrigger"
      }
    ]
  }
}

package.json

{
  "name": "react-firebase",
  "version": "1.0.0",
  "main": "functions/index.js",
  "license": "MIT",
  "scripts": {
    "babel": "NODE_ENV=development babel-watch server/index.js",
    "dev-server": "firebase serve --only functions,hosting"
  },
  "dependencies": {
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-watch": "^2.0.7",
    "firebase-admin": "^5.8.0",
    "firebase-functions": "^0.8.0",
    "firebase-tools": "^3.16.0",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.0",
    "webpack-hot-server-middleware": "^0.3.1"
  }
}

Answer 1

The problem is not firebase functions, it's the hosting.

Firebase function already contains hot reload when running locally. As you can read on their documentation: https://firebase.google.com/docs/functions/local-emulator

For both tools, code changes you make during an active session are automatically reloaded by the emulator. If your code needs to be transpiled (TypeScript, React) make sure to do so before running the emulator.

But for the hosting part it does not really work(yet): https://github.com/firebase/firebase-tools/issues/594