Skip to content

[Pages] Use FileTree component in Functions routing #17448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 10, 2024
Merged

[Pages] Use FileTree component in Functions routing #17448

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a5c1fa
[Pages] Use FileTree component in Functions routing
KianNH Oct 10, 2024
2018793
Update src/content/docs/pages/functions/routing.mdx
KianNH Oct 10, 2024
6db27cd
Update src/content/docs/pages/functions/routing.mdx
WalshyDev Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 22 additions & 29 deletions src/content/docs/pages/functions/routing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@ pcx_content_type: reference
title: Routing
sidebar:
order: 2

---

import { FileTree } from "~/components";

Functions utilize file-based routing. Your `/functions` directory structure determines the designated routes that your Functions will run on. You can create a `/functions` directory with as many levels as needed for your project's use case. Review the following directory:

```
|---- …
|---- functions
|___ index.js
|___ helloworld.js
|___ howdyworld.js
|___ fruits
|___ index.js
|___ apple.js
|___ banana.js
```
<FileTree>
- ...
- functions
- index.js
- helloworld.js
- howdyworld.js
- fruits
- index.js
- apple.js
- banana.js
</FileTree>

The following routes will be generated based on the above file structure. These routes map the URL pattern to the `/functions` file that will be invoked when a visitor goes to the URL:

Expand All @@ -33,10 +34,8 @@ The following routes will be generated based on the above file structure. These

:::note[Trailing slash]


Trailing slash is optional. Both `/foo` and `/foo/` will be routed to `/functions/foo.js` or `/functions/foo/index.js`. If your project has both a `/functions/foo.js` and `/functions/foo/index.js` file, `/foo` and `/foo/` would route to `/functions/foo/index.js`.


:::

If no Function is matched, it will fall back to a static asset if there is one. Otherwise, the Function will fall back to the [default routing behavior](/pages/configuration/serving-pages/) for Pages' static assets.
Expand Down Expand Up @@ -72,25 +71,23 @@ By placing two sets of brackets around your filename – for example, `/users/[[

:::note[Route specificity]


More specific routes (routes with fewer wildcards) take precedence over less specific routes.


:::

#### Dynamic route examples

Review the following `/functions/` directory structure:

```
|---- …
|---- functions
|___ date.js
|___ users/
|___ special.js
|___ [user].js
|___ [[catchall]].js
```
<FileTree>
- ...
- functions
- date.js
- users
- special.js
- [user].js
- [[catchall]].js
</FileTree>

The following requests will match the following files:

Expand Down Expand Up @@ -131,10 +128,8 @@ On a purely static project, Pages offers unlimited free requests. However, once

:::note


Some frameworks (such as Remix, SvelteKit) will also automatically generate a `_routes.json` file. However, if your preferred framework does not, create an issue on their framework repository with a link to this page or let us know on [Discord](https://discord.cloudflare.com). Refer to the [Framework guide](/pages/framework-guides/) for more information on full-stack frameworks.


:::

### Create a `_routes.json` file
Expand All @@ -149,10 +144,8 @@ This file will include three different properties:

:::note


Wildcards match any number of path segments (slashes). For example, `/users/*` will match everything after the`/users/` path.


:::

#### Example configuration
Expand Down
Loading