Netlify Dev Functions Locally troubleshooting

jonsully · August 10, 2020, 8:39pm

I’ll echo Dennis in saying welcome to the community as well
Let’s see if we can’t get this sorted out. Netlify Functions are designed with “just works” in mind, so let’s see if we can’t get things working for you

As a side note, if you’re truly just wanting a proxy pass-through for an external API, you may want to look into Netlify Redirects with passing a 200 status - it’s a super simple masked redirect and that may help you out. Check these docs out and see if that fits the need.

Otherwise, there’s no reason you can’t roll your own and by-golly let’s do it!

I’m actually going to jump up to your first notes – before @Dennis’s comment (which I agree with) – but in your screenshot of your dev tools, you’re seeing the response object logged and it actually looks fine. I want to note that you ran fetch("/.netlify/functions/test-api").then(res => console.log(res)) in dev tools and looked at the response. It’s key to recall that the fetch sequence is a two-step sequence, not one step. The object that results from the fetch promise is the response object and it contains metadata about the response - what the url was, what status code the server sent back, and a few other meta-concerns about the ‘stuff’ you asked for, but it doesn’t contain the actual content of what you’re asking for in the request. You have to take the second step and go ahead and retrieve that data. That’s why in your screenshot you see “body: ReadableStream” - because the body is the actual content and it’s a ReadableStream that’s available, but you have to intentionally read it.

We can contrast that with the code you initially used in the function itself.

const response = await fetch("https://icanhazdadjoke.com/")
    .then(res => res.json())

With the key difference here being the .json(). In your console log, you printed off what the res / response object is. In your function, you call .json() which is the intentional action of reading the ReadableStream and converting it to JSON format for use in code.

I believe if you would’ve had your console log statement read:

fetch("/.netlify/functions/test-api").then(res => console.log(res.json()))

instead of the original

fetch("/.netlify/functions/test-api").then(res => console.log(res))

You’d actually be in good shape

Okay let’s talk about ports!

This can get a little bit complicated so I’m going to pull in a diagram from Netlify Dev’s docs which I highly recommend reading for a better understanding of what’s going on when you run Netlify Dev.

Netlify Dev is basically a local plumbing service. It takes over responsibility for pushing requests and ports and things to where they need to go so that you don’t need to worry about it. In fact, if you do start trying to push requests around yourself, it’s probably not going to go super well – for instance, you pretty much never want to try to hit the local Functions Server Port yourself / manually. The Dev CLI only outputs which port it’s running on for debugging purposes, not for developers to try to use (I think).

Anyway let me walk through that diagram. Sounds like you’re using using Vue and I think Vue’s default port for local development when just running the Vue app is :8080. For the sake of the diagram, let’s assume Vue is actually running on port :5000. The point of Netlify Dev is that it knows what port your project is running on (5000, as shown above) and it acts as a pass-through mechanism for your site generator. So when you run Netlify Dev, you’re going to hit localhost:8888 instead of localhost:5000. They should both load the same site and show the same content, but when you go through localhost:8888, all of the other netlify tooling is hooked up too. This is fundamentally how Netlify Functions works. When you have a script on your page that calls out to (relative link) /.netlify/functions/call-me-im-a-function Netlify Dev (or in production, Netlify’s CDNs) catch that you’re calling /.netlify/functions/* and instead of just fetching your ‘normal’ static content, push that request over to the Functions system to be given to the correct function (call-me-im-a-function, in this case).

This follows the explanation-of-ports-in-netlify-dev on the netlify dev docs (which, I will say, can be tricky to find so don’t feel bad if you never saw them!)

So the point here is that you’re going to want to not worry about what the functions server port is or try to change the Netlify Dev port (this topic you referred to) - you just need to hit your site locally from the Netlify Dev port rather than the normal port for Vue, and everything from there on our should just work.

It’s a different paradigm and a little complex, but I hope that makes some sense. Netlify Dev running locally is awesome, just stick to the url/port that comes up in the box once it’s done initiating:

Happy to go into more detail but I hope that’s helpful

–
Jon