https://discord.cloudflare.com logo
Join Discord
Powered by
# functions
  • i
    Is that new?
  • i
    As far as I was aware there was no ability to access Functions logs.
  • g
    Only in local mode. This won't give you your prod logs
  • i
    Oh, OK. 🙂
  • n
    I do think it's a runtime issue after playing with the top level catch
  • n
    especially since the local version doesn't face the same issues with the same functions calling the same external APIs
  • r
    I need some help with pages. I am trying to make a spa using vanillajs. I want to understand; 1. How do I set a catch-all route, which gets all the url requests other than '/api'. Once I get that I should be able to handle routing by myself. I am trying create a catch-all 404 error route here. if there are exact routes defined in my file structure, then run this js file 2. How would I return a DOM object instead of a string? Currently I am returning 
    return new Response('<p>Hello, World</p>');
  • i
    1. Pages should automatically do this for static SPAs, but if you're using Functions to serve content then I'd direct you to the file-based routing docs: https://developers.cloudflare.com/pages/platform/functions/ 2. Return it with a content-type of 
    text/html
  • r
    Thanks for the #2. Regarding 1, I just realized, I was supposed to do this for the catchall. Much appreciated
  • r
    I found a bug in pages. Where should I report it? there doesn't seems to be a repo for pages
  • w
    Right here
  • w
    what's the bug?
  • r
    The page https://developers.cloudflare.com/pages/platform/functions/#functions-routing talks about how
    Copy code
    ├── ...
├── functions
|   └── api
│        ├── [[path]].ts
│        ├── [id].ts
│        └── index.ts
└── ...
The following routes will be generated based on the file structure, mapping the URL pattern to the /functions file that will be invoked:

/api/todos => ./functions/api/todos/index.ts
/api/todos/* => ./functions/api/todos/[id].ts
/api/todos/*/** => ./functions/api/todos/[[path]].ts
    [[path]]
    and 
    index
    routes can coexist. However, in practice, the [[path]] route always overrides the index one. I am on wragler next and observed this on local hosting
  • r
    Found another bug with a top level [[path]] route. If we define a top level [[path]] (as a direct child of ./functions directory), then the [[path]] code is overriding even the static asset directory. For example, if I am running the site locally as 
    npx wrangler pages dev ./pub
    and I am serving a 
    style.css
    from the pub directory - if I also define a top level route like
    Copy code
    ./functions
    |-- todos
    |-- [[catchall]].js
    then every request for 
    http://localhost:8788/pub/style.css
    also returns the Response from my 
    [[catchall]].js
  • i
    Yeah, Functions override all static assets, that's intentional.
  • i
  • i
    Take a look at 
    next()
  • r
    Sorry, but I didn't quite get it. I couldn't find this solution in the article. is there a sample code I can read through?
  • i
    I don't know about a sample, but one sec.
  • i
    So it's this part:
    Copy code
    export async function onRequest(context) {
  // Contents of context object
  const {
    request, // same as existing Worker API
    env, // same as existing Worker API
    params, // if filename includes [id] or [[path]]
    waitUntil, // same as ctx.waitUntil in existing Worker API
    next, // used for middleware or to fetch assets
    data, // arbitrary space for passing data between middlewares
  } = context;
}
  • i
    Basically, catch-all Functions intercept all requests (even static asset ones).
  • i
    So it's up to you to forward them if they are meant for a static asset.
  • i
    You can do that by doing:
    Copy code
    const response = await context.next();
return response
    because 
    next()
    gives you the static asset, if one exists.
  • r
    Thanks. I am still not sure how to consume the response for the next() call. My route code is
    Copy code
    export async function onRequest(context) {
    const assets = await context.next();
    console.log (assets)

    const html = /*html*/`
        <!doctype html>
        <html>
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href=`WHAT SHOULD GO HERE??` rel="stylesheet">
            </head>
            <body>
            <h1 class="text-3xl font-bold underline text-red-900">
                HOME
            </h1>
            </body>
        </html>
    `;

    return new Response(html, {
        headers: {
            'content-type': 'text/html;charset=UTF-8',
        },
    });
}
    I am not sure how to go about using the style.css from my pub folder in my html code.
  • i
    So first you'll need to check if the path is 
    /pub
    or not. That'll help you decide what to serve.
  • i
    So check if the path starts with 
    /pub
    , and if so, do:
    Copy code
    const assets = await next();
return assets;
    Otherwise, return your HTML.
  • i
    For example:
    Copy code
    export async function onRequest(context) {
    const url = new URL(context.request.url);
    if (url.pathname.startsWith('/pub/')) {
        return await context.next();
    }

    const html = /*html*/`
        <!doctype html>
        <html>
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href=`WHAT SHOULD GO HERE??` rel="stylesheet">
            </head>
            <body>
            <h1 class="text-3xl font-bold underline text-red-900">
                HOME
            </h1>
            </body>
        </html>
    `;

    return new Response(html, {
        headers: {
            'content-type': 'text/html;charset=UTF-8',
        },
    });
}
  • r
    I am getting 404 error on my asset path. Anyway, thanks for all the help. I will try again tomorrow with fresh eyes
  • a
    Hi, I'm trying to call an API from a function, but the API requires me to add an IP to a whitelist. What's the IP Functions make their calls from?
  • s
    You could check request.headers.get('CF-Connecting-IP')
1...969798...392Latest