How to use Netilify functions with Svelte

Support
1

I am attempting to use Netlify functions in a Svelte app. I am sure that this must have been done, but I cannot figure out how.

I have posted a Stack exchange question that covers all of the the details (I apologise for repeating it all here)

Can someone please show me where I am going wrong?

2

Hey @psionman

In that post, you have the following netlify.toml configuration

[dev]
publish = "src"
functions = "./netlify/functions"

As you have the functions in netlify/function there is no need to have the functions option under [dev]. .netlify/functions is the directory netlify builds/runs functions from. See CLI documentation
https://cli.netlify.com/commands/dev
And functions documentation

3

Thanks @coelmay

I have removed that line from netlify.toml, but I still get the same error

when I run netlify dev the Svlete app load coccrectly, but why is “/.netlify/functions” not found?

4

Can you share your repository?

5

Of course

https://psionman@bitbucket.org/psionman/netlify-svelte-test.git

6

Thanks @psionman

I’m not Svelte aficionado, but I’ve got it working locally with a little help from GitHub - thinkle/strava-tools: Quick tool to auto-choose your gear based on information from the ride itself.

After changing the rollup.config.js inline with that repository, it still wouldn’t work. Svelte would start, but Netlify CLI would never load correctly on port 8888.

In the end, I changed the dependency versions in your repository to match that of the repository above and it works, making the site available on localhost:8888 and showing “Result: Hola Mundo”

The netlify.toml I used

[dev]
  command = "npm run dev"
7

Thanks @coelmay

I appreciate your help. I still cannot make it work

I have cloned my repo and changed package.json to

{
"name": "svelte-app",
"version": "1.0.0",
"private": true,
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
},
"devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-typescript": "^8.2.0",
    "@tsconfig/svelte": "^1.0.10",
    "rollup": "^2.42.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.35.0",
    "svelte-check": "^1.2.6",
    "svelte-preprocess": "^4.6.9",
    "tslib": "^2.1.0",
    "typescript": "^4.2.3"
},
"dependencies": {
    "netlify-cli": "^10.3.0",
    "netlify-lambda": "^2.0.15",
    "sirv-cli": "^2.0.0"
}
}

changed netlify.toml to

[dev]
command = "npm run dev"

then

npm i

When I run

netlify dev

The server starts on 8080 with the same error

If I try

npm start dev

then the server hangs

8

I forked your repository on Bitbucket here. It is working for me locally (screenshots included.)

9

Hi

Thanks for your repo

I have loaded it and the server doesn’t start

$ npm run dev

> svelte-app@1.0.0 dev
> rollup -c -w

rollup v2.73.0
bundles src/main.js → public/build/bundle.js...
LiveReload enabled on port 35747
created public/build/bundle.js in 528ms

[2022-05-15 09:23:11] waiting for changes...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"


Your application is ready~! 🚀

- Local:      http://localhost:5000
- Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

It hangs at this point

10

You are using npm run dev which won’t start the Netlify dev sever. You need to use netlify dev to do that.

11

Doh! Thanks for all your help :slight_smile:

12

Just for completeness: I have re-trodden my original steps and downloaded my repo and both work without any problems. I can only assume that with my lack of confidence (I am always dubious of my understanding of Netlify functions) and a possible cache problem in the browser, I was confused

1 Like
13

Hopefully this will round it off

In my repo package.json there seems to be a problem with

"dependencies": {
  ...
  "sirv-cli": "^2.0.0"
}

It prevents the netlify server from starting correctly

If I change it to

"dependencies": {
  ...
  "sirv-cli": "^1.0.11"
}

and reinstall npm it works correctly

Here is my package.json that provides a working app

{
    "name": "svelte-app",
    "version": "1.0.0",
    "private": true,
    "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
    },
    "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
    },
    "dependencies": {
    "netlify-cli": "^10.3.0",
    "netlify-lambda": "^2.0.15",
    "sirv-cli": "^1.0.11"
    }
}
14

Thank you so much for coming back and sharing that-- it will definitely be beneficial to future Forums members who encounter something similar!