Routes & Guards » Jeasx

In Jeasx, a file system-based routing system is at the heart of the framework.

All routes are stored in the routes directory of your project and are functions that receive request and reply objects from Fastify as props.

What is the difference between request.url, request.path and request.route?

The vanilla Fastify request object exposes the current url (e.g. /json/api/request.json?foo=bar) via request.url.

Jeasx adds two additional attributes to the Fastify request object to improve the developer experience:

request.path gives you the plain path without any query parameters (e.g. /json/api/request.json)
request.route provides the path to the current endpoint handler (e.g. /json/[...path])

Have a look at the JSON example to see request.url, request.path, request.route at work.

Routes can be written using JSX, but can also be written in JavaScript and/or TypeScript, so supported extensions are: .js(x)|.ts(x)

A route can return various types of payloads for the client, including HTML (default), JSON, or other formats. If you need to perform asynchronous operations, you can declare your route or imported components as async.

Named routes

The only rule for named routes is to enclose the base filename within brackets. This convention allows you to store components, services and utilities besides your routes without exposing them as endpoints.

Route path	URL
src/routes/[index].jsx	/
src/routes/a/b/[you-name-it].jsx	/a/b/you-name-it
src/routes/company/[index].tsx	/company
src/routes/images/[logo.svg].js	/images/logo.svg
src/routes/api/posts/[update.json].ts	/api/posts/update.json
src/routes/api/posts/utils/format.ts	This file is not exposed as endpoint.

Code example


export default function Welcome({ request, reply }) {
  return (
    <>
      {"<!DOCTYPE html>"}
      <html lang="en">
      <head>
        <base href={`${request.path.endsWith("/") ? request.path : request.path + "/"}`} />
        <title>Hello World</title>
      </head>
      <body>
        <h1>Hello World</h1>
      </body>
      </html>
    <>
  );
}

Dynamic routes

Dynamic routes are wildcards designed to capture all requests for the current folder and its subfolders. They enable the creation of content with a dynamic URL structure, such as pages retrieved from a CMS. If a named route exists in the same folder as dynamic route, the named route will take precedence. The name for a dynamic route is fixed and must be:[...path](.jsx|.js|.tsx|.ts)

Route path	URL
src/routes/blog/[...path].jsx	/blog/article1 /blog/category/article2

Code example

export default async function Product({ request, reply }) {
  const segments = request.path.split("/");
  const product = await (await fetch(`https://dummyjson.com/product/${segments[1]}`)).json();

  if (product.message) {
    reply.status(404);
    return;
  }

  return (
    <Layout title={product.title} description={product.description}>
      <article>
        <h1>{product.title}</h1>
        <p>{product.description}</p>
      </article>
    </Layout>
  );
}

Guards

Guards enable you to intercept requests and are inherited from the root to the current folder. They are valuable for controlling access to a route. Typically, a guard does not return any payload, allowing the request to be handled by the next defined route. However, if a guard does return a payload, it will be delivered to the client, and no other route will be executed.

Route path	URL
src/routes/blog/[...guard].jsx	The code of the guard is executed before named or dynamic routes in the current folder or below.

Code example


export default function AuthorizationGuard({ request, reply }) {
  const authorization = request.headers["authorization"];
  if (
    authorization !== `Basic ${Buffer.from("demo:demo").toString("base64")}`
  ) {
    reply.header("WWW-Authenticate", 'Basic realm="Restricted Area');
    reply.status(401);
    return (
      <Layout title="Error 401">
        <h1>Error 401</h1>
        <p>You are not allowed to view this page!</p>
      </Layout>
    );
  }
}

Additionally, a guard has the capability to return an object, which will serve as props for all routes protected by the guard. This feature enables the creation of routes that are entirely independent from the request object, simplifying component testing.


export default function PropsGuard({ request }) {
  const body = request.body || {};
  return { message: body["message"] };
}


export default function MessageView({ message }) {
  return <p>{message ? message : "No message for you"}</p>;
}