What do you mean? a bug? My main issue is that I haven't found and 'official' example using Remix,

Rrodrigo What do you mean? a bug? My main issue is that I haven't found and 'official' e...

H

I think it is because you can’t really “use functions” with Remix. Remix uses functions for rendering, and the API, so if you write an API route in Remix, it will be compiled to Functions

H

Hello, I’m Allie!•11/25/22, 9:16 AM

Basically, if you use a framework like that, don’t manually create your Functions. They might work, but they might bork everything…

R

rodrigoOP•11/25/22, 9:29 AM

I don't understand. This example (without repo) it uses functions for authentication. I've tried it out, but I have the same error. But I guess it might work ... It's a bit confusing ...
https://dev.to/fllstck/serverless-remix-sessions-with-cloudflare-pages-4lpo

DEV Community 👩‍💻👨‍💻

Serverless Remix Sessions with Cloudflare Pages

Using sessions with Remix is a pretty straightforward task. Usually, you put your session data into a...

Rrodrigo I don't understand. This example (without repo) it uses functions for authentica...

H

Hello, I’m Allie!•11/25/22, 10:02 AM

It looks like what they are doing is having you mess around with the Remix Functions connector, which should be fine.

H

Hello, I’m Allie!•11/25/22, 10:03 AM

Every system that uses Functions for SSR requires a connector of some kind. Outside of that connector, you shouldn't be directly interacting with Functions.

R

rodrigoOP•11/25/22, 10:19 AM

ok, I'll try to learn more in the Remix discord!! thx!

PPause Are there any updates on service bindings in Pages?

W

Walshy•11/25/22, 8:49 PM

not yet

Rrage5quid I want to use workers to create an api, should I create one function per endpoin...

W

Walshy•11/25/22, 8:50 PM

Pros:

Integrated with your project, so they get deployed at the same time
Available on pages.dev
They are just Workers anyway

Cons:

/shrug

B

bkyerv•11/26/22, 12:59 PM

Hello everyone, I am building a simple app to try pages/function/r2. When I test the app locally (running

wrangler pages dev --persist --r2=PIC -- npm run dev

wrangler pages dev --persist --r2=PIC -- npm run dev

wrangler pages dev --persist --r2=PIC -- npm run dev

wrangler pages dev --persist --r2=PIC -- npm run dev) everything seems to work with no errors, however when I deploy the app using cf pages UI of the app works with no errors but any attempt to trigger functions result in errors. On the client (i.e. in the console tab of the devtools section of the browser) I see

internal server error 500

internal server error 500

internal server error 500

internal server error 500, on the backend

wrangler pages deployment tail

wrangler pages deployment tail

wrangler pages deployment tail

wrangler pages deployment tail I see

Error: network connection lost

Error: network connection lost

Error: network connection lost

Error: network connection lost. Initially I built the app using astro/vanillajs but then tried vite/react thinking that the error might be specific to astro, however the error persists

B

bkyerv•11/26/22, 1:01 PM

B

bkyerv•11/26/22, 1:03 PM

when I run

wrangler pages dev --persist --r2=PIC -- npm run dev

wrangler pages dev --persist --r2=PIC -- npm run dev

wrangler pages dev --persist --r2=PIC -- npm run dev

wrangler pages dev --persist --r2=PIC -- npm run dev to test locally the app is available on both port 5173(default for vite) and port8788(default for wrangler/workerd?). The one that is available on port 8788 works well while the one available on port 5173 results in same type of errors as the one on the prod (ie

[project-name].pages.dev

[project-name].pages.dev

[project-name].pages.dev

[project-name].pages.dev)

B

bkyerv•11/26/22, 1:36 PM

Thank you. I am using

.then

.then

to handle the async part. I will try to replace with await but I feel that whole this error has something to do with deploy. It seems like requests I am making are not directed to functions and therefore return some weird errors

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

bkyerv•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

bkyerv•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

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

correct

B

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

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

B

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

B

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

here is the build confs

B

bkyerv•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

bkyerv•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

bkyerv•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

bkyerv•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

bkyerv•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

What do you mean? a bug? My main issue is that I haven't found and 'official' example using Remix,

Similar Threads

Similar Threads

Similar Threads