Localhost Connection Interruption Issue with Express Server and Firebase Functions

I want my phone, on the same Wi-Fi as my computer, to access my computer’s Express server at its localhost. In the past, I used ngrok or a proxy on my web server to achieve this, but it was complex and costly.

Now, I’ve set up a direct proxy on my Express server to serve the computer’s localhost. Here’s the essential code from server.ts:

import { ApolloServer } from "apollo-server-express";
import admin from "firebase-admin";
import express from "express";

import schema from "./schema";
import resolvers from "./resolvers";

import http from 'http';

import UsersAPI from "./datasources/users";

const serviceAccount = require("serviceAccount.json");
const databaseURL = "https://my-app.firebaseio.com";

const globalServerApp = admin.initializeApp(
  { credential: admin.credential.cert(serviceAccount), databaseURL },
  "server"
);
const globalDataSources = {
  usersAPI: new UsersAPI(globalServerApp),
};

const initServer = () => {
  const app = express();
  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    dataSources: () => {
      return globalDataSources;
    },
    uploads: false,
    // Enable graphiql gui
    introspection: true,
    playground: true,
    context: async ({ req }) => {
      return {
        request: req,
      };
    },
  });
  server.applyMiddleware({ app, path: "/", cors: true });
  
  if (process.env.HOME === "/Users/mememe") {
    const serverHttp = http.createServer(app);

    const host = '0.0.0.0';
    const port = 5001;
    serverHttp.listen(port, host, () => {
      console.log(`Server is running on https://${host}:${port}`);
    });
  }
  
  return app;
};

export default initServer;

It works, sort of.

I run the server with firebase emulators:start --only functions, which executes the firebase function that fires the server:

const graphqlServer = initServer();
exports.graphql = functions.https.onRequest(graphqlServer);

It loads:

i  emulators: Starting emulators: functions
⚠  ui: Emulator UI unable to start on port 4000, starting on 4048 instead.
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/.../server/functions" for Cloud Functions...
✔  functions: Using node@18 from host.
i  functions: Loaded environment variables from .env.
Serving at port 8642

Server is running on https://0.0.0.0:5001

✔  functions: Loaded functions definitions from source: graphql, auth, compressImage, email, addToIndex, updateIndex, deleteFromIndex, backupDeletedRecord.
✔  functions[us-central1-graphql]: http function initialized (https://127.0.0.1:5001/my-app/us-central1/graphql).
✔  functions[us-central1-auth]: http function initialized (https://127.0.0.1:5001/my-app/us-central1/auth).
✔  functions[us-central1-compressImage]: http function initialized (https://127.0.0.1:5001/my-app/us-central1/compressImage).
✔  functions[us-central1-email]: http function initialized (https://127.0.0.1:5001/my-app/us-central1/email).
i  functions[us-central1-addToIndex]: function ignored because the firestore emulator does not exist or is not running.
i  functions[us-central1-updateIndex]: function ignored because the firestore emulator does not exist or is not running.
i  functions[us-central1-deleteFromIndex]: function ignored because the firestore emulator does not exist or is not running.
i  functions[us-central1-backupDeletedRecord]: function ignored because the firestore emulator does not exist or is not running.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at https://127.0.0.1:4048/               │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ 127.0.0.1:5001 │ https://127.0.0.1:4048/functions │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500

The server runs on https://0.0.0.0:5001, which is essentially localhost.

I’ve set my computer’s IP to 192.168.1.200 manually. This means that I should be able to access the GraphQL UI hosted on the computer by going to https://192.168.1.200:5001/my-app/us-central1/graphql.

When I start the server, it initially connects successfully. However, as soon as the functions load (right after it prints Server is running on https://0.0.0.0:5001), it disconnects.

If I visit https://localhost:5001/my-app/us-central1/graphql on the computer after the functions load, it opens the GraphQL UI. After doing this, refreshing the webpage on the phone loads the GraphQL UI.

In summary, the functions seem to interrupt the connection, which is re-established when we load the GraphQL UI on the computer.

Do you have any suggestions on how to debug or resolve this issue?