javascriptproxynetlifyrollupsapper

Sapper Rollup proxy config for Netlify functions


I'm using the Sapper Rollup template and can't figure out how to proxy /.netlify/functions to localhost:9000. I've tried http-proxy-middleware in a setupProxy.js file but I'm not sure where to reference that file given the Sapper dev server doesn't seem to be configurable with Rollup?

I have a function in /src/functions/get-code.js and I'm using Netlify lambda to test it:

package.json

...
"scripts": {
  "dev": "sapper dev",
  "lambda:dev": "netlify-lambda serve src/functions",
  ...

netlify.toml

[build]
  command = "npm run build"
  functions = "lambda"

I can test my function on https://localhost:9000/get-code and it's working fine. However, in my app I have a function inside a file utilities.js which is trying to make a request to /.netlify/functions/get-code.

export const getCode = (obj) => {
  return axios
    .post('.netlify/functions/get-code', JSON.stringify(obj))
    .then((response) => {
      return response.data
    })
    .catch(function (error) {
      console.error(error)
      return null
    })
}

When I run my app (npm run dev) and this function is called, it results in an ECONNREFUSED error because it's trying to call http:.netlify/functions/get-code.


Solution

  • I was trying to do the same thing in an Eleventy project, until I realized I didn't have to. Instead of using netlify-lambda and trying to proxy to port 9000, just use Netlify Dev instead.

    Install the Netlify CLI:

    npm install netlify-cli -g
    

    then run Netlify Dev from your project folder:

    netlify dev
    

    It'll start your app and handle your http requests to /.netlify/functions/get-code, so you can avoid the proxy problem, as well as CORS issues.