Skip to content

Koa ​

Install Required Packages ​

To set up your Koa server with Remult, run the following commands to install the necessary packages:

sh
npm install koa koa-bodyparser remult
npm install --save-dev @types/koa @types/koa-bodyparser tsx

Bootstrap Remult in the Backend ​

Remult is integrated into your backend as middleware for Koa.

  1. Create the API File

    Create a new api.ts file in the src/server/ folder with the following code to set up the Remult middleware:

    ts
    // src/server/api.ts
    
    import { createRemultServer } from 'remult/server'
    
    export const api = createRemultServer()
  2. Register the Middleware

    Update the index.ts file in your src/server/ folder to include the Remult middleware. Add the following lines:

    ts
    // src/server/index.ts
    
    import * as koa from 'koa'
    import * as bodyParser from 'koa-bodyparser'
    import { api } from './api.js'
    
    const app = new koa()
    
    app.use(bodyParser()) // Enables JSON body parsing for API requests
    
    app.use(async (ctx, next) => {
      const r = await api.handle(ctx.request) // Handle API requests with Remult
      if (r) {
        ctx.response.body = r.data
        ctx.response.status = r.statusCode
      } else {
        await next() // If not handled by Remult, pass on to the next middleware
      }
    })
    
    app.listen(3002, () => {
      console.log('Server started on port 3002')
    })

    ESM Configuration

    In this tutorial, we are using ECMAScript modules (esm) for the Node.js server. When importing files, you must include the .js suffix (as shown in the import { api } from "./api.js" statement).

    Additionally, make sure to set "type": "module" in your package.json file.

Create the Server's TypeScript Configuration ​

In the root folder, create a TypeScript configuration file named tsconfig.server.json to manage the server's settings:

json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "module": "nodenext"
  },
  "include": ["src/server/**/*", "src/shared/**/*"]
}

This configuration enables TypeScript decorators, ensures compatibility with ECMAScript modules, and specifies the file paths for the server and shared code.

Create an npm Script to Start the API Server ​

To simplify the development process, add a new script in your package.json file to start the Koa server in development mode:

json
// package.json

"dev-node": "tsx watch --env-file=.env --tsconfig tsconfig.server.json src/server"
  • tsx: A TypeScript Node.js execution environment that watches for file changes and automatically restarts the server on each save.
  • --env-file=.env: Ensures environment variables are loaded from the .env file.
  • --tsconfig tsconfig.server.json: Specifies the TypeScript configuration file for the server.

Start the Koa Server ​

Finally, open a new terminal and run the following command to start the development server:

sh
npm run dev-node

The server will now run on port 3002. tsx will watch for any file changes, automatically restarting the server whenever updates are made.

MIT Licensed | Made by the Remult team with ❤️