DEV Community: Soham Dalal ⚛️

Building a Unified React App with HONO

Soham Dalal ⚛️ — Thu, 16 May 2024 06:21:19 +0000

Introduction

Exploring the latest upgrades within the Hono framework, we uncover its strengthened alliance with Vite, presenting developers with a more seamless fusion of React SPAs and Hono APIs. Within this article, our aim is to unveil a straightforward approach to project development, where constructing a React SPA alongside an API server becomes an effortless endeavor with the aid of Hono's enhanced capabilities.

Creating a Hono Project using bun package manager

Creating a project with the Hono framework with using the bun package manager is very simple. Follow these steps:

First, open the terminal and run the following command to create a new Hono project:

bun create hono app

Next, install the necessary packages to use Reactjs:

bun add react react-dom zod @hono/zod-validator
bun add -D vite @hono/vite-dev-server @types/react @types/react-dom bun-types @hono/vite-cloudflare-pages

If you are using TypeScript, change jsxImportSource in tsconfig.json from hono/jsx to react.
Finally, edit the vite.config.ts file and specify the react libraries in ssr.external. This ensures that react functions correctly during the server side rendering.

Now, the basic setup of a project combining Hono and React is complete. Then we will move on to the client side and server side implementations.

Client Side Implementation

For the client side implementation, create a src/client.jsx file. In this file define the Ui components using React. Here is the simple example :

import { createRoot } from "react-dom/client";
import { hc } from "hono/client";
import { AppType } from ".";

interface TodoListProps {
  todos: string[];
}

const client = hc<AppType>("/");

function TodoList({ todos }: TodoListProps) {
  return (
    <div>
      <a href="/">
        <h1>Todo App</h1>
      </a>
      <div>
        <input type="text" name="title" />
        <button
          type="submit"
          onClick={() => {
            const title = document.querySelector("input")?.value;
            client.todos.$post({
              form: {
                title
              },
            });
          }}
        >
          Add
        </button>
      </div>
      <ul>
        {todos.map((todo, i) => (
          <li key={i}>
            {todo}
            <button
              onClick={() => {
                client.todos[":id"].$delete({
                  param: {
                    id: i.toString(),
                  },
                });
              }}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

const domNode = document.getElementById("root")!;
const root = createRoot(domNode);
root.render(<TodoList todos={["sample"]} />);

Server Side Implementation

For the server side implementation, create a src/server.ts file and define the API endpoints using hono. Here is a simple example. With this, the API server that communicates with react application created on the client side is complete. By using Hono, you can easily set up API endpoints and establish communication with the react application.

import { Hono } from "hono";
import { renderToString } from "react-dom/server";
import { z } from "zod";
import { zValidator } from '@hono/zod-validator'

const app = new Hono();

app.get("/", (c) => {
  return c.html(
    renderToString(
      <html>
        <head>
          <meta charSet="utf-8" />
          <meta content="width=device-width, initial-scale=1" name="viewport" />
          {import.meta.env.PROD ? (
            <script type="module" src="/static/client.js"></script>
          ) : (
            <script type="module" src="/src/client.tsx"></script>
          )}
        </head>
        <body>
          <div id="root"></div>
        </body>
      </html>
    )
  );
});

const schema = z.object({
  title: z.string().min(1),
});

app.post(
  "/todos",
  zValidator("form", schema),
  (c) => {
    const { title } = c.req.valid('form')
    // TODO: DB insert
    return c.json({title})
  }
);

app.delete(
  "/todos/:id",
  (c) => {
    const id = c.req.param.id
    // TODO: DB delete
    return c.json({ id });
  }
);

export type AppType = typeof app;

export default app;

Building & Deploying the project

To build and deploy the project, use the following command:

Build client and server:
vite build --mode client && vite build
Deploy to Cloudflare Pages:
wrangler pages deploy dist

Additionally, you can deploy this using Vercel. However, in my case, I am using the Bun package manager, and unfortunately, Vercel deployment is not working for me. I encounter errors when attempting to deploy this on Vercel.

Conclusion

In summary, this article demonstrated the streamlined process of constructing a project incorporating a React Single Page Application (SPA) and an API server using the Hono framework. By harnessing the synergy between Hono and Vite, developers can seamlessly navigate through development, building, and deployment phases. Hono emerges as a valuable tool for crafting personal or internal applications not reliant on SEO, including WebView applications.

ADDING COMMAND ALIASES TO POWERSHELL

Soham Dalal ⚛️ — Tue, 07 May 2024 10:33:48 +0000

HOW MUCH TIME COULD YOU SAVE BY SHORTENING COMMON COMMANDS AND PARAMETERS USING POWERSHELL ALIASES? THE ANSWER IS A LOT.
If you’re like me, there are certain commands that get run repeatedly throughout your day. Between "git checkout", "docker {whatever}" and navigating to frequent paths with "cd", I’ve been wondering how much time I could save by shortening these commands and parameters.

THIS SEAT’S TAKEN

PowerShell has built in commands that we don’t want to step on. I won’t list them all (there are MANY), but if you get something wildly unexpected from your aliases then you can Google them.

SO SHOW ME ALREADY

Okay, okay. So first, let’s create a function in a ".ps1" file.

function goGoGadgetGitStatus {
  git status
}

The function above simply calls "git status". You can then setup an alias to call that function.

Set-Alias gs goGoGadgetGitStatus

Then from your PowerShell console you can type "gs" and it will run "git status".

That’s a very simplistic example but gives you an idea of what’s possible.

WHAT ABOUT PARAMETERS

Great question! We can define parameters in the function and then pass them in.

function goGoGadgetGit {
  Param(
    [Parameter(Mandatory = $true, Position = 0)]
    [String]
    $Cmd,

    [Parameter(Mandatory = $false, ValueFromRemainingArguments = $true)]
    [String[]]
    $Params
  )

  Switch ($Cmd)
  {
      #status
      's' { git status $Params }
      #init
      'i' {git init $Params }
      #add
      'a' {git add $Params }
      #branch
      'b' {git branch $Params }
      #checkout
      'ch' {git checkout $Params }
      #clean
      'cl' {git clean $Params }
      #clone
      'cln' {git clone $Params }
      #commit
      'cm' {git commit $Params }
      #config
      'cf' {git config $Params }
      #log
      'l' {git log $Params }
      #merge
      'm' {git merge $Params }
      #pull
      'pl' {git pull $Params }
      #push
      'pu' {git push $Params }
      #remote
      're' {git remote $Params }
  }
}
Set-Alias g goGoGadgetGit

Now in our console we can call "g s" to get "git status", "g i" to execute "git init", "g a" to get "git add", "g b" to get "git branch", "g ch" to get "git checkout", "g cl" to get "git clean", "g cln" to get "git clone", "g cm" to get "git commit", "g cf" to get "git config", "g l" to get "git log", "g m" to get "git merge", "g pl" to get "git pull", "g pu" to get "git push", "g re" to get "git remote". Also according to you, you can change the all of this shortcut.
And I’m not going to go into detail on how to write PowerShell functions or options for parameters. There are plenty of resources out there for the two. But hopefully this showed you a rudimentary way to set up command aliases for PowerShell. Just add the code to your PowerShell profile.ps1 and you’re off to the races.

POWERSHELL CONFIG

I’ve actually created a repository at https://github.com/dalalsoham/My_Powershell that has the PowerShell script that I include in my profile that gives many aliases for things like Git and also this is my PowerShell configuration. Feel free to fork & clone it and use this config in your system.

If you have any other suggestions or any corrections Leave a comment below. :)❤️