How can custom middleware be injected?

[EvanBacon]

Ask your Question

If someone wants to use this with the Expo Go app, or a custom dev client, they'll need to inject custom middleware to serve a JSON manifest at /. With Metro, this would look something like:

const { getDefaultConfig } = require("expo/metro-config");
const { getManifestHandler } = require("xdl/build/start/ManifestHandler");
const config = getDefaultConfig(__dirname);

// export EXPO_PACKAGER_PROXY_URL=http://localhost:8081
module.exports = {
  ...config,
  server: {
    ...config.server,
    enhanceMiddleware: (metroMiddleware, server) => {
      const expoMiddleware = getManifestHandler(__dirname);
      return (req, res, next) => {
        if (["/", "/manifest", "/index.exp"].includes(req.url)) {
          return expoMiddleware(req, res, next);
        }
        return metroMiddleware(req, res, next);
      };
    },
  },
};

In Webpack, I'd assume something like this would work:

module.exports = {
  // Default repack config...
  devServer: {
    before(app) {
      app.use((req, res, next) => {
        if (["/", "/manifest", "/index.exp"].includes(req.url)) {
          return expoMiddleware(req, res, next);
        }
        next();
      });
    },
  },
}

But it does not seem to work. Is there some other API to use in order to customize the dev server?

[zamotany]

Re.Pack doesn't use the default devServer (which under the hood runs webpack-dev-server). Due to the need to support multiple platforms ideally when running a single command we had to implement custom dev server which also supports other functionalities for React Native and Flipper. This is described in the ARCHITECTURE doc: https://www.github.com/callstack/repack/tree/main/ARCHITECTURE.md

Now currently there's no way to customize the dev server and dev server proxy. However since dev server is just a Webpack plugin, we can add config options to modify the server. It's relatively an easy change to make to support that. Also keep in mind that our Dev server runs on Fastify not express, however we use fastify-express compatibility layer for webpack-dev-middleware, so there's a high chance that a express middleware should work as well.

[ckollars]

For my understanding, Expo does have a bareworkflow that allows for native code. Along with that their new EAS Build service. Again for my understanding, would we still need to inject a middleware to handle Expo bareworkflow app?

[zamotany]

I don't have enough experience with Expo to answer your question. AFAIK as long as Expo needs the manifest to be served, a custom middleware must be injected. I don't have a problem with adding that feature to the main codebase. So if anyone is interested, PRs are appreciated.

[RafikiTiki]

Closing this due to inactivity. Additional info about using repack with Expo can be found here: https://re-pack.netlify.app/docs/getting-started#note-on-expo.

As zamotany said – PRs in this matter are appreciated if anyone has enough experience with Expo.