Thank you. I am using `.then` to handle the async part. I will try to replace with await but I feel

Bbkyerv Thank you. I am using `.then` to handle the async part. I will try to replace wi...

Z

zwily•11/26/22, 1:39 PM

You still have to return that fetch call, even if you use then.

Z

zwily•11/26/22, 1:39 PM

(Either return it, or await it) but yeah, not related.

Bbkyerv when I run `wrangler pages dev --persist --r2=PIC -- npm run dev` to test locall...

Z

zwily•11/26/22, 1:44 PM

Is the repo public on GitHub?

B

bkyervOP•11/26/22, 1:46 PM

https://github.com/bkyerv/r2-demo

GitHub

GitHub - bkyerv/r2-demo

Contribute to bkyerv/r2-demo development by creating an account on GitHub.

Bbkyerv https://github.com/bkyerv/r2-demo

Z

zwily•11/26/22, 1:51 PM

Does the save-url function work?

B

bkyervOP•11/26/22, 1:51 PM

yes, that one returns url as expected (string value)

Bbkyerv yes, that one returns url as expected (string value)

Z

zwily•11/26/22, 1:52 PM

Hmm, and it all works locally on :8788?

B

bkyervOP•11/26/22, 1:52 PM

correct

B

bkyervOP•11/26/22, 1:53 PM

this is 4th day I am struggling to solve this issue

B

bkyervOP•11/26/22, 1:53 PM

B

bkyervOP•11/26/22, 1:53 PM

here is the build confs

B

bkyervOP•11/26/22, 1:54 PM

I can confirm that build artefacts end up in the

dist

dist

folder

Bbkyerv I can confirm that build artefacts end up in the `dist` folder

Z

zwily•11/26/22, 2:05 PM

and you have the R2 bucket binding set up?

B

bkyervOP•11/26/22, 2:22 PM

Yes, in the dashboard I declared variable PIC to my r2 namespace

K

kian•11/26/22, 2:24 PM

How big is the file you’re uploading

B

bkyervOP•11/26/22, 2:29 PM

53kb

Bbkyerv Yes, in the dashboard I declared variable PIC to my r2 namespace

Z

zwily•11/26/22, 2:30 PM

OK, so I got it working by doing this:

  const buffer = await fileUploaded.arrayBuffer();
  const bucketPut = await env.PIC.put(uuid, buffer, bucketPutOptions);

  const buffer = await fileUploaded.arrayBuffer();
  const bucketPut = await env.PIC.put(uuid, buffer, bucketPutOptions);

However: you probably want to stream the contents to r2 and this will buffer it in the worker, and I have no idea why it works locally.

Edit: Here's what you want:

  const bucketPut = await env.PIC.put(
    uuid,
    fileUploaded.stream(),
    bucketPutOptions
  );

  const bucketPut = await env.PIC.put(
    uuid,
    fileUploaded.stream(),
    bucketPutOptions
  );

  const bucketPut = await env.PIC.put(
    uuid,
    fileUploaded.stream(),
    bucketPutOptions
  );

  const bucketPut = await env.PIC.put(
    uuid,
    fileUploaded.stream(),
    bucketPutOptions
  );

B

bkyervOP•11/26/22, 2:33 PM

what is the difference/impact between buffer method and stream method?

Z

zwily•11/26/22, 2:33 PM

That gets a

readableStream

readableStream

from the uploaded File and passes it along, so you're not buffering the file contents.

B

bkyervOP•11/26/22, 2:33 PM

Thank you! Thank yoU!

Z

zwily•11/26/22, 2:34 PM

this must be a quirk of the differences between the local dev env and production. when pages gets support for

--experimental-local

--experimental-local

maybe your original code will stop working locally

PPause What is a good way to trigger middleware on GET requests for web pages only (and...

J

JustinNoel•11/26/22, 2:53 PM

This code is specific to my app, but you could do something similar.

type UsesMiddlewareProps = {
  url: string;
};

// Requests with these strings should not have middleware added to them.
export const undesiredPaths = [
  ".css",
  ".ico",
  ".js",
  ".png",
  ".jpeg",
  ".jpg",
  ".svg",
  ".wepb",
  "/fonts/"
];

export function getUsesMiddleware({url} : UsesMiddlewareProps): boolean {
  return ! undesiredPaths.some((undesiredString) => {
    return url.includes(undesiredString);
  });
}

type UsesMiddlewareProps = {
  url: string;
};

// Requests with these strings should not have middleware added to them.
export const undesiredPaths = [
  ".css",
  ".ico",
  ".js",
  ".png",
  ".jpeg",
  ".jpg",
  ".svg",
  ".wepb",
  "/fonts/"
];

export function getUsesMiddleware({url} : UsesMiddlewareProps): boolean {
  return ! undesiredPaths.some((undesiredString) => {
    return url.includes(undesiredString);
  });
}

type UsesMiddlewareProps = {
  url: string;
};

// Requests with these strings should not have middleware added to them.
export const undesiredPaths = [
  ".css",
  ".ico",
  ".js",
  ".png",
  ".jpeg",
  ".jpg",
  ".svg",
  ".wepb",
  "/fonts/"
];

export function getUsesMiddleware({url} : UsesMiddlewareProps): boolean {
  return ! undesiredPaths.some((undesiredString) => {
    return url.includes(undesiredString);
  });
}

type UsesMiddlewareProps = {
  url: string;
};

// Requests with these strings should not have middleware added to them.
export const undesiredPaths = [
  ".css",
  ".ico",
  ".js",
  ".png",
  ".jpeg",
  ".jpg",
  ".svg",
  ".wepb",
  "/fonts/"
];

export function getUsesMiddleware({url} : UsesMiddlewareProps): boolean {
  return ! undesiredPaths.some((undesiredString) => {
    return url.includes(undesiredString);
  });
}

I call

getUsesMiddleware

getUsesMiddleware

with a URL to decide if I need to do extra stuff with the request.

Z

zwily•11/26/22, 4:04 PM

Continuing the logs discussion from #workers-discussions … this morning as I was debugging, it seems like half the time I

wrangler pages publish

wrangler pages publish

ed, the resulting deploy would never return any logs. Half the time it did. So i would connect, do some requests, and if no logs came through, I’d publish again and try again. Over about 10 deploys, it worked half the time.

Z

zwily•11/26/22, 4:04 PM

Also, that wrangler table for deploys is terrible if your window isn’t wide enough because you can’t copy/paste the deploy url easily

J

JeremyJaydan•11/27/22, 10:01 PM

Hey is there another way to access environment variables other than

context.env

context.env

? I'm thinking of instantiating a faunadb client in a module then importing that, but then I'd have to dependency inject the secrets from where-ever I'm calling it from and I'm not sure about that.

Alternatively I'm thinking of instantiating the client in middleware which would work but there's more logic I'd like to write associated with the faunadb client / other services. Also how would I pass that down in the middleware,

context.env

context.env

is that the practice?

is there another preferred way of instantiating services to use across a cloudflare pages codebase? :)

J

James•11/27/22, 10:05 PM

You're pretty spot-on with

context.env

context.env

and passing it around. If it's something you plan to re-use in many places, you may want to extract it to your own Pages Plugin: https://developers.cloudflare.com/pages/platform/functions/plugins/
But that doesn't change much - it's essentially just reusable middleware.

J

JeremyJaydan•11/27/22, 10:05 PM

ah that makes sense! I'll look into plugins thanks!

J

JeremyJaydan•11/27/22, 10:15 PM

planning on passing a class instance with methods, what's the difference between

env

env

and

data

data

? also I'm concerned about compatibility in the future for example if I set a

env.HOUSE

env.HOUSE

for example then cloudflare releases a binding called

env.HOUSE

env.HOUSE

, would that be an issue?

J

JeremyJaydan•11/27/22, 10:17 PM

ah ok I'm just thinking because

env.ASSETS

env.ASSETS

is a default binding right? I'm guessing cloudflare doesn't want to pollute it either

J

JeremyJaydan•11/27/22, 10:19 PM

ok that makes sense

J

JeremyJaydan•11/27/22, 10:19 PM

thanks :)

J

James•11/28/22, 4:40 PM

Not at this time, hopefully in future

J

James•11/28/22, 5:00 PM

No I don't believe so - you would need Pages support directly, and that generally doesn't happen while a product is in beta.

E

Epailes•11/28/22, 9:20 PM

My Remix project doesn't work after upgrading from wrangler 2.2.2 to 2.4.4

Rebuilding...
Compiled Worker successfully.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)
Done in 500ms.
Watching Remix app in development mode...
1 warning(s) when compiling Worker.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)

Rebuilding...
Compiled Worker successfully.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)
Done in 500ms.
Watching Remix app in development mode...
1 warning(s) when compiling Worker.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)

Rebuilding...
Compiled Worker successfully.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)
Done in 500ms.
Watching Remix app in development mode...
1 warning(s) when compiling Worker.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)

Rebuilding...
Compiled Worker successfully.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)
Done in 500ms.
Watching Remix app in development mode...
1 warning(s) when compiling Worker.
Would you like to help improve Wrangler by sending usage metrics to Cloudflare? (y/n)

The project doesn't run correctly as it's stuck at this prompt, I tried passing in the send metrics flag like below:

launch script is:

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev:remix": "remix watch",
    "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --send_metrics=false",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "dev": "npm run clean && remix build && run-p dev:*",
    "start": "cross-env NODE_ENV=production npm run dev:wrangler",
    "clean": "del-cli functions && del-cli public/build"
  },

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev:remix": "remix watch",
    "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --send_metrics=false",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "dev": "npm run clean && remix build && run-p dev:*",
    "start": "cross-env NODE_ENV=production npm run dev:wrangler",
    "clean": "del-cli functions && del-cli public/build"
  },

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev:remix": "remix watch",
    "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --send_metrics=false",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "dev": "npm run clean && remix build && run-p dev:*",
    "start": "cross-env NODE_ENV=production npm run dev:wrangler",
    "clean": "del-cli functions && del-cli public/build"
  },

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev:remix": "remix watch",
    "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --send_metrics=false",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "dev": "npm run clean && remix build && run-p dev:*",
    "start": "cross-env NODE_ENV=production npm run dev:wrangler",
    "clean": "del-cli functions && del-cli public/build"
  },

That gives this output:

X [ERROR] Unknown argument: send_metrics

X [ERROR] Unknown argument: send_metrics

Am I making a silly mistake here or does

wrangler pages dev

wrangler pages dev

need updated to take in the

send_metrics

send_metrics

flag?

W

Walshy•11/28/22, 9:21 PM

yeah that send_metrics broke it for me the other day too...

W

Walshy•11/28/22, 9:22 PM

i meant to report that but forgot

W

Walshy•11/28/22, 9:22 PM

could you file an issue?

Original message was deleted

E

Epailes•11/28/22, 9:23 PM

Ah that's fixed it thanks!

WWalshy could you file an issue?

E

Epailes•11/28/22, 9:23 PM

yeah I'll make one

WWalshy could you file an issue?

E

Epailes•11/28/22, 9:28 PM

https://github.com/cloudflare/wrangler2/issues/2301

W

Walshy•11/29/22, 5:13 PM

@Pause Service bindings are now fixed, if you redeploy they should work

I

IEatBeans•11/29/22, 6:44 PM

If I use a function for security that’s restricting a couple pages, will cloudflare cache those pages and cause some requests to bypass the security and go straight to the page, or is it smart and won’t do that

IIEatBeans If I use a function for security that’s restricting a couple pages, will cloudfl...

H

Hello, I’m Allie!•11/29/22, 6:46 PM

Cloudflare Workers(and therefore Functions) will only place things in the cache if you tell them to.

W

Walshy•11/29/22, 6:53 PM

^

Thank you. I am using `.then` to handle the async part. I will try to replace with await but I feel

Similar Threads