@farbenmeer/bunny

This is a web framework based on Tapi and React.

Start a project

To scaffold a new project run:

pnpx @farbenmeer/bunny@latest init my-cool-project

or if you prefer another package manager:

npx @farbenmeer/bunny@latest init my-cool-project
bunx @farbenmeer/bunny@latest init my-cool-project

or even explicitly specify the package manager:

npx @farbenmeer/bunny@latest init --use yarn my-cool-project

it will create a new directory called my-cool-project with a basic bunny setup.

CLI

The bunny CLI provides the following commands:

• bunny dev to start the development server
• bunny build to build the project for production
• bunny start to start the production server after building
• bunny build --standalone to build a standalone version with all dependencies bundled

Project Structure

The main entry points to the project are

• src/index.html for the client side application. Set up static tags for the favicon and the site title and optionally add some loading UI while the react bundle is being loaded.
• src/index.tsx as the react-entrypoint. This sets up the react application and renders it into the DOM. It imports the App component that contains the main frontend logic.
• src/main.css for global styles (mainly tailwindcss-setup)
• src/api.ts for the API entrypoint (using Tapi's defineApi). See Tapi's documentation for more information.

What is bunny?

Bunny is a minimalistic web framework. The idea is that the frontend is really just a classic react-SPA and the backend is basically just a REST API built on Node.js.

There are no directives, no server components or server actions, there is no custom compiler and no filesystem routing.

Instead, Bunny uses TApi to create a typed client for the API that is ergonomic to use with modern react. It relies on the Suspense and transition APIs for loading states and Error Boundaries for error handling.

How does it work?

Bunny bundles the frontend with Vite and you can directly extend the vite configuration with the vite option in bunny.config.ts:

import { defineConfig } from '@farbenmeer/bunny';

export default defineConfig({
  vite: {
    // Add your custom Vite configuration here
  }
});

For the backend, you define your API routes with TApi. Bunny uses connect to chain middleware for the node server. Your backend code is bundled with esbuild and bunny implements basic hot reloading for the server-side code.

That is all there is to it. It really does nothing more.

Packages

If you need additional functionality, the boilerplate (as generated by bunny init) includes a directory 'instructions' that has markdown documents with instructions on how to add various common packages. You can also find them on GitHub.

Why the name?

Originally, bunny was intended to be built on bun. Bun makes it easy to run typescript code, it provides a convenient server that has routing and hot reloading built in and it automatically builds server-side and client-side code. That seemed like a great starting point for building a framework on top.

While bun has a lot (probably a few too many) of cool features, it also has some rough edges that turned out to be deal-breakers along the way so I decided to go back to node and deal with its slightly dated APIs in exchange for stability instead.

Development

If you feel like contributing to the project, you can find the source code on GitHub.

Feel free to open issues, submit pull requests or open a discussion.

License

This project is licensed under the MIT License.