Usar Firebase Storage como almacenamiento de objetos

Consulta el código fuente aquí.

LaunchFa.st te proporciona las APIs para interactuar con Firebase Storage, construidas sobre estándares web.

Así es como configurarías Firebase Storage para usarlo con LaunchFast:

1. En la consola de Firebase, abre Settings > Service Accounts.

2. Haz clic en Generate New Private Key y confirma haciendo clic en Generate Key.

3. Guarda de forma segura el archivo JSON que contiene la clave.

4. En la consola de Firebase, ve a Storage y guarda el valor que empieza por gs://….

5. Actualiza las variables de entorno (con la clave storageBucket y el resto de valores obtenidos) según las siguientes instrucciones:

   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

Usar el componente <Upload />

Para implementar fácilmente subidas de archivos en tu aplicación, importa el componente Upload en tu aplicación:

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 />
}

Obtener archivos de Firebase Storage con GET

Para obtener archivos de Firebase Storage, pasa el slug del archivo como searchParam file en la ruta /api/storage de la siguiente manera:

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)
    })
}, [])