Translator

Created edge functions using Hono RPC Stack.

Server

import { Hono } from 'hono'
import example from 'routes/example'

const app = new Hono()
.basePath('/api')
.route('/example', example)
.route('/...', ...)

export type AppType = app

import { Hono } from "hono";
import { z } from "zod";
import { zValidator } from "@hono/zod-validator";
import { db } from "../db";

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

const test = new Hono()
  .post("/", zValidator("form", schema), async (c) => {
    const todo = c.req.valid("form");
    await db.test.create({ data: todo });
    return c.json({
      todo,
    });
  })
  .get("/", async (c) => {
    const todos = await db.test.findMany();
    return c.json({
      todos,
    });
  });

export default test;

Client

import { AppType } from "./server";
import { hc } from "hono/client";

const client = hc<AppType>("/api");
const res = await client.todo.$get();
const post = await client.todo.$post({
  form: {
    id: "12309",
    title: "example",
  },
});

Cloudflare Workers

wrangler for dev

{
  "scripts": {
    "dev": "wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2024-03-15 -- vite"
  }
}

Compatibility flags

• nodejs_compat

Environment variables

using wrangler.toml

[vars]

KEY = "..."

using .dev.vars

similar to a regular .env

KEY=...

Handled Client State with Zustand

import { create } from 'zustand'

type exampleStore = {
    allExamples: string[]
    addExample: (example:string) => void
    isExample: boolean
    toggleExample: () => void
}

export const useExampleStore = create<exampleStore>((set) => ({
    allExamples: [],
    addExample: (example) => set((state) => ({ allExamples: [...state.allExamples, example] }))
    isExample: false,
    toggleExample: () => set((state) => ({ isExample: !state.isExample }))
}))

import { useExampleStore } from '@/stores/example'

const App = () => {
    const { allExamples } = useExampleStore()
    return (
        // ...
        {allExamples.map((example) => (
            <div key={example.id}>
                {example.title}
            </div>
        ))}
    )
}

Created a deployment pipeline using GitHub Actions.

Serve and Test (start-server-and-test)

> start-server-and-test prod http://localhost:8788 'npx playwright test'

1: starting server using command "npm run prod"
and when url "[ 'http://localhost:8788' ]" is responding with HTTP status code 200
running tests using command "npx playwright test"

env variables (stackoverflow)

paste your entire env file in one secret named ENV_FILE and the just do echo "${{ secrets.ENV_FILE }}" > .env

- name: Create env file
  run: echo "${{ secrets.ENV_FILE }}" > .env

Skipping workflow

add if statement before steps to check if commit msgs for a skip flag (in this case ‘#skip’)

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: ${{ github.event_name == 'push' && !contains(join(github.event.commits.*.message, ''), '#skip') }}

Tested the application using Playwright.

npx playwright test

import { test, expect } from '@playwright/test`

test.beforeEach(async ({ page }) => {
    await page.goto('...')
})

test.describe('example', () => {
    test('display a todo', async ({ page }) => {
        const newTodo = page.getByPlaceholder('Add a todo')
        await newTodo.fill('a todo')
        await newTodo.press('Enter')

        await expect(page.getByTestId('todo')).toHaveText('a todo')
    })
})

const App = () => {
  return (
    //...
    <div data-testid="todo">{todo}</div>
  );
};