Giter VIP home page Giter VIP logo

Remult

Full-stack CRUD, simplified, with SSOT TypeScript entities

CircleCI GitHub license npm version npm downloads Join Discord



What is Remult?

Remult uses TypeScript entities as a single source of truth for: ✅ CRUD + Realtime API, ✅ frontend type-safe API client, and ✅ backend ORM.

  • Zero-boilerplate CRUD + Realtime API with paging, sorting, and filtering
  • 👌 Fullstack type-safety for API queries, mutations and RPC, without code generation
  • ✨ Input validation, defined once, runs both on the backend and on the frontend for best UX
  • 🔒 Fine-grained code-based API authorization
  • 😌 Incrementally adoptable

Remult supports all major databases, including: PostgreSQL, MySQL, SQLite, MongoDB, MSSQL and Oracle.

Remult is frontend and backend framework agnostic and comes with adapters for Express, Fastify, Next.js, Nuxt, SvelteKit, SolidStart, Nest, Koa, Hapi and Hono.

Remult promotes a consistent query syntax for both frontend and Backend code:

// Frontend - GET: /api/products?_limit=10&unitPrice.gt=5,_sort=name
// Backend  - 'select name, unitPrice from products where unitPrice > 5 order by name limit 10'
await repo(Product).find({
  limit: 10,
  orderBy: {
    name: 'asc',
  },
  where: {
    unitPrice: { $gt: 5 },
  },
})

// Frontend - PUT: '/api/products/product7' (body: { "unitPrice" : 7 })
// Backend  - 'update products set unitPrice = 7 where id = product7'
await repo(Product).update('product7', { unitPrice: 7 })

Usage

Define schema in code

// shared/product.ts

import { Entity, Fields } from 'remult'

@Entity('products', {
  allowApiCrud: true,
})
export class Product {
  @Fields.cuid()
  id = ''

  @Fields.string()
  name = ''

  @Fields.number()
  unitPrice = 0
}

Add backend API with a single line of code

Example:

// backend/index.ts

import express from 'express'
import { remultExpress } from 'remult/remult-express' // adapters for: Fastify,Next.js, Nuxt, SvelteKit, SolidStart, Nest, more...
import { createPostgresDataProvider } from 'remult/postgres' // supported: PostgreSQL, MySQL, SQLite, MongoDB, MSSQL and Oracle
import { Product } from '../shared/product'

const app = express()

app.use(
  remultExpress({
    entities: [Product],
    dataProvider: createPostgresDataProvider({
      connectionString: 'postgres://user:password@host:5432/database"',
    }),
  }),
)

app.listen()

Remult adds route handlers for a fully functional REST API and realtime live-query endpoints, optionally including an Open API spec and a GraphQL endpoint

Fetch data with type-safe frontend code

const [products, setProducts] = useState<Product[]>([])

useEffect(() => {
  repo(Product)
    .find({
      limit: 10,
      orderBy: {
        name: 'asc',
      },
      where: {
        unitPrice: { $gt: 5 },
      },
    })
    .then(setProducts)
}, [])

📣 Realtime Live Queries

useEffect(() => {
  return repo(Product)
    .liveQuery({
      limit: 10,
      orderBy: {
        name: 'asc',
      },
      where: {
        unitPrice: { $gt: 5 },
      },
    })
    .subscribe((info) => {
      setProducts(info.applyChanges)
    })
}, [])

☑️ Data validation and constraints - defined once

import { Entity, Fields, Validators } from 'remult'

@Entity('products', {
  allowApiCrud: true,
})
export class Product {
  @Fields.cuid()
  id = ''

  @Fields.string({
    validate: Validators.required,
  })
  name = ''

  @Fields.number<Product>({
    validate: (product) => product.unitPrice > 0 || 'must be greater than 0',
  })
  unitPrice = 0
}

Enforced in frontend:

try {
  await repo(Product).insert({ name: '', unitPrice: -1 })
} catch (e: any) {
  console.error(e)
  /* Detailed error object ->
{
  "modelState": {
    "name": "Should not be empty",
    "unitPrice": "must be greater than 0"
  },
  "message": "Name: Should not be empty"
}
*/
}

Enforced in backend:

// POST '/api/products' BODY: { "name":"", "unitPrice":-1 }
// Response: status 400, body:
{
  "modelState": {
    "name": "Should not be empty",
    "unitPrice": "must be greater than 0"
  },
  "message": "Name: Should not be empty"
}

🔒 Secure the API with fine-grained authorization

@Entity<Article>('Articles', {
  allowApiRead: true,
  allowApiInsert: Allow.authenticated,
  allowApiUpdate: (article) => article.author == remult.user.id,
  apiPrefilter: () => {
    if (remult.isAllowed('admin')) return {}
    return {
      author: remult.user.id,
    }
  },
})
export class Article {
  @Fields.string({ allowApiUpdate: false })
  slug = ''

  @Fields.string({ allowApiUpdate: false })
  authorId = remult.user!.id

  @Fields.string()
  content = ''
}

🚀 Relations

await repo(Categories).find({
  orderBy: {
    name: 'asc ',
  },
  include: {
    products: {
      where: {
        unitPrice: { $gt: 5 },
      },
    },
  },
})

// Entity Definitions
export class Product {
  //...
  @Relations.toOne(Category)
  category?: Category
}
export class Category {
  //...
  @Relations.toMany<Category, Product>(() => Product, `category`)
  products?: Product[]
}

Automatic admin UI

Automatic admin UI

What about complex CRUD?

While simple CRUD shouldn’t require any backend coding, using Remult means having the ability to handle any complex scenario by controlling the backend in numerous ways:

  • Backend computed (read-only) fields - from simple expressions to complex data lookups or even direct db access (SQL)
  • Custom side-effects with entity lifecycle hooks (before/after saving/deleting)
  • Backend only updatable fields (e.g. “last updated at”)
  • Relations
  • Roll-your-own type-safe endpoints with Backend Methods
  • Roll-your-own low-level endpoints (Express, Fastify, koa, others…)

Installation

The remult package is one and the same for both the frontend bundle and the backend. Install it once for a monolith project or per-repo in a monorepo.

npm i remult

Tutorials

The best way to learn Remult is by following a tutorial of a simple Todo web app with a Node.js Express backend.

Demo

Video thumbnail

Watch code demo on YouTube here (14 mins)

Documentation

The documentation covers the main features of Remult. However, it is still a work-in-progress.

Example Apps

Status

Remult is production-ready and, in fact, used in production apps since 2018. However, we’re keeping the major version at zero so we can use community feedback to finalize the v1 API.

Motivation

Full-stack web development is (still) too complicated. Simple CRUD, a common requirement of any business application, should be simple to build, maintain, and extend when the need arises.

Remult abstracts away repetitive, boilerplate, error-prone, and poorly designed code on the one hand, and enables total flexibility and control on the other. Remult helps building fullstack apps using only TypeScript code you can easily follow and safely refactor, and fits nicely into any existing or new project by being minimalistic and completely unopinionated regarding the developer’s choice of other frameworks and tools.

Other frameworks tend to fall into either too much abstraction (no-code, low-code, BaaS) or partial abstraction (MVC frameworks, GraphQL, ORMs, API generators, code generators), and tend to be opinionated regarding the development tool-chain, deployment environment, configuration/conventions or DSL. Remult attempts to strike a better balance.

Contributing

Contributions are welcome. See CONTRIBUTING.md.

  • 💬 Any feedback or suggestions? Start a discussion.
  • 💪 Want to help out? Look for "help wanted" labeled issues.
  • ⭐ Give this repo a star.

License

Remult is MIT Licensed.

Remult's Projects

remult icon remult

Full-stack CRUD, simplified, with SSOT TypeScript entities

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.