# Add Remult to your App
Use this page to add Remult to an existing full-stack app.
To scaffold a new project, we suggest using one of the tutorials.
# 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.
# 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 { remultExpress } from 'remult/remult-express';
const app = express();
app.use(remultExpress({ entities: [/* entity types */] }));
app.listen(3000);
# Fastify
import fastify from 'fastify';
import { remultFastify } from 'remult/remult-fastify';
(async () => {
const server = fastify();
await server.register(remultFastify({ entities: [/* entity types */] }));
server.listen({ port: 3000 });
})();
# Next.js
// src/pages/api/[...remult].ts
import { NextApiRequest, NextApiResponse } from 'next';
import { createRemultServer } from 'remult/server';
export const api = createRemultServer({ entities: [/* entity types */] });
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
await api.handle(req, res);
};
export default handler;
# Nest
// src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { remultExpress } from 'remult/remult-express';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.use(remultExpress({ 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 (opens new window) is outside the scope of Remult.