Controller-api-wrapper NPM

WARNING

This package is still in development and not well tested.

controller-api-wrapper

Generate api wrapper by existing controller

Testing example

Start back-end

cd example/koa
npm install
npm start

Start front-end

cd example/react/my-app
npm install
npm start

Open the dev tool in browser then click the button, you can also check the result in Network tab

Modifying example

If you update back-end code, then run npm run gen to generate new file.

npm run gen

You can now copy the generated file to you front-end project.

Full Stack Project?

You can import the api wrapper directly and replace the js file in release. (So your client cannot access your back-end code) You should include these step in the build script. Using this method do not require to generate file everytime you made change.

example

Project structure

koa/ # back-end
    api-wrapper/ # generate server-api.js for frontend
        generated/
            api-wrapper/
                server-api.d.ts
                server-api.js
            src/ # *.d.ts only
                ...
        generate-server-api.ts # generate the js file
        server-api.ts # tsc will compile it to server-api.d.ts
        tsconfig.json # tsc config for code generation
    src/ server side code
        controllers/
            ...
        models/
            ...
        routers/
            ...
        app.ts
    .babelrc
    package-lock.json
    package.json
    tsconfig.json 
    
react/ # front-end
    my-app/
        src/
            api-wrapper/ # generated file
            App.css
            App.test.tsx
            App.tsx # example calling api
            ...

Router structure

// koa/src/routers/user.ts
import userController from "../controllers/UserController";

const user = {
    path: '/user',
    route: {
        get: {
            path: '/:id',
            method: 'get',
            handler: userController.getUser
        },
        post: {
            path: '',
            method: 'post',
            handler: userController.postUser
        },
        put: {
            path: '/:id',
            method: 'put',
            handler: userController.putUser
        }
    }
};

export default user;

Binding example

/// koa/src/app.ts
import Koa from 'koa';
import Router from 'koa-router';
import bodyParser from 'koa-bodyparser';
import { flatten } from 'controller-api-wrapper';

import routers from './routers';

const app = new Koa();
const router = new Router();


let arr = flatten(routers);
arr.forEach(v => {
  console.log(`Adding to router, method: ${v.method},\t url: ${v.url},\t name: ${v.name}`)
  if (v.method === "get") {
    router.get(v.name, v.url, (ctx, next) => {
      const arg = { ...ctx.query, ...ctx.params };
      console.log(arg);
      let r = v.handler(arg);
      console.log('r: ', r);
      ctx.body = r;
    });
  } else {
    router.get(v.name, v.url, (ctx, next) => {
      const arg = { ...ctx.request.body, ...ctx.params };
      console.log(arg);
      v.handler(arg);
      let r = v.handler(arg);
      console.log('r: ', r);
      ctx.body = r;
    });
  }
})

app.use(bodyParser())
app.use(router.routes());

module.exports = app;

if (!module.parent) app.listen(3000);

Generate server-api (check api-wrapper/generated)