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.