Proxying API Requests in Development

[hauptrolle]

Hey 👋

in Create-React-App it is easily possible to proxying API requests only in development mode. See: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Is this somehow possible to do also wit remix?

[hollandThomas]

Take a look at e.g. this repo. It's meant to show an auth flow with express but don't worry about that. The important part is that it uses a custom integration with express instead of the built-in Remix App-Server. This part in /server/index.js:

function handleRequest(req, res, next) {
  let build = require('./build')
  if (MODE !== 'production') {
    purgeRequireCache()
  }
  if (requireAuthentication(req)) {
    return unauthenticated(req, res)
  }
  return createRequestHandler({
    build,
    getLoadContext,
    mode: MODE,
  })(req, res, next)
}

Since this is "just express", it should be easy to add something like http-proxy-middleware.

For reference, this is Remix's official code for the express template's server.

[hauptrolle]

Hey @hollandThomas,

thank you for your fast response. The express template was a good hint! I now managed to get it to work within express 👍

However, it looks like I have a strange behaviour when throwing redirects and client side routing. It seems like the client side routing always throws a 404 for the routes which are defined in the proxy.

Example:

app.use(
  "/logout",
  createProxyMiddleware({
    target: "http://localhost:3322/",
  })
);

<Link to="/logout">Logout</Link>

Clicking the Logout link, renders the root error boundary... Do you have any ideas?

[hollandThomas]

Hmm. It might be possible to use a Resource Route as a proxy instead. Let me know if that makes sense, otherwise I'll have a look tomorrow. It's too late to come up with example code right now^^

[hauptrolle]

A ressource route sounds like an idea. Any idea how to manage it that the route just proxies the request? I could not found any example in the docs...

[hollandThomas]

Gave it a try. The $ in api.$.tsx makes it a Splat Route in Remix to make sure that requests to any URL /api/no/matter/how/long are being handled.

// /routes/api.$.tsx
import type { LoaderFunction, ActionFunction } from "remix";

// should be an environment variable that differs per environment (dev, prod)
const ORIGIN = "http://localhost:3222";

const proxyRequest = (request: Request) => {
  const { pathname } = new URL(request.url);
  const { href } = new URL(pathname, ORIGIN);

  return new Request(href, request);
};

export const loader: LoaderFunction = async ({ request }) =>
  fetch(proxyRequest(request));

export const action: ActionFunction = ({ request }) =>
  fetch(proxyRequest(request));

// /routes/index.tsx
import type { LoaderFunction } from "remix";
import { useLoaderData } from "remix";

export const loader: LoaderFunction = async () => {
  return fetch("http://localhost:3000/api/some/resource");
};

export default function App() {
  const data = useLoaderData();

  return <div>{JSON.stringify(data)}</div>;
}

Not sure if this is the best implementation for your use case but maybe you can work something out with it. It'd be arguably easier to have a fetchApi util like this:

// should be an environment variable that differs per environment (dev, prod)
const ORIGIN = "http://localhost:3222";

const fetchApi = (pathname: string) => {
  const { href } = new URL(`/api${pathname}`, ORIGIN);
  return fetch(href);
};

// usage in a route
export const loader: LoaderFunction = async () => {
  return fetchApi("/some/resource");
};

[hauptrolle]

Hey, @hollandThomas, sorry for the late response.

I think we are getting close to a solution here. I like the node server + http-proxy middleware a litte bit more, because it is easier to say that the proxy is just available in development mode.

I am quite confused, why it is not possible to throw a redirect to a an external URL. Every redirect thrown to an unknown URL renders the 404 catch boundary because of the client side routing. Maybe @ryanflorence has any ideas on this?

[dusty]

I finally got around to playing with remix today and need the same functionality of being able to route /api calls to a backend service while in dev mode. In production, this is handled by the infrastructure, so its not needed.

I made a simple proxy to sit in front, then I made remix listen on port 4000, the proxy on port 3000. The proxy grabs all /api requests and forwards them on to the api, or on to the remix app for everything else. I used npm-run-all to start both up.

# proxy.mjs
import express from 'express'
import { createProxyMiddleware } from 'http-proxy-middleware'

const app = express()
app.disable('x-powered-by')
app.use('/api', createProxyMiddleware(process.env.API_URL || '', { changeOrigin: true }))
app.use('/', createProxyMiddleware('http://localhost:4000'))
const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Proxy server listening on port ${port}`)
})

# package.json
    "dev": "cross-env NODE_ENV=development run-p dev:*",
    "dev:remix": "cross-env NODE_ENV=development PORT=4000 node -r dotenv/config node_modules/.bin/remix dev",
    "dev:proxy": "cross-env NODE_ENV=development node -r dotenv/config ./proxy.mjs",

An alternative was to use the express adapter and just build the proxy in. In that case, my server.js was similar to the default with just the addition was the createProxyMiddleware line above the app.all

import * as serverBuild from '@remix-run/dev/server-build'
import { createRequestHandler } from '@remix-run/express'
import compression from 'compression'
import express from 'express'
import { createProxyMiddleware } from 'http-proxy-middleware'
import morgan from 'morgan'

const app = express()

app.use(compression())

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable('x-powered-by')

// Remix fingerprints its assets so we can cache forever.
app.use('/build', express.static('public/build', { immutable: true, maxAge: '1y' }))

// Everything else (like favicon.ico) is cached for an hour. You may want to be more aggressive with this caching.
app.use(express.static('public/build', { maxAge: '1h' }))

app.use(morgan('tiny'))

app.use('/api', createProxyMiddleware(process.env.API_URL, { changeOrigin: true }))

app.all('*', createRequestHandler({ build: serverBuild, mode: process.env.NODE_ENV }))

const port = process.env.PORT || 3000

app.listen(port, () => {
  console.log(`Express server listening on port ${port}`)
})

NOTE1: On both implementations, when I do a simple navigation to the route, it would show a not found page briefly and then show the actual proxied page. It seems the client-side navigation is triggered there? That is not ideal, but its only for dev mode so something I could live with. I ended up making a app/routes/api/$.tsx file that just shows a loader via the default export, not sure if I'll keep it or not.

NOTE2: I'm not sure if there is an advantage to using the remix server vs the express adapter. I like that the express one is just baked in, so I don't have to deal with another "thing". But, is there an advantage to the remix server? Does it work "better" than the nodemon/express setup?

NOTE3: I'm starting this particular project from scratch, so I'm not sure if I really will need this api proxy after all. If I use loaders and actions, then it might be entirely avoidable with a little redesign of some backend things. However, if I were trying to incrementally port a previous CRA w/ react-query or something, then this would def be needed.

Did anyone else come up with any other ways, such as using a loader itself. I was getting fetch errors about certs and such when I tried that route a couple times.

[dusty]

Update, when I changed the button that I used to navigate from within a Form to a form the brief 404 page was no longer shown.