sultan.xh Posts - Answer Overflow

sultan.xh

•Created by sultan.xh on 5/2/2024 in #pages-help

Failed to access R2 Bucket locally as well as in production using Wrangler

I have this code setup for my NuxtJS project:

// wrangler.toml
name = "nuxt-cf"
compatibility_date = "2024-04-23"
pages_build_output_dir = "./dist"

[[r2_buckets]]
binding = "R2"
bucket_name = "abc"


// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: "cloudflare-pages"
  },
  modules: ["nitro-cloudflare-dev"]
})


// env.d.ts
declare module "h3" {
  interface H3EventContext {
    cf: CfProperties,
    cloudflare: {
      request: Request,
      env: {
        R2: R2Bucket,
      },
      context: ExecutionContext,
    }
  }
}

export {}


// server/api/r2.ts
export default defineEventHandler(async ({ context }) => {
  const obj = await context.cloudflare.env.R2.get('settings/site')
  if (obj === null) {
    return new Response("Object Not Found", { status: 404 });
  }
  return new Response(obj.body)
})


// pages/home.ts
<script setup>
const { data, error, status, pending } = useFetch('/api/r2', {
  lazy: true
})
console.log(data.value)
</script>

<template>
  <div>
    Home Page
  </div>
</template>

// wrangler.toml
name = "nuxt-cf"
compatibility_date = "2024-04-23"
pages_build_output_dir = "./dist"

[[r2_buckets]]
binding = "R2"
bucket_name = "abc"


// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: "cloudflare-pages"
  },
  modules: ["nitro-cloudflare-dev"]
})


// env.d.ts
declare module "h3" {
  interface H3EventContext {
    cf: CfProperties,
    cloudflare: {
      request: Request,
      env: {
        R2: R2Bucket,
      },
      context: ExecutionContext,
    }
  }
}

export {}


// server/api/r2.ts
export default defineEventHandler(async ({ context }) => {
  const obj = await context.cloudflare.env.R2.get('settings/site')
  if (obj === null) {
    return new Response("Object Not Found", { status: 404 });
  }
  return new Response(obj.body)
})


// pages/home.ts
<script setup>
const { data, error, status, pending } = useFetch('/api/r2', {
  lazy: true
})
console.log(data.value)
</script>

<template>
  <div>
    Home Page
  </div>
</template>

I am trying to get the R2 object from the home page but always get null from localhost. I don't know what I am missing.

2 replies

CDCloudflare Developers

•Created by sultan.xh on 4/9/2024 in #pages-help

Having a lot of Invalid Traffic on my Cloudflare pages app. Any solution?

I am having a lot of IVT on my CF pages app. I am not sure what is going on. Is there any CF service that can help with this issue?

1 replies

CDCloudflare Developers

•Created by sultan.xh on 8/27/2023 in #pages-help

Most effective method for clearing the R2 object cache after updating from Pages Function?

Hello, I am using Cloudflare Pages, and I have connected R2 using Pages Function. Could you please help me purge the R2 object cache after updating the file from the Pages Function? Thanks!

10 replies

Gaming

Programming