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:
-
I tried calling the external api with the functions server method, using the relative link
/.netlify/functions/call-me-a-function
. -
I also tried calling the external api with the redirects method (configuring both with
_redirects
file andnetlify.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