Hi. I have a Nuxt project with Git integration to deploy at Cloudflare Pages. I have no functions at

Bborat8333 Hi. I have a Nuxt project with Git integration to deploy at Cloudflare Pages. I ...

D

Dahoom•8/20/23, 2:16 AM

You might be trying to use SSR, SSR depends on functions to load the page

D

Dahoom•8/20/23, 2:16 AM

Without functions you would probably have to make it a static site for it to work

J

Johtozo•8/20/23, 10:19 PM

Question specifically on Pages. I have a case where I have a template page and a Function, specifically HTMLrewriter. Whenever that template page is visited, the Function runs to - say, replace the inner content of

<p>

<p>

<p>

<p> for now. The end goal is to mimic a "site generator" (you can sorta think about it in terms of includes, I suppose - I'm aware there's stuff like Jekyll but this is more of a learning than using the "correct" resources) but I'll just go with replacing elements for now.

For whatever reason, it just hasn't been working for me, and I think it's because I can't really wrap my head around either requests or routing. So, two questions:

(1) Is the function at

/functions/index.js

/functions/index.js

/functions/index.js

/functions/index.js, for example, automatically invoked when I visit

index.html

index.html

at the root? Or do I actually have to call it, somehow?

(2) I'm not really sure I'm understanding requests - I would assume visiting the page is a form of a request, which would call the worker? But it's just not working for me, unless the problem lies with the rest of the code.

I've scoured the documentation and I guess I just need someone to explain it with a bit more words

I

IEatBeans•8/21/23, 3:05 AM

This may be more relevant to workers in general, but is there any way to set the timezone on a production function, or change it on wrangler? I built lots of time related logic, and then realized it all breaks in prod because the workers run on UTC and my local machine runs on my time zone

I

IEatBeans•8/21/23, 4:14 AM

This timezone and general time stuff is driving me crazy

PPA I'm referring to a database to store a constantly updating list of strings. Such...

I

i40west•8/21/23, 6:50 AM

You can use KV on the free plan. Also D1 though that's still just in alpha

Original message was deleted

J

Johtozo•8/21/23, 6:52 AM

Nope - I'm running it on a local host. Either that's the issue or I'm just doing something terribly wrong

thank you so much!

Original message was deleted

J

Johtozo•8/21/23, 7:32 AM

None at all, hmm.

Here's my worker at

/functions/index.js/

/functions/index.js/

/functions/index.js/

/functions/index.js/

I've refactored the HTMLrewriter example to be a pages function

`export async function onRequestGet(context, env) {
      const OLD_URL = "developer.mozilla.org";
      const NEW_URL = "mynewdomain.com";
  
      class AttributeRewriter {
        constructor(attributeName) {
          this.attributeName = attributeName;
        }
        element(element) {
          const attribute = element.getAttribute(this.attributeName);
          if (attribute) {
            element.setAttribute(
              this.attributeName,
              attribute.replace(OLD_URL, NEW_URL)
            );
          }
        } 
      }
  
      const rewriter = new HTMLRewriter()
        .on("a", new AttributeRewriter("href"))
        .on("img", new AttributeRewriter("src"));
  
      const res = await fetch(context, env);
      const contentType = res.headers.get("Content-Type");
  
      // If the response is HTML, it can be transformed with
      // HTMLRewriter -- otherwise, it should pass through
      if (contentType.startsWith("text/html")) {
        return rewriter.transform(res);
      } else {
        return res;
      }
    }```

and of course my

`export async function onRequestGet(context, env) {
      const OLD_URL = "developer.mozilla.org";
      const NEW_URL = "mynewdomain.com";
  
      class AttributeRewriter {
        constructor(attributeName) {
          this.attributeName = attributeName;
        }
        element(element) {
          const attribute = element.getAttribute(this.attributeName);
          if (attribute) {
            element.setAttribute(
              this.attributeName,
              attribute.replace(OLD_URL, NEW_URL)
            );
          }
        } 
      }
  
      const rewriter = new HTMLRewriter()
        .on("a", new AttributeRewriter("href"))
        .on("img", new AttributeRewriter("src"));
  
      const res = await fetch(context, env);
      const contentType = res.headers.get("Content-Type");
  
      // If the response is HTML, it can be transformed with
      // HTMLRewriter -- otherwise, it should pass through
      if (contentType.startsWith("text/html")) {
        return rewriter.transform(res);
      } else {
        return res;
      }
    }```

and of course my

`export async function onRequestGet(context, env) {
      const OLD_URL = "developer.mozilla.org";
      const NEW_URL = "mynewdomain.com";
  
      class AttributeRewriter {
        constructor(attributeName) {
          this.attributeName = attributeName;
        }
        element(element) {
          const attribute = element.getAttribute(this.attributeName);
          if (attribute) {
            element.setAttribute(
              this.attributeName,
              attribute.replace(OLD_URL, NEW_URL)
            );
          }
        } 
      }
  
      const rewriter = new HTMLRewriter()
        .on("a", new AttributeRewriter("href"))
        .on("img", new AttributeRewriter("src"));
  
      const res = await fetch(context, env);
      const contentType = res.headers.get("Content-Type");
  
      // If the response is HTML, it can be transformed with
      // HTMLRewriter -- otherwise, it should pass through
      if (contentType.startsWith("text/html")) {
        return rewriter.transform(res);
      } else {
        return res;
      }
    }```

and of course my

`export async function onRequestGet(context, env) {
      const OLD_URL = "developer.mozilla.org";
      const NEW_URL = "mynewdomain.com";
  
      class AttributeRewriter {
        constructor(attributeName) {
          this.attributeName = attributeName;
        }
        element(element) {
          const attribute = element.getAttribute(this.attributeName);
          if (attribute) {
            element.setAttribute(
              this.attributeName,
              attribute.replace(OLD_URL, NEW_URL)
            );
          }
        } 
      }
  
      const rewriter = new HTMLRewriter()
        .on("a", new AttributeRewriter("href"))
        .on("img", new AttributeRewriter("src"));
  
      const res = await fetch(context, env);
      const contentType = res.headers.get("Content-Type");
  
      // If the response is HTML, it can be transformed with
      // HTMLRewriter -- otherwise, it should pass through
      if (contentType.startsWith("text/html")) {
        return rewriter.transform(res);
      } else {
        return res;
      }
    }```

and of course my

index.html` at the root:

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
    <a href="developer.mozilla.org">link</a>
  </body>
</html>

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
    <a href="developer.mozilla.org">link</a>
  </body>
</html>

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
    <a href="developer.mozilla.org">link</a>
  </body>
</html>

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
    <a href="developer.mozilla.org">link</a>
  </body>
</html>

CCretezy Doesn't seem like it's possible to `import` JSON, am I missing something? ``` ✘...

C

Cretezy•8/21/23, 5:59 PM

Any update on this?

import

import

import

importing JSON doesn't seem to work

C

Cretezy•8/21/23, 6:29 PM

Just got this error 3 times in a row:

14:28:36.759    ✨ Upload complete!
14:28:40.138    Could not generate the asset manifest. Please try again. If this continues to fail, please consider posting in our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID.
14:28:41.289    Failed: an internal error occurred
14:28:41.289    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 4c6a572e-849d-4616-a765-622978e75584

14:28:36.759    ✨ Upload complete!
14:28:40.138    Could not generate the asset manifest. Please try again. If this continues to fail, please consider posting in our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID.
14:28:41.289    Failed: an internal error occurred
14:28:41.289    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 4c6a572e-849d-4616-a765-622978e75584

14:28:36.759    ✨ Upload complete!
14:28:40.138    Could not generate the asset manifest. Please try again. If this continues to fail, please consider posting in our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID.
14:28:41.289    Failed: an internal error occurred
14:28:41.289    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 4c6a572e-849d-4616-a765-622978e75584

14:28:36.759    ✨ Upload complete!
14:28:40.138    Could not generate the asset manifest. Please try again. If this continues to fail, please consider posting in our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID.
14:28:41.289    Failed: an internal error occurred
14:28:41.289    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 4c6a572e-849d-4616-a765-622978e75584

C

Cretezy•8/21/23, 6:30 PM

Last succesful deployment was 19 minutes ago, first failing was 9 minutes ago

CCretezy Just got this error 3 times in a row: ``` 14:28:36.759 ✨ Upload complete! 14:...

R

ryan•8/21/23, 6:31 PM

getting this as well when deploying cf pages

CCretezy Just got this error 3 times in a row: ``` 14:28:36.759 ✨ Upload complete! 14:...

D

DaniFoldi•8/21/23, 6:34 PM

Thanks for reporting, we're raising this with the team!

Z

zegevlier•8/21/23, 6:38 PM

https://www.cloudflarestatus.com/incidents/rbcwy68wvxp3

Cloudflare Pages deployment failures

E

ejcx•8/21/23, 6:50 PM

I also got the same issue after deploying several times earlier today

E

ejcx•8/21/23, 6:56 PM

It worked!

C

Cretezy•8/21/23, 7:03 PM

Worked for me too, thank you

Ddave ```typescript export const onRequestGet: PagesFunction<{}> = async (context) => ...

D

dave•8/21/23, 8:28 PM

How do I catch/log all exceptions in my Pages Functions?

Ddave How do I catch/log all exceptions in my Pages Functions?

J

James•8/21/23, 10:11 PM

Sentry Pages Plugin or similar perhaps? https://developers.cloudflare.com/pages/platform/functions/plugins/sentry/

J

James•8/21/23, 10:11 PM

These are effectively just middleware

J

James•8/21/23, 10:12 PM

In the case of Sentry, it's effectively a

try...catch

try...catch

next()

next()

wrapper: https://github.com/cloudflare/pages-plugins/blob/main/packages/sentry/functions/_middleware.ts

CCretezy Any update on this? `import`ing JSON doesn't seem to work

C

Cretezy•8/22/23, 4:46 AM

Not exactly sure how, but this works now!

T

Torzak•8/22/23, 4:31 PM

Hello, Can someone explain to me why this behavior, I'm a beginner in JS ...

export function onRequest(context) {
  return new Response(Object.keys(context.request)) // return Empty output
  return new Response(Object.keys(context.request.cf)) // Return a lot of properties 
}

export function onRequest(context) {
  return new Response(Object.keys(context.request)) // return Empty output
  return new Response(Object.keys(context.request.cf)) // Return a lot of properties 
}

export function onRequest(context) {
  return new Response(Object.keys(context.request)) // return Empty output
  return new Response(Object.keys(context.request.cf)) // Return a lot of properties 
}

export function onRequest(context) {
  return new Response(Object.keys(context.request)) // return Empty output
  return new Response(Object.keys(context.request.cf)) // Return a lot of properties 
}

why i can't list properties and methods on context.request object with Object.keys() ? thank you

K

kian•8/22/23, 4:43 PM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

given object's own enumerable string-keyed property names

K

kian•8/22/23, 4:43 PM

The properties of most Web API types in Cloudflare Workers are not enumerable.

T

Torzak•8/22/23, 4:56 PM

Thanks @kian

, So Is there a way/tips to list all the properties and methods of this context object without referring to the documentation here ? https://developers.cloudflare.com/pages/platform/functions/api-reference/#eventcontext I have the same kind of ouput with JSON.stringify method.

API reference · Cloudflare Pages docs

Learn about the APIs used within Pages Functions.

K

kian•8/22/23, 5:06 PM

There aren't really any nice ways.

K

kian•8/22/23, 5:06 PM

Even if you do some awful JSON.stringify workarounds, you still end up needing to handle

headers

headers

headers

headers specifically amongst others.

T

Torzak•8/22/23, 5:09 PM

export function onRequest(context) {
return new Response(JSON.stringify(context.request))
}

JSON.stringify output {} on my local test...

Capture_decran_2023-08-22_a_19.09.31.png

Kkian Even if you do some awful JSON.stringify workarounds, you still end up needing t...

T

Torzak•8/22/23, 5:10 PM

how did you output that ?

K

kian•8/22/23, 5:10 PM

JSON.stringify(req, Object.getOwnPropertyNames(Object.getPrototypeOf(req)), '\t')

JSON.stringify(req, Object.getOwnPropertyNames(Object.getPrototypeOf(req)), '\t')

JSON.stringify(req, Object.getOwnPropertyNames(Object.getPrototypeOf(req)), '\t')

JSON.stringify(req, Object.getOwnPropertyNames(Object.getPrototypeOf(req)), '\t')

Kkian ```js JSON.stringify(req, Object.getOwnPropertyNames(Object.getPrototypeOf(req))...

T

Torzak•8/22/23, 5:10 PM

Thanks, i will try to understand that ....

K

kian•8/22/23, 5:12 PM

You'd be better off creating your own logging accessing each property as necessary

K

kian•8/22/23, 5:12 PM

i.e

console.log({
  url: req.url,
  method: req.method,
  ...
});

console.log({
  url: req.url,
  method: req.method,
  ...
});

console.log({
  url: req.url,
  method: req.method,
  ...
});

console.log({
  url: req.url,
  method: req.method,
  ...
});

T

Torzak•8/22/23, 5:20 PM

I am just experimenting with pages, and I wanted to check if there were any undocumented data in the context object. I don't have much experience with JS, and I was surprised that I couldn't list all the properties of this object, as is possible in others programming language like with vardump() in PHP, dir() vars() in python .... for example. Thank you, @kian.

K

kian•8/22/23, 5:25 PM

You can kind of do that like this...

for (const property in req) {
  console.log(`${property}: ${req[property]}`);
}

for (const property in req) {
  console.log(`${property}: ${req[property]}`);
}

for (const property in req) {
  console.log(`${property}: ${req[property]}`);
}

for (const property in req) {
  console.log(`${property}: ${req[property]}`);
}

K

kian•8/22/23, 5:25 PM

Basically, properties on the Web API types are typically non-enumerable (so not picked up by

Object.keys()

Object.keys()

Object.keys()

Object.keys() or

console.log()

console.log()

) and they're also on the prototype (so not picked up by

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() which looks at the instance) - but there are ways to print out what's on them.

Kkian You can kind of do that like this... ```js for (const property in req) { cons...

K

kian•8/22/23, 5:26 PM

K

kian•8/22/23, 5:27 PM

It's an issue mostly unique to Workers - you can

console.log

console.log

a Web API type in Node/Browsers/etc

T

Torzak•8/22/23, 5:28 PM

Very interesting information!

Original message was deleted

J

Johtozo•8/22/23, 6:33 PM

Found my problem. I wasn't running wrangler on the project directory itself and was running above it, since I have a collection of directories... silly me :- P works dandy now

S

smattmyers•8/24/23, 4:13 PM

Do I need to add routes to my project in order to get my functions to deploy? I used wrangler to generate an Angular Universal SSR Pages project and I added /functions directory to my root directory, but it does not seem like it's getting deployed, and the routes are definitely not working.

S

smattmyers•8/24/23, 5:51 PM

that makes sense...thanks!

X

xdeq•8/25/23, 11:02 PM

No changes were made to the project, but after a successful build at the very end the following error started to appear. What is it and where did it come from?
(nuxt3, nitro, cloudflare-pages preset)

J

James•8/25/23, 11:15 PM

I would guess one of your dependencies got updated

X

xdeq•8/25/23, 11:16 PM

@cherryjimbo No packages have been updated / removed / added

Hi. I have a Nuxt project with Git integration to deploy at Cloudflare Pages. I have no functions at

Similar Threads

Similar Threads

Similar Threads