Frequently Asked Questions

How is Jeasx officially pronounced?

Jeasx is a combination of the words "JSX" and "ease". The phonetic transcription is d͡ʒizɛks.

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! As Jeasx supports all esbuild plugins, you can use the existing ecosystem. Please have a look at the .env.js of this website to see how things should be wired for Tailwind. Similar approach should work for SASS / SCSS too.

Can I use Jeasx as a Static Site Generator (SSG)?

Yes, of course. Jeasx is a server side rendering framework at its heart, but it can be easily used to export a static site. In order to do so, simply run your application with npm start and then execute

wget --mirror --page-requisites --no-host-directories --directory-prefix=www http://localhost:3000 http://localhost:3000/404

to export your site to a www-directory, which can be easily served via a simple file-server.

Have a look at the Dockerfile of this website to see how things can be wired up for serving a static export with Caddy as file-server.

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 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 output at root level with only a .gitkeep in it and register it in your vercel.json:

 {... "outputDirectory": "output" ...}

This change is only recommended, if your Vercel application applies appropriate cache control headers (CDN-Cache-Control) or is proxied via a 3rd-party CDN likeCloudflare. Please visit the Vercel documentation for more information.