CODEWITHSUNDEEP
serverlesssveltenetlifynetlify-function
Script Raccoon
Script Raccoon

Reputation: 395

How to run a Netlify function in Svelte

Problem description

I would like to run a Netlify function in a Svelte app. However, during development, the requests for the function cannot be found (404). I assume this has to do with the port on which Netlify is serving the functions.

The issue only arises in development. When the app is deployed on Netlify, the function call works just fine. And it also works fine without Svelte.

I have used the basic Svelte template. My Netflify function is called "number" and just returns "42".

number.js:

const handler = async (event) => {
    try {
        return {
            statusCode: 200,
            body: JSON.stringify(42),
        };
    } catch (error) {
        return { statusCode: 500, body: error.toString() };
    }
};

module.exports = { handler };

When I run netlify dev, this starts Netlify's development server with Svelte. It logs:

 Loaded function number (​http://localhost:8888/.netlify/functions/number​).
◈ Functions server is listening on 52041

But http://localhost:8888/.netlify/functions/number does give a 404. Only http://localhost:52041/.netlify/functions/number works here. Can someone explain the first log then, isn't this just incorrect?

The problem now is that the functions port changes every time I call netlify dev. We can fix this by changing the Netlify configuration file:

netlify.toml:

[build]
    publish = "public/"
    functions = "functions/"

[dev]
    publish = "public/"
    functions = "functions/"
    port = 8080
    functionsPort = 52041

In the end, I would like to add a button to my Svelte app which makes a fetch request to that function.

App.svelte:

<script>
    async function getNumber() {
        const url = `http://localhost:52041/.netlify/functions/number`;
        const res = await fetch(url);
        const data = await res.json();
        window.alert(data);
    }
</script>

<button on:click={getNumber}>Click me</button>

This works now in development, but not in production: Here the url should be /.netlify/functions/number.

So my question is:

Related questions on the internet:

Upvotes: 1

Views: 611

Answers (2)

kenset
kenset

Reputation: 361

In netlify.toml, under [dev], put targetPort = 8080 instead of port = 8080.

When running ntl dev, Netlify tries to autodetect the framework that is being used and offers up some default configuration options. In December 2021 there was a breaking change with the release of sirv 2.0.0—which is used to serve up the Svelte app—that changed the default port from 5000 to 8080. Netlify has not been updated to account for this, and so without additional configuration it is still expecting the Svelte app to exist on port 5000.

According to the Netlify docs, targetPort corresponds to the The port for your application server, framework or site generator.

Therefore, run ntl dev and make sure it has the targetPort configuration option set to 8080.

Upvotes: 2

kenset
kenset

Reputation: 361

I was able to reproduce your issue pretty easily. To know if you can hit the function directly on your desired port 8080, you should look for the following to appear in your logs after running ntl dev:

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8080   │
   │                                                 │
   └─────────────────────────────────────────────────┘

To get this to appear, I had to change a setting in the UI (it did not work to change it in netlify.toml). Go to Site Settings -> Functions -> Functions Directory and change the value from functions to netlify/functions. See the screenshot for what my settings page looked like after I made the change (red box mine):

enter image description here

I had this same issue when first running Svelte and Netlify functions together—I recall this resolving the issue for me then, too, but I can't find the forum/SO question that helped me find this out.

Upvotes: 0

Related Questions