Code Monkey home page Code Monkey logo

hyperwave-hello's Introduction

Bun, HTMX, and Fireproof

This is a simple proof-of-concept to get you started using Fireproof on the server side. In this example, we import Fireproof from the node build:

import { fireproof } from '@fireproof/core/node'

This ensures we get the server build, which uses the filesystem and Node.js crypto APIs, instead of the browser versions.

Notes

Original README below:

Built using hyperwave ๐ŸŒŠ

https://hyperwave.codes/

hyperwave is a server-side framework for building web applications.

  • fast: Bun and Hono for best-in-class performance
  • lightweight: ~20kb payload. Demo loads in a couple seconds even while throttled to 2G.
  • productive: use the best tools for the job: Tailwind, HTMX, and TypeScript
  • portable: compile a binary to deploy anywhere

Setup

bun install && bun dev

Visit port 3000 and edit server.tsx


Example

This is the endpoint serving our initial landing page:

app.get('/', ({ html }) =>
  html(
    <Layout title="hyperwave">
      <section class="flex flex-col gap-8">
        <div>
          <button
            class="bg-blue-100 p-4 text-sm font-bold rounded-md shadow-sm"
            hx-get="/instructions"
            hx-target="closest div"
          >
            fetch instructions from <code>/instructions</code>
          </button>
        </div>
      </section>
    </Layout>
  )
)
  • The API serves a full HTML document to the client, which includes Tailwind classes and HTMX attributes
  • The response is wrapped in a <Layout /> tag, a server-rendered functional component, which takes a title prop
  • The button, when clicked, will issue a GET request to /instructions and replace the content of its parent div with the response.

Deployment

Build an executable for your current architecture with bun run build

PORT environment variable is available if needed (default 3000)

Note: deploy public/ with the executable, it contains the generated UnoCSS build.


Components

  • Bun provides the bundler, runtime, test runner, and package manager.
  • SQLite is production-ready and built into Bun.
  • Hono is a robust web framework with great DX and performance
  • UnoCSS is Tailwind-compatible and generates only the styles used in application code.
  • HTMX gives 99% of the client-side interactivity most apps need.

hyperwave-hello's People

Contributors

jchris avatar

Stargazers

Andrejs Agejevs avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.