Getting started

Front-end developers are often afraid of the backend. They don’t know how to start, what to do, and how to do it. Agrume is a tool that makes developing API endpoints as easy as writing a function. Best of all, it’s type-safe!

Let’s see an example:

import { createRoute } from 'agrume'

const getDogImage = createRoute(
  async () => {
    // `database` is a fake database that should not be accessible from the client

    const dog = database.dogs.findFirst({
      select: ['imageBase64'],
      where: { isGoodBoy: true }
    })

    return dog.imageBase64
  }
)

export const Dog = function () {
  const [dogImage, setDogImage] = useState('')

  useEffect(() => {
    getDogImage().then(setDogImage)
  }, [])

  return <img src={dogImage} />
}

Motivation

As a student, I frequently have to build projects in teams and in a short amount of time. These projects require a backend, but many of my teammates prefer to work on the frontend because they are not comfortable with the backend. I wanted to create a tool that would make backend development as easy as frontend development, so that it would be easier to organise the work in teams.

I think that Agrume is great to build prototypes and small projects. However, I don’t know if it’s a good idea to use it in production. I would love to hear your feedback on this!

Installation

pnpm add agrume vite-plugin-agrume

Now, you can add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import { agrume } from 'vite-plugin-agrume'

export default defineConfig({
  plugins: [
    agrume()
    // ...
  ]
})