英文:
Deploying Sveltekit to firebase with SSR related code
问题
所以,我对Sveltekit和Firebase都是新手,但我刚刚创建了一个使用Firebase的应用程序,使用Emulation来托管、使用Firestore和Storage - 尽管我一直在使用npm run dev
测试代码,但托管未被使用。
我现在正在尝试将我的代码部署到Firebase,但我遇到了一个问题,但当我部署到托管时,它只显示:
%sveltekit.head% %sveltekit.body%
svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
我还尝试使用adapter-auto
而不是adapter-auto
,但在构建时遇到了问题,因为我不需要Firebase函数。
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "src",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "**",
"destination": "/app.html"
} ],
"frameworksBackend": {
"region": "asia-east1"
}
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"firestore": {
"port": 8081
},
"hosting": {
"port": 8082
},
"storage": {
"port": 8089
},
"ui": {
"enabled": false
},
"singleProjectMode": true
}
}
我开始认为我正在尝试的可能不可行,因为Firebase不能进行服务器端渲染,它只能用于与Sveltekit项目相关的客户端端渲染。
无论如何,这里的任何帮助都将不胜感激。
英文:
So, I am new to both Sveltekit and Firebase, but I have just created an application that is using Firebase using Emulation for hosting, firestore and storage -though hosting was not used as I have been testing the code with npm run dev
I am now trying to deploy my code to firebase but I am having an issue but when I deploy to hosting all it see is:
%sveltekit.head% %sveltekit.body%
svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
I also tried using svelte-adapter-firebase
instead of adapter-auto
but had issues building as I didn't have firebase functions that I don't need
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "src",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "**",
"destination": "/app.html"
} ],
"frameworksBackend": {
"region": "asia-east1"
}
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"firestore": {
"port": 8081
},
"hosting": {
"port": 8082
},
"storage": {
"port": 8089
},
"ui": {
"enabled": false
},
"singleProjectMode": true
}
}
is I am starting to think that what I am trying to do possible as Firebase can not do server-side rendering it is only for client-side rendering related to Sveltekit projects
anyway any help here would be appreciate
答案1
得分: 1
我终于弄清楚了,从这个YouTube视频中得到了答案:
如何在Firebase上部署您的SvelteKit应用程序 | Firebase Hosting | SvelteKit
如视频建议,如果您还没有这样做,请执行以下操作:
npm install -g firebase-tools
firebase login
然后执行以下操作:
firebase experiments:enable webframeworks
这将设置实验 - 我没有深入了解它
然后初始化设置:
firebase init
firebase deploy
只需在svelte.config.js中使用自动适配器:
import adapter from '@sveltejs/adapter-auto';
不要更改firebase.json中的任何内容,保持它与初始化创建的一样。Hosting 应该如下所示:
"hosting": {
"source": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"frameworksBackend": {
"region": "asia-east1",
"maxInstances": 1,
}
},
希望这对某人有所帮助。
英文:
So I finally worked it out got the answer from this youtube video
How to deploy your SvelteKit application on Firebase | Firebase Hosting | SvelteKit
so as suggested in the video if you haven't already done it
npm install -g firebase-tools
firebase login
then do
firebase experiments:enable webframeworks
which set up for experiments - which I didn't look into
and then setup init
firebase init
firebase deploy
just use the auto adapter in svelte.config.js
import adapter from '@sveltejs/adapter-auto';
Don't change anything in firebase.json just keep it as init creates it
hosting should look like this
"hosting": {
"source": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"frameworksBackend": {
"region": "asia-east1",
"maxInstances": 1,
}
},
hope this helps someone
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论