How do you load images from R2 for localhost storage? Suppose I have uploaded image 'a.jpg' to R2 st

How do you load images from R2 for localhost storage? Suppose I have uploaded image 'a.jpg' to R2 storage locally. Now, I would like to use that image as an image source. How can I do that?

Ssultan.xh How do you load images from R2 for localhost storage? Suppose I have uploaded im...

Hard@Work•6/24/24, 12:50 PM

For now, you need a Worker that converts the HTTP request to an R2 Worker API Call

sultan.xhOP•6/24/24, 1:42 PM

I understand, but it would be great if we could access R2 locally just like we can create D1 locally. I mean for local R2 setup.

sultan.xhOP•6/24/24, 1:43 PM

something like http://127.0.0.1:3000/<R2_path>/a.jpg

SpiraTech•6/24/24, 1:45 PM

Hello all, Is it possible to view logs of Cloudflare pages redirections on the free tier? Thank you

Felix•6/24/24, 2:24 PM

i have set up my pages project and been using direct upload. is there any way to still connect git?

SSpiraTech Hello all, Is it possible to view logs of Cloudflare pages redirections on the f...

Chaika•6/24/24, 2:36 PM

redirections?

There's no per request log or anything like that, only functions logging

FFelix i have set up my pages project and been using direct upload. is there any way to...

Chaika•6/24/24, 2:37 PM

only by recreating the project/making anew

CChaika only by recreating the project/making anew

Felix•6/24/24, 2:38 PM

damn. if i connect via git is direct upload still an option or is it one or the other?

Walshy•6/24/24, 2:39 PM

You can DU to a Git project

Chaika•6/24/24, 2:39 PM

(only from wrangler though, not from dash)

Felix•6/24/24, 2:39 PM

yeah been using wrangler

Felix•6/24/24, 2:40 PM

to migrate i guess set up new pages project and change DNS?

Chaika•6/24/24, 2:40 PM

not just dns, you'd need to remove it from the old page's projects custom domains tab and add to the new

Chaika•6/24/24, 2:41 PM

just changing DNS would get you errors, need the custom domain part as well

Felix•6/24/24, 2:41 PM

sweet

Felix•6/24/24, 2:41 PM

thanks

Felix•6/24/24, 2:41 PM

i guess for cert creation?

FFelix i guess for cert creation?

Chaika•6/24/24, 2:42 PM

Pages uses CF For SaaS under the hood which as a sort of "bind" from your custom domain to that pages project, and also an allowlist

Chaika•6/24/24, 2:43 PM

You do get a certificate as well from it, but you don't actually need the cert if it's site on Cloudflare & a first level subdomain/root and you've got universal ssl enabled

Felix•6/24/24, 2:43 PM

thank you for the details

CChaika redirections? 🤔 There's no per request log or anything like that, only function...

SpiraTech•6/24/24, 2:47 PM

Yeah, URL redirects I was going to track a QR code which uses a Cloudflare pages redirection to my main domain. Thanks

SSpiraTech Yeah, URL redirects I was going to track a QR code which uses a Cloudflare pages...

Chaika•6/24/24, 2:49 PM

like, you wanted analytics on who's visiting your site from where? Pages has one click integration with CF Web Analytics (under Manage tab), and it tracks Referrers as long as the user's browser passes it on

CChaika like, you wanted analytics on who's visiting your site from where? Pages has one...

SpiraTech•6/24/24, 2:51 PM

Yeah exactly - it's just a subdirectory off my main domain /qr-redirect/. I have CF web analytics turned on but I cannot see any detailed information and I've been looking for around 30 minutes or more now. It's not an actual webpage - it's just a redirect. I was trying to keep things simple.

SonyC•6/24/24, 6:10 PM

Hello, I have set a Service bindings in my worker pages setting to be able to request from the statically web page(built with vite) I deployed in pages to a worker. My issue is that I don't know how to access the env variable from my static page code to get the env.SERVICE.fetch call(I tried using import.meta.env but that doesn't work). HELP.

Xulo•6/24/24, 6:57 PM

Hi, I'm trying to deploy a Nuxt 3 website. I have tested it with Vercel before and it worked fine. Why is it not working on Cloudflare? This is my log, has anyone an idea why the build failed? Thanks in advance

Xulo•6/24/24, 6:57 PM

These are my build settings

FFelix Could be. I am not sure what sets that context variable. Could be Nuxt since I h...

AGill•6/25/24, 2:06 AM

For Nuxt you have to add type declarations

import {
  CfProperties,
  Request,
  ExecutionContext,
  R2Bucket,
} from '@cloudflare/workers-types/experimental';

declare module 'h3' {
  interface H3EventContext {
    cf: CfProperties;
    cloudflare: {
      request: Request;
      env: {
        STORAGE_BUCKET: R2Bucket;
      };
      context: ExecutionContext;
    };
  }
}

import {
  CfProperties,
  Request,
  ExecutionContext,
  R2Bucket,
} from '@cloudflare/workers-types/experimental';

declare module 'h3' {
  interface H3EventContext {
    cf: CfProperties;
    cloudflare: {
      request: Request;
      env: {
        STORAGE_BUCKET: R2Bucket;
      };
      context: ExecutionContext;
    };
  }
}

Source: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/#add-bindings-to-typescript-projects

Cloudflare Docs

Nuxt · Cloudflare Pages docs

Web framework making Vue.js-based development simple and powerful.

XXulo Hi, I'm trying to deploy a Nuxt 3 website. I have tested it with Vercel before a...

AGill•6/25/24, 4:15 AM

when you deployed to Vercel, was it on vercel-edge? or lambda?

if it's not deploying on cf-pages my first thought is that a package is not bundled for

workerd

workerd

runtime appropriately

AAGill For Nuxt you have to add type declarations ```ts import { CfProperties, Req...

Felix•6/25/24, 4:39 AM

It's a runtime issue. I solved it by storing the context.cloudflare stuff in a global variable the first time the middle ware runs

Benzitczo•6/25/24, 4:43 AM

Question there 25 mb need 500 mb? and possible buy 5 usd?

Benzitczo•6/25/24, 4:43 AM

Walshy•6/25/24, 4:49 AM

The 25 MiB per file limit is a hard cap today.

WWalshy The 25 MiB per file limit is a hard cap today.

Benzitczo•6/25/24, 4:52 AM

ah i see..

Benzitczo•6/25/24, 4:53 AM

and maybe github yes more right?

Benzitczo•6/25/24, 4:53 AM

and use laravel yes?

Walshy•6/25/24, 4:53 AM

Not sure GitHub's max file size

Walshy•6/25/24, 4:53 AM

But no, you couldn't use laravel at GitHub

Walshy•6/25/24, 4:53 AM

You'd need some PHP host or a VPS

Benzitczo•6/25/24, 4:54 AM

oh i see, okay vps

Benzitczo•6/25/24, 4:54 AM

but probably only there HTML and css right?

Benzitczo•6/25/24, 4:54 AM

maybe future soon add laravel new host cloudflare?

Benzitczo•6/25/24, 4:54 AM

suggestion lol

AAGill when you deployed to Vercel, was it on vercel-edge? or lambda? if it's not depl...

Xulo•6/25/24, 8:50 AM

I'm not sure. How can I find out? I just imported the project from GitHub, and it detected it as Nuxt, so it used the Nuxt build options preset. Then, I just added my environment variables

WWalshy Not sure GitHub's max file size

Marwan•6/25/24, 8:59 AM

My cloudflare domain is not working on some locations. What is the solution?

Vikash•6/25/24, 12:53 PM

Getting error in static assets randomly -

After the 1st error, all the

static/*

static/*

assets on pages stops working and doesn't work until I login to CF dashboard > re-deploy the project. Any suggestion will be really apprecaited.

const cacheTtlByStatus = {
  '200-299': 86400,
  404: 5,
  '500-599': 0,
};

app.get(`${WEBSITE_URL}/static/*`, async (ctx) => {
  return await ctx.env.ASSETS.fetch(ctx.req.raw, {
    cf: {
      cacheTtlByStatus: cacheTtlByStatus,
    },
  });
});

const cacheTtlByStatus = {
  '200-299': 86400,
  404: 5,
  '500-599': 0,
};

app.get(`${WEBSITE_URL}/static/*`, async (ctx) => {
  return await ctx.env.ASSETS.fetch(ctx.req.raw, {
    cf: {
      cacheTtlByStatus: cacheTtlByStatus,
    },
  });
});

XXulo I'm not sure. How can I find out? I just imported the project from GitHub, and i...

Xulo•6/25/24, 1:24 PM

it suddenly worked, my Nuxt project got published on Cloudflare but now I'm having 500 error

Xulo•6/25/24, 1:24 PM

in Vercel it is still working fine

Lume•6/25/24, 2:20 PM

I recently read the blog article on Cloudflare's optimization techniques for decreasing cf pages latency (https://blog.cloudflare.com/how-we-decreased-pages-latency/). It's quite insightful, but I have a couple of questions regarding the implementation.

The article mentions optimizing by hashing the hostname of the deployment, where each "pipeline" corresponds to a worker named after the hashed hostname with a secret. How does this approach work with custom domains? Since custom domains have different hostnames, the hashed values wouldn't match.
Regarding the "special" asset worker mentioned in the article, does it execute before every request? How does it interact with function workers? Specifically, does it forward function requests via service binding to the function worker?

I'd appreciate any clarification on these points, particularly from someone familiar with Cloudflare Pages/Worker operations.

LLume I recently read the blog article on Cloudflare's optimization techniques for dec...

Hello, I’m Allie!•6/25/24, 7:09 PM

When using Cloudflare-for-SaaS(what Pages uses for Custom Domains), it passes in the
```
pages.dev
```
```
pages.dev
```
domain into the Pages Worker, so the hash will still match.
There is a Worker that handles Pages stuff, which is called on every request, though you don't pay for it. You only pay when it has to call in to your Functions

HHello, I’m Allie!1. When using Cloudflare-for-SaaS(what Pages uses for Custom Domains), it passes...

Lume•6/26/24, 7:00 AM

I tried this approach myself, but it didn't work as expected. I used a worker as a fallback and created a CNAME record pointing to the fallback. However, the domain in the Host header was always the custom hostname, not the CNAME domain. Is there a way to get the CNAME domain within the worker? Or is this some cloudflare internal stuff only.

import { CfProperties, Request, ExecutionContext, R2Bucket, } from '@cloudflare/workers-types/experimental'; declare module 'h3' { interface H3EventContext { cf: CfProperties; cloudflare: { request: Request; env: { STORAGE_BUCKET: R2Bucket; }; context: ExecutionContext; }; } }

How do you load images from R2 for localhost storage? Suppose I have uploaded image 'a.jpg' to R2 st

Similar Threads

Similar Threads

Similar Threads