Using Firebase Storage as Object Storage

Browse the source code here.

LaunchFa.st provides you with the APIs to interact with Firebase Storage, built on top of Web Standards.

Here’s how you would set up Firebase Storage to use it with LaunchFast:

1. In the Firebase console, open Settings > Service Accounts.

2. Click Generate New Private Key, then confirm by clicking Generate Key.

3. Securely store the JSON file containing the key.

4. In the Firebase Console, Go to Storage, and save the value starting with gs://….

5. Update the environment variables (with the key storageBucket and rest of the values obtained) via the following instructions:

   Astro

   https://github.com/LaunchFast-Boilerplates/launchfa.st-astro#storage

   SvelteKit

   https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit#storage

   Next.js

   https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs#storage

Using the <Upload /> Component

To easily implemented file uploads in your application, import the Upload component in your application:

Astro

page.astro

---
import Upload from '@/components/Upload.astro'
---

<Upload />

SvelteKit

+page.svelte

<script lang="ts">
import Upload from '@/components/Upload.svelte'
</script>

<Upload />

Next.js

page.tsx

'use client'

import Upload from '@/components/Upload'

export default async function () {
  return <Upload />
}

GET files from Firebase Storage

To fetch files from Firebase Storage, pass the file’s slug as the file searchParam in /api/storage route as following:

Astro

page.astro

<script>
  const getFile = new URL('/api/storage', window.location.origin)
  getFile.searchParams.set('file', fileURL)

  fetch(getFile.toString())
    .then((res) => res.json())
    .then((res) => {
      const { filePublicURL } = res
      console.log(filePublicURL)
    })
</script>

SvelteKit

+page.svelte

<script lang="ts">
  import { onMount } from 'svelte'

  const getFile = new URL('/api/storage', window.location.origin)
  getFile.searchParams.set('file', fileURL)

  onMount(() => {
    fetch(getFile.toString())
      .then((res) => res.json())
      .then((res) => {
        const { filePublicURL } = res
        console.log(filePublicURL)
      })
  })
</script>

Next.js

page.tsx

'use client'

useEffect(() => {
  const getFile = new URL('/api/storage', window.location.origin)
  getFile.searchParams.set('file', fileURL)
  fetch(getFile.toString())
    .then((res) => res.json())
    .then((res) => {
      const { filePublicURL } = res
      console.log(filePublicURL)
    })
}, [])