Adding Swagger and openApi

In short, swagger provides a quick UI that describes the api which is exposed by the application.

To add swagger to a remult application follow these steps:

1. Install the swagger-ui-express package:

   npm i swagger-ui-express
   npm i --save-dev @types/swagger-ui-express

2. In the /src/server/index.ts file add the following code:

   import express from 'express';
   import swaggerUi from 'swagger-ui-express';
   import { remultExpress } from 'remult/remult-express';
   
   const app = express();
   let api = remultExpress();
   
   app.use(api);
   const openApiDocument = api.openApiDoc({ title: "remult-react-todo" });
   app.get("/api/openApi.json", (req, res) => {res.json(openApiDocument)});
   app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(openApiDocument));
   
   app.listen(3002, () => console.log("Server started"));

Adding Swagger UI to a NextJs App

To add swagger UI to a NextJs application follow these steps:

1. Install the following packages:

   # With npm
   npm i swagger-ui-react
   npm i -D @types/swagger-ui-react
   
   # With yarn
   yarn add swagger-ui-react
   yarn add -D @types/swagger-ui-react

2. Get the openApi document from RemultNextAppServer:

   // src/api.ts
   import { Task } from '@/shared/Task'
   import { TasksController } from '@/shared/TasksController'
   import { remultNextApp } from 'remult/remult-next'
   
   export const api = remultNextApp({
     admin: true,
     entities: [Task],
     controllers: [TasksController],
   })
   
   // Export this here 👇
   export const openApiDoc = api.openApiDoc({
     title: 'Todo App',
   })
   
   export const { POST, PUT, DELETE, GET } = api

3. Create a new page to render Swagger UI:

   // src/app/api-doc/page.tsx
   import { openApiDoc } from '@/api' // 👈 Import the openApiDoc you exported earlier
   import ReactSwagger from './react-swagger'
   
   export default async function IndexPage() {
     return (
       <section className="container">
         <ReactSwagger spec={openApiDoc} />
       </section>
     )
   }

   // src/app/api-doc/react-swagger.tsx
   'use client'
   
   import SwaggerUI from 'swagger-ui-react'
   import 'swagger-ui-react/swagger-ui.css'
   
   type Props = {
     spec: Record<string, any>
   }
   
   function ReactSwagger({ spec }: Props) {
     return <SwaggerUI spec={spec} />
   }
   
   export default ReactSwagger

4. Navigate to http://localhost:3000/api-doc to see the Swagger UI.

   

Adding open api specific field options

Checkout the following example project that demos how to add openApi specific options to field options stackblitzgithub