Practice: Configuring JSX Support in a Hono Application

Overview

In this Code Lab, you'll be responsible for modifying a Hono application to enable support for JSX syntax. Luckily, Hono makes it easy to enable JSX with minimal overhead, allowing you to render type-safe components directly within Hono routes.

Scenario

For this lab, you will start with a minimal bootstrapped Hono application. Hono is a web application framework, similar to Express or Next.js, that natively supports Typescript. It is designed to be lightweight and incredibly fast, utilizing the Bun runtime(although it can work with Node and many others as well) by default.

Throughout the course of this lab, you will configure the Hono application to enable usage of JSX, which you will then leverage to create a simple JSX component to be rendered on the Hono server.

Additional Info

There is a solution directory you can reference at any time to check your implementation. To run your Hono server, utilize the command bun src/index.tsx within the Terminal.

File Extension

The first thing to note is that, since Hono is a Typescript-native environment, file extensions will typically end with the .ts format. However, if you want to utilize JSX to be rendered on the Hono server, you need to change the file in question to use the .tsx file format—even if you enable JSX in the project configuration. For this lab, src/index.ts has already been changed to src/index.tsx for you, but make sure you always remember this.

Modify tsconfig

Now that the index.tsx has the correct extension, head over to tsconfig.json to enable JSX.

To do so, you will need to add the options "jsx": "react-jsx" and "jsxImportSource": "hono/jsx" after the "strict: true" option. The result should look like the following:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}

Once this is complete, JSX should now be enabled within your Hono project. As long as the file you are working with also has the .tsx file extension, it will support JSX.

Demonstrating JSX

Head over to src/index.tsx. This file is simply a bootstrapped file created by Hono, with the only modifications being some commented code snippets that you will work with in a bit.

First, you can run the file using the command bun src/index.tsx in the Terminal tab. Then, open the Web Browser tab to view the output. You should see the text Hello Hono!.

You can also view the output at the following URL: {{localhost:3000}}

Next, you'll need to edit this file to implement and display JSX components. Start by importing the functional component type at the very top of the file with the following line:

import type { FC } from 'hono/jsx'

After you've imported FC, there are 3 components and structures you will need to implement. They are Layout, DashboardProps, and Dashboard.

After you've implemented all these elements, you will need to modify the default route to properly display these JSX components.

c.html(<Dashboard user={user} notifications={notifications} />)`.

You can now see your JSX components by starting the server. Run the command bun src/index.tsx in the Terminal, and open the Web Browser again to see the output.

Don't forget to restart the application if it was still running. Press Control+C to stop it, then restart it to see the updated changes.

If all is working properly, then great job! You've successfully enabled JSX support in a Hono application.