Netlify Dev Functions Locally troubleshooting

[mcyouks]

Hey @jonsull

Thank you very much for putting so much effort into providing such an insightful answer. I highly appreciate that

I have carefully read and followed your instructions. However, the problem still persists: my requests are not hitting the functions server (nor in dev, neither in prod)

Note: I used the default url/port that comes out of the box (namely :8080)

Then, I have tried the following approaches:

1. I tried calling the external api with the functions server method, using the relative link /.netlify/functions/call-me-a-function.

2. I also tried calling the external api with the redirects method (configuring both with _redirects file and netlify.toml file), using the relative link /api.

None of those two approaches have been conclusive

In order to provide you with the most insightful information, I am going to decompose the thread as follow:

Setup: I am going to explicit the function called, the current Vue and Netlify settings.

Functions Server approach: I am going to explicit the approach and show the results (in dev and prod)

Redirects approach: I am going to explicit the approach and show the results (in dev and prod)

–

Let’s go !

Setup

First, I removed the config PORT=3000 from my .env file, so that the app would naturally run on the default port, namely :8080

The main information response we are going to query is the following variable message defined as follow. This variable is defined inside my setup() method (see Vue 3 composition API setup method)

Additionally, the node-fetch function located at functions/node-fetch/node-fetch.js is defined as follow

Finally , let’s remind the Netlify configuration file netlify.toml at this point

That’s it for the initial setup! Let’s investigate the Functions Server approach

–

Functions Server approach

First, I am going to run the app using netlify dev. The app is running on port :8080 (Vue’s default port).

In development mode, fetching /.netlify/functions/node-fetch returns a 404 error.

In production mode, fetching /.netlify/functions/node-fetch returns a 404 error as well.

Note 1: In production only, hitting <my_domain>/.netlify/functions/node-fetch returns the desired output

Note 2: I am running the app in PWA mode, and I saw that could cause issue in production in this topic, here and here too.

That’s it for the Functions Server approach! Let’s investigate the Redirects approach

–

Redirects approach

I have tried two variants (as explained in this article), and both of them gave the same non-conclusive result

Since the results are the same, I am going to first explicit the variants.

Variant 1 : Use public/_redirects file

Since I am running a SPA application, I already had the config /* /index.html 200 in the _redirects file, located in the public folder.

Thus, I added the extra line /api/* https://icanhazdadjoke.com/:splat 200 to the file

Variant 2 : Use netlify.toml file

I used Netlify configuration file to setup redirects rule. The netlify.toml looked as follow

Results

In development mode, fetching /api returns a 404 error.

In production mode, fetching /api returns a 404 error as well.

–

As a conclusion, after trying all the possible workarounds, I am still stuck on this very simple issue

If anyone knows how to help me solve the situation, I would be the most grateful person ever!

Regards,
Andréas