netlify dev工作与Svelte/vite(不是sveltekit)?

Question

我正在尝试使用netlify无服务器功能与svelte/vite使用netlify dev.我运行svelte 3.52.0, vite 3.2.3, node 16.14.0, netlify-cli 12.2.7 (Windows).

当我运行netlify dev并选择"Svelte npm run dev";或者使用Svelte npm运行build it "hang "不断显示"等待框架端口5173";并声明这可以使用netlify.toml中的'targetPort'属性来配置。

在netflix中也是如此。我有

[build]
command = "npm run build"
publish="dist"
functions="functions"
[dev]
targetPort=5173
port=8888

但是它做的是一样的。它"works"("**")，如果我选择任何三个vite选项，但然后我设置的无服务器功能给我:请求来自::1:GET/netlify/functions/getProjects

My App.svelte(没有对数据做任何操作，但下面的设置是为了测试)

<script>
async function myProjects() {
let projects = []
const url = `/.netlify/functions/getProjects`
const res = await fetch(url)
.then(r => r.json())
.then(data => {
projects = data
})
}
</script>
<main>
<button on:click={myProjects}>MyProjects</button>
</main>

getProjects.js在netlifyfunctionsgetProjects文件夹中，为:

const { MongoClient } = require('mongodb')
require('dotenv').config()
const mongoClient = new MongoClient(process.env.MONGODB_URI)
const clientPromise = mongoClient.connect()
const handler = async event => {
try {
const database = (await clientPromise).db(process.env.MONGODB_DATABASE)
const collection = database.collection(process.env.MONGODB_COLLECTION)
const results = await collection.find({}).limit(100).toArray()
return {
statuscode: 200,
body: JSON.stringify(results)
}
} catch (error) {
return { statusCode: 500, body: error.toString() }
}
}
module.exports = { handler }

所有的。env设置都是正确的，并且可以在express服务器上工作，所以这些应该是好的。

谢谢大家的意见和建议。

Answer 1

从文档中可以看出，不使用svelteKit也可以部署一个小型项目:https://docs.netlify.com/integrations/frameworks/#sveltekit-and-svelte.

虽然，我不推荐它。SvelteKit现在是构建&你将有即时后端配置，而不必担心如何在netflix或Vercel上部署它。这也意味着你会发现更多的人使用它并以这种方式记录它。

Answer 2

经过多次尝试后，我运行了Node 16。并决定更新到Node 18.12.1。下一个是小苍蝇。为我工作的Toml文件是:

[build]
publish="dist"
[dev]
command = "npm run dev"
targetPort=5173
port=8888
[functions]
node_bundler = "esbuild"

我的getProjects.js无服务器函数，在netlify/functions/getProjects文件夹是:

const { MongoClient } = require('mongodb')
require('dotenv').config()
const mongoClient = new MongoClient(process.env.MONGODB_URI)
const clientPromise = mongoClient.connect()
if (clientPromise) {
console.log('Connected to Mongodb')
} else {
console.log('NOT Connected toMongodb')
}
// terminal shows connected
//
export const handler = async (event, context) => {
//
const database = (await clientPromise).db(process.env.MONGODB_DATABASE)
// console.log('after await promise')
const collection = database.collection(process.env.MONGODB_COLLECTION)
//
try {
const data = await collection.find({}).limit(100).toArray()
// console.log('my results: ', data)
return {
statusCode: 200,
body: JSON.stringify(data)
}
} catch (error) {
return { statusCode: 500, body: error.toString() }
}
}

My App.svelte is now:

<script>
import projects from './stores/projects'
function showProjects() {
console.log($projects)
}
</script>
<main>
<button on:click={showProjects}>MyProjects</button>
</main>

And I add a store…

import { writable } from 'svelte/store'
// import Api functions
import { getProjects } from '../backend/Api'
const store = writable([], () => {
setProjects()
return () => {}
})
async function setProjects() {
let projects = await getProjects()
if (projects) {
store.set(projects)
}
}
//export default store
const customProjectStore = {
subscribe: store.subscribe
}
export default customProjectStore

And the store调用Api函数…

export async function getProjects() {
let projects = []
const url = `/.netlify/functions/getProjects`
const res = await fetch(url)
.then(r => r.json())
.then(data => {
projects = data
})
return projects
}

这可能看起来有点过分，但我喜欢使用store来调用所有后端东西的API。

My Projects"按钮显示Mongodb中项目集合中的文档，使用无服务器函数方法。