Gatsby: Add http proxy middleware support

[rileylnapier]

hi, i have previously been developing with browsersync and it allows me to apply any middleware i need. i use http-proxy-middleware to be exact. this allows me to have very granular control over api requests.

the current gatsby documenation allows for proxing a path like:

/__dev__/api/v1/some-path
to
https://www.livesite.com/__dev__/api/v1/some-path

but really i need it go to:

https://www.livesite.com/api/v1/some-path

im just using __dev__ to mark my endpoints to proxy. i do this because i have certain endpoints i need to proxy and some I don't. i need to rewrite the api path and i need to set origin headers for my develop env to work. https://github.com/chimurai/http-proxy-middleware allows this by letting me do the following:

        proxy('/__dev__', {
          target: API,
          changeOrigin: true,
          logLevel: 'debug',
          pathRewrite: {
            '^/__dev__': ''
          },
          onProxyReq: (proxyReq, req, res) => {
            proxyReq.setHeader('Origin', API);
          }
        })

so my question to you. i imagine i will need to submit a PR to allow for better proxy support. do we want to

1. allow users to register any middleware into the express server?
2. extend the gatsby-config.proxy object to allow for pathRewrite and onProxyReq and integrate http-proxy-middleware into develop.js?
3. create a new config gatsby-config.httpProxyMiddleware object that integrates http-proxy-middleware as to not break current config?

or is there already a solution?

[KyleAMathews]

Will this do what you want? https://www.gatsbyjs.org/docs/api-proxy/

[rileylnapier]

nope. I need rewriteRules and I need to set the origin header.

I moved over to react-static as they gave me the control i needed
here is issue i'm describing my use case: https://github.com/nozzle/react-static/issues/146

feel free to close this out... but if you did support it and i hit roadblocks with react-static, might be nice to come back to gatsby because i do like the extensive plugins system with things like contenful/drupal/buttercms/datocms/ect...

and i like the opportunity to graphql things

[KyleAMathews]

Ah gotcha. Would be happy to take a PR adding http-proxy-middleware or perhaps just a generic way to add more middleware layers to the develop.js. I can see that our proxy layer (copied from CRA I believe) is fairly simplistic and richer control would be much nicer.

Doesn't look like it'd be too hard to add if you (or someone else) want to take it on.

[rileylnapier]

i think a generic way to add more middleware would be more beneficial yeah? if i can find some time i would love to help and create a PR. ill update this ticket if i start working on it :)

[KyleAMathews]

Awesome! Would love your help!

Yeah, a generic way to add middleware + documentation on doing advanced proxying would probably be the easiest / best way to support your use case and others. I really dislike making very specific APIs. Much better fairly generic and powerful extension APIs.

[salmanmanekia]

I am planning to take this.
@rileylnapier @KyleAMathews Any hints on how it should be done ?

[m-allanson]

CRA have recently updated how they specify advanced proxies, maybe that'd be a useful approach to take here? See https://github.com/facebook/create-react-app/pull/3845

[rileylnapier]

Does gatsby use webpack Dev middleware? Which I think it does... just expose the config you pass to webpack dev server middleware up through gatsby.

You can look at how react-static does this

[salmanmanekia]

Thanks!, I will give it a try

[michaek]

I believe there are two most common cases for dev server proxies:

1. /prefix/path/* -> http://dest/prefix/path/*
2. /prefix/path/* -> http://dest/*

While it is perhaps uncomfortably magical, nginx's proxy_pass supports these cases in a very terse form. If you define the proxy destination without a path (that is, http://dest) it covers case 1, and if you define the proxy destination with a path (that is, http://dest/, note the trailing slash) it covers case 2.

(For what it's worth, Gatsby does not use webpack's dev server, so attempting to twiddle its proxy settings will not have any effect.)

[ls-miles-rostami]

I've been trying to add the following to my gatsby-config.js forlder but it doesn't seem to have any effect? My server uses expressjs to serve the post route for /mail. Em I missing something here?

proxy: {
    prefix: "/mail",
    url: "http://localhost:3000/mail",
  },

[michaek]

@milesros I believe you just leave off the /mail in your url.

[ls-miles-rostami]

Tried that...still didn't work :(

[michaek]

@milesros Sorry to hear that! However, I think this issue should probably stay focused on the ability to extend the built-in proxy, not to handle issues with the default behavior.

[ls-miles-rostami]

Agreed. Sorry about that.

[m-allanson]

Done in #4920 🎉