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 to use debugger with Jeasx?

To enable sourcemaps for debugging your code, configure ESBUILD_SERVER_OPTIONS or ESBUILD_BROWSER_OPTIONS in your .env.js file based on your specific needs. While I recommend using inline as the configuration value for simplicity, the optimal choice may depend on your setup and tooling. Please study the esbuild documentation for the different configuration options.

/** @type {() => import("esbuild").BuildOptions} */
ESBUILD_SERVER_OPTIONS: () => ({
  sourcemap: "inline",
});