Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
36 changes: 25 additions & 11 deletions docs/canary/concepts/file-routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,31 @@ description: |
Routes are the basic building block of Fresh applications. They are used to define the behaviour the application when a given path is requested.
---

Fresh ships with the `fsRoutes` helper which automatically adds routes based on
the structure in the `routes/` folder in your project. When you add a new file
there, it will register a new route automatically.
Use the `.fsRoutes()` helper on the [`App`](/docs/canary/concepts/app) instance
to specify where file based routes should be inserted. It adds routes based on
the structure in the `routes/` folder in your project (or any other folder you
have set in `dev.ts`). When you add a new file there, it will register a new
route automatically.

```ts main.ts
import { Builder } from "fresh/dev";

// Optionally set a custom route dir (will be `<root>/routes` by default)
const builder = new Builder({ routeDir: "path/to/routes" });

if (Deno.args.includes("build")) {
await builder.build();
} else {
await builder.listen(() => import("./main.ts"));
}
```

```ts
import { App, fsRoutes, staticFiles } from "fresh";
```ts main.ts
import { App, staticFiles } from "fresh";

const app = new App({ root: import.meta.url })
.use(staticFiles());

await fsRoutes(app, {
loadIsland: (path) => import(`./islands/${path}`),
loadRoute: (path) => import(`./routes/${path}`),
});
.use(staticFiles())
.fsRoutes(); // This inserts all file based routes here
```

> [info]: The `staticFiles()` middleware is required when using file based
Expand All @@ -26,6 +37,9 @@ await fsRoutes(app, {
Example project structure:

```sh Project structure
├── deno.json
├── main.ts
├── dev.ts
└── routes
   ├── (marketing) # Route group, used to group related routes
   │ ├── _layout.tsx # Apply layout to all routes in this directory
Expand Down
5 changes: 5 additions & 0 deletions src/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,11 @@ export class App<State> {
return this;
}

/**
* Insert file routes collected in {@linkcode Builder} at this point.
* @param pattern Append file routes at this pattern instead of the root
* @returns
*/
fsRoutes(pattern = "*"): this {
this.#commands.push({
type: CommandType.FsRoute,
Expand Down