部署 Sveltekit 到 Firebase 并包含与 SSR 相关的代码

huangapple go评论62阅读模式
英文:

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>



huangapple
  • 本文由 发表于 2023年6月2日 12:35:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76387133.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定