Frequently Asked Questions

Is there something like a context object similar to React?

Yes, Jeasx provides a context object via this which gets automagically propagated to sub-components. You can populate the context in an endpoint (e.g., a guard):

export default function ({ request, reply }) {
  this.date = new Date();
}

Later, you can access the context in any sub-component which gets called via an endpoint:

export default function () {
  return <p>The current date is {this.date.toISOString()}</p>;
}

Have a look at the demo to see how things work using the context as them provider.

How can I provide user friendly error messages?

To set up an error handler, simply register it in a route of your choice:

this.errorHandler = async (error) => {
  // You can decide if you want to create a log entry.
  // console.error("❌", error);
  return <h1>Internal server error</h1>;
}

How can I modifiy the resulting response (e.g. post-process HTML)?

For example, if you want to prettify the HTML output, you can wire up a response handler in any endpoint (e.g., a guard). The response handler takes the resulting payload as a parameter and returns the modified payload.

import * as prettier from "prettier";
...
export default function ({ request, reply }) {
  this.responseHandler = async (payload) => {
    return typeof payload === "string" &&
      String(reply.getHeader("content-type")).startsWith("text/html")
      ? await prettier.format(payload, { parser: "html" })
      : payload;
  };
}

Is there a way to set the document title in a sub-component (aka Helmet)?

Yes, have a look at the head example which demonstrates how easily this can be achieved with a guard.

Is it possible to use CSS-Frameworks like SASS or Tailwind?

Certainly! Please have a look at the package.json of this website to see how things should be wired for Tailwind. Same approach works for SASS too.

How to use a Browsersync with Jeasx?

If you want to reload CSS automagically, start Browsersync in proxy-mode in a second terminal:

npx -y browser-sync start -w -f "dist/**/index.css" -p localhost:3000

How can I apply custom caching rules via FASTIFY_STATIC_HEADERS for the public folder when deploying to Vercel?

As Vercel configures the public folder as default directory for static assets, you have to specify another directory in your vercel.json. For example, create an empty directory named build at root level with only a .gitkeep in it:

{"outputDirectory": "build"}

This change is only recommended, if your Vercel application is proxied via a 3rd-party CDN like Cloudflare. Please visit the Vercel documentation for more information.