SSOT TypeScriptエンティティを備えたフルスタックのCRUD
Remultは、TypeScriptエンティティを単一の真実のソースとして使用します。Crud + RealTime API、✅FrontEnd Type-Safe APIクライアント、およびバックエンドORM。
Remultは、PostgreSQL、MySQL、SQLite、MongoDB、MSSQL、Oracleなど、すべての主要なデータベースをサポートしています。
Remultはフロントエンドとバックエンドのフレームワーク不可欠なものであり、Express、Fastify、Next.js、Nuxt、Sveltekit、Solidstart、Nest、Koa、Hapi、Hono用のアダプターが付属しています。
remultを直接体験したいですか?インタラクティブなオンラインチュートリアルをお試しください。
Remultは、フロントエンドコードとバックエンドコードの両方の一貫したクエリ構文を促進します。
// 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 } ) // 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
}デコレーターが好きではありませんか?デコレータなしで作業することを完全にサポートしています
例:
// 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は、完全に機能するREST APIおよびリアルタイムのライブクリーエンドポイントのルートハンドラーを追加します。
const [ products , setProducts ] = useState < Product [ ] > ( [ ] )
useEffect ( ( ) => {
repo ( Product )
. find ( {
limit : 10 ,
orderBy : {
name : 'asc' ,
} ,
where : {
unitPrice : { $gt : 5 } ,
} ,
} )
. then ( setProducts )
} , [ ] ) useEffect ( ( ) => {
return repo ( Product )
. liveQuery ( {
limit : 10 ,
orderBy : {
name : 'asc' ,
} ,
where : {
unitPrice : { $gt : 5 } ,
} ,
} )
. subscribe ( ( info ) => {
setProducts ( info . applyChanges )
} )
} , [ ] ) 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
} 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"
}
*/
} // 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"
}@ 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 = ''
} 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 [ ]
}
単純なCRUDはバックエンドコーディングを必要としないはずですが、Remultは、さまざまな方法でバックエンドを制御することにより、複雑なシナリオを処理する機能を持つことを意味します。
Remultパッケージは、フロントエンドバンドルとバックエンドの両方で同じです。モノリスプロジェクトまたはREPOごとにモノレポに1回インストールします。
npm i remultRemultを学ぶ最良の方法は、node.js Expressバックエンドを備えたシンプルなTODO Webアプリのチュートリアルに従うことです。

YouTubeでコードデモをご覧ください(14分)
このドキュメントは、Remultの主な機能をカバーしています。しかし、それはまだ進行中の作業です。
FullStack TODOMVCの例は、ReactとExpressの例です。 (ソースコード| codeSandbox)
React + MUIフロントエンドおよびPostgresデータベースを使用したCRMデモ。
Remultは制作に対応しており、実際には2018年以降、制作アプリで使用されています。ただし、メジャーバージョンをゼロに保ち、コミュニティフィードバックを使用してV1 APIを完成させることができます。
フルスタックのWeb開発は(まだ)複雑すぎます。あらゆるビジネスアプリケーションの一般的な要件であるSimple Crudは、必要性が生じたときに構築、維持、拡張が簡単でなければなりません。
Remultは、一方で繰り返し、ボイラープレート、エラーが発生し、設計されていないコードを抽象化し、他方で完全な柔軟性と制御を可能にします。 Remultは、簡単にフォローして安全にリファクタリングできるTypeScriptコードのみを使用してフルスタックアプリを構築するのに役立ち、開発者が他のフレームワークやツールを選択することに関してミニマルで完全に選択されていないことにより、既存または新しいプロジェクトにうまく適合します。
他のフレームワークは、あまりにも多くの抽象化(ノーコード、低コード、BAAS)または部分的な抽象化(MVCフレームワーク、GraphQL、ORM、APIジェネレーター、コードジェネレーター)に分類され、開発ツールチェーン、展開環境、構成/コンベンションまたはDSLに関して意見を述べる傾向があります。 Remultはより良いバランスをとろうとします。
貢献は大歓迎です。 Convributing.mdを参照してください。
RemultはMITライセンスです。