These are instructions for setting up a SvelteKit demo project and deploying it to Firebase with framework aware hosting.
Setup a new SvelteKit project with:
npm create svelte@latest my-appUse the assistant to configure your desired SvelteKit setup and run npm install afterwards.
Enable the web framework feature in the Firebase CLI with:
firebase experiments:enable webframeworksInitialize the Firebase hosting with:
firebase init hostingFollow the steps in the assistant to connect to an existing Firebase project or create a new one. Make sure the Blaze plan of Firebase is enabled for the project.
You can configure the the cloud function in the frameworksBackend object of your firebase.json file. It should be analog the the regular onRequest cloud function configuration.
A sample firebase.json configuration could look like:
{
"hosting": {
"source": ".",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"frameworksBackend": {
"region": "europe-west1",
"invoker": "public"
}
}
}Note: If you want to reduce the start-up time, you could also add "minInstances": 1 to the configuration. This will keep the cloud function warm. But be aware that this will cost you extra money.
Serve the app locally with:
firebase serveor
firebase emulators:startIt will reflect your code changes. However, I still needed to manually reload the page in the browser to see the changes.
I used the default auto adapter of SvelteKit which will be a bit lost in detecting a supported production environment. Nonetheless, deploying still worked for me.
Just run the firebase deploy command:
firebase deployIt will try to enable all needed APIs for you which might take a while. Hence, there is a possibility that the first or even second deployment will fail. It might also throw an error like:
Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'.
Just chill a bit and re-run the command. It should work after a few minutes since Firebase will take care of it in the background.
The deployment should now be successful!
I still got the following error when opening the URL of the deployed app:
Error: Forbidden
Your client does not have permission to get URL / from this server.
This is due to a missing permission to invoke the deployed function publicly. I did not test it but I think you can use the invoker property on the cloud function directly and set it to public. I only figured that out after I fixed it with the following command:
gcloud functions add-invoker-policy-binding functionName \ # Change this to your generated function name
--region="europe-west1" \ # Change this to your region
--member="allUsers" \
--project="projectId" # Change this to your project idAfterwards, the app should be accessible via the URL shown in the Firebase CLI output.
If you use Terraform for your GCP setup, you might find it helpful to know that the deploy command will enable the following Google APIs: - cloudfunctions.googleapis.com - cloudbuild.googleapis.com - artifactregistry.googleapis.com
The cloud functions service account will also need the role roles/artifactregistry.reader.
Unfortunately not. I want to have a second look into that as well. I still also don't know if there might be a different way to provide the SveltKit backend in the cloud function with env/secret variables Docs and the frontend part via hosting. Probably in the .firebase dir which will be created on first deploy. But still don't know how and if the emulator will pick them up during dev.
Let me know if you figure something out, I will update the Gist as soon as I have new information about env/secret variables.