Add Remult to your App

New Project?

We suggest using one of the tutorials to have a fresh good start.

Add to your existing project?

You are at the right place, Remult is designed to be added to existing projects.

Embark on the Remult journey at your own pace and start reaping the benefits from day one. Gradual adoption is the preferred route for many, allowing for a smooth integration into your workflow.

Installation

The remult package is one and the same for both the frontend bundle and the backend server.

If you're using one package.json for both frontend and backend (or a meta-framework such as Next.js) - install Remult once in the project's root folder.

If you're using multiple package.json files (monorepo) - install Remult in both server and client folders.

npm install remult

Server-side Initialization

Remult is initialized on the server-side as a request handling middleware, with a single line of code.

Here is the code for setting up the Remult middleware:

Express

import express from 'express'
import { remultApi } from 'remult/remult-express'

const app = express()

app.use(
  remultApi({
    entities: [
      /* entity types */
    ],
  }),
)

app.listen(3000)

Fastify

import fastify from 'fastify'
import { remultApi } from 'remult/remult-fastify'
;(async () => {
  const server = fastify()

  await server.register(
    remultApi({
      entities: [
        /* entity types */
      ],
    }),
  )

  server.listen({ port: 3000 })
})()

Next.js Pages Router

// src/pages/api/[...remult].ts

import { remultNext } from 'remult/remult-next'

export default remultNext({
  entities: [
    /* entity types */
  ],
})

Next.js App Router

// src/api.ts

import { remultApi } from 'remult/remult-next'

export const api = remultApi({
  entities: [
    /* entity types */
  ],
})

// src/app/api/[...remult]/route.ts

import { api } from '../../../api'

export const { POST, PUT, DELETE, GET } = api

Sveltekit

// src/hooks.server.ts

import { remultApi } from 'remult/remult-sveltekit'

export const handle = remultApi({
  entities: [
    /* entity types */
  ],
})

Hapi

import { type Plugin, server } from '@hapi/hapi'
import { remultApi } from 'remult/remult-hapi'
;(async () => {
  const hapi = server({ port: 3000 })

  await hapi.register(
    remultApi({
      entities: [
        /* entity types */
      ],
    }),
  )

  hapi.start()
})()

Nest

// src/main.ts

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'
import { remultApi } from 'remult/remult-express'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)

  app.use(
    remultApi({
      entities: [
        /* entity types */
      ],
    }),
  )

  await app.listen(3000)
}
bootstrap()

Koa

import * as koa from 'koa'
import * as bodyParser from 'koa-bodyparser'
import { createRemultServer } from 'remult/server'

const app = new koa()

app.use(bodyParser())

const api = createRemultServer({
  entities: [
    /* entity types */
  ],
})

app.use(async (ctx, next) => {
  const r = await api.handle(ctx.request)
  if (r) {
    ctx.response.body = r.data
    ctx.response.status = r.statusCode
  } else return await next()
})

app.listen(3000, () => {})

Client-side Initialization

On the client side, remult can use any standard javascript HTTP-client to call the data API.

By default, remult uses the browser's fetch API, and makes data API calls using the base URL /api (same-origin).

Here is the code for setting up a Remult client instance:

Using Fetch

import { remult } from 'remult'

Using Axios

import axios from 'axios'
import { remult } from 'remult'

remult.apiClient.httpClient = axios

Using Angular HttpClient

//...
import { HttpClientModule, HttpClient } from '@angular/common/http'
import { remult } from 'remult'

@NgModule({
  //...
  imports: [
    //...
    HttpClientModule,
  ],
})
export class AppModule {
  constructor(http: HttpClient) {
    remult.apiClient.httpClient = http
  }
}

Changing the default API base URL

By default, remult makes data API calls to routes based at the /api route of the origin of the client-side app. (e.g. https://localhost:3000/api)

To use a different base URL for API calls (e.g. https://localhost:3002/api), set the remult object's apiClient.url property.

remult.apiClient.url = 'http://localhost:3002/api'

CORS

Handling CORS is outside the scope of Remult.

Database Initialization

Got a database ready? Fantastic! Unleash the full potential of your existing setup by generating your entities directly from the database itself.

Check out remult-cli and see how it can one shot generate your entities in no time.