0

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

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
jazzjazzy
  • 412
  • 3
  • 20

1 Answers1

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
jazzjazzy
  • 412
  • 3
  • 20