Set up Jeasx manually

my-project/
├── jeasx.config.js
├── package.json
├── tsconfig.json
└── src/
    ├── [index].jsx
    └── index.css

Step 1: Create package.json

Create a new project folder and add a package.json with Jeasx as dependency and scripts for development and production:

{
  "name": "my-project",
  "type": "module",
  "scripts": {
    "dev": "jeasx dev",
    "build": "jeasx build",
    "start": "jeasx start"
  },
  "dependencies": {
    "jeasx": "3.0.0"
  },
  "allowScripts": {
    "esbuild": true
  }
}

Then install the dependencies:

npm install

Step 2: Create jeasx.config.js

Jeasx expects a configuration file in the project root. The following defaults are a good starting point and give you type hints in your editor (see configuration for details):

// Every option may also be an async function returning a Promise.
export default {
  /** @type {() => import("esbuild").BuildOptions} */
  ESBUILD_SERVER_OPTIONS: () => ({}),

  /** @type {() => import("esbuild").BuildOptions} */
  ESBUILD_BROWSER_OPTIONS: () => ({}),

  /** @type {(fastify: import("fastify").FastifyInstance) => import("fastify").FastifyInstance | Promise<import("fastify").FastifyInstance>} */
  FASTIFY_SERVER: (fastify) => fastify,

  /** @type {() => import("fastify").FastifyServerOptions} */
  FASTIFY_SERVER_OPTIONS: () => ({}),

  /** @type {() => import("@fastify/send").SendOptions} */
  FASTIFY_SEND_OPTIONS: () => ({}),
};

Step 3: Create tsconfig.json

This tells esbuild (and your editor) how to compile JSX. Simply extend the configuration shipped with Jeasx:

{
  "extends": "jeasx/tsconfig.json"
}

Step 4: Create your first route src/[index].jsx

Every file in src wrapped in brackets becomes a route. [index].jsx handles requests to /:

import { html } from "jsx-async-runtime";

export default function Index({ request, reply }) {
  // Redirect to a default greeting if no name is given
  if (!request.query.name) {
    return reply.redirect("/?name=World");
  }

  return (
    <>
      {html("<!DOCTYPE html>")}
      <html lang="en">
        <head>
          <title>Hello Jeasx</title>
          <link rel="stylesheet" href="/index.css" />
        </head>
        <body>
          <h1>Hello {request.query.name}</h1>
        </body>
      </html>
    </>
  );
}

Each route receives the incoming request and the outgoing reply from Fastify. Use request to read query parameters, headers or the body, and reply to set the status code, headers or redirects before the page is rendered.

Jeasx escapes all strings by default, so the doctype is wrapped with the html helper to render it as literal markup.

Step 5: Create a stylesheet src/index.css

Files named index.css or index.js in src are bundled by esbuild for the browser. The stylesheet is served at /index.css:

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}

body {
  margin: 0 auto;
  padding: 2rem 1rem;
  max-width: 48rem;
}

h1 {
  color: light-dark(#0f766e, #2dd4bf);
}

Step 6: Start the dev server

npm run dev

Now visit http://localhost:3000/?name=Jeasx and you should see your greeting. From here on, you can add more routes, components and a public folder for static assets.