How to route api and website files?

[Bahlinc-Dev]

In LB3 you could mount a website and the backing api like this:

http://1.2.3.4/ <- WEBSITE
http://1.2.3.4/api <- REST API

This is achieved with a simple LB3 config:

// middleware.json
  "routes": {
    "loopback#rest": {                 <- API route served at /api
      "paths": [
        "/api"
      ]
    }
  },
  "files": {
    "loopback#static": {            
      "params": "$!./websiteFilePath"       <- Website files served at /
    }
  }

I seem to be missing some simple solution?

In LB4 I've tried to:

1. specify a root bsaePath: '/api' in application config - unfortunately the result applies to ALL routes including any this.static('/',webfiles) routes - so website would be served at /api - Doesn't work
2. add an @api({basePath: '/api' }) decarator to EVERY controller - seems verbose, error prone, and muddies the display in /explorer by prefixing every route with /api/... - works, but is messy (with some other side effects detailed below)

This api decorator causes a secondary problem, where a SPA frontend app (Angular, React, etc) needs to handle routing not related to the /api paths, on the client side. To make this work is a bit hacky IMO. In the application sequence I have to bypass authentication except for api routes, and then return control to the frontend app on 404 errors, like this:

//sequence.ts
  try {
     const finished = await this.invokeMiddleware(context);
     if (finished) return;
     const route = this.findRoute(request);
     const args = await this.parseParams(request, route);
     request.body = args[args.length - 1];
     console.log(route.path);

     // do auth only on api routes
     if ((route.path.indexOf('/api/') > -1)) { //                 <- hacky
       // ... auth stuff here
     }
     const result = await this.invoke(route, args);
     this.send(response, result);
   } catch (err) {

     // forward 404 routes to frontend app for routing there      <- hacky
     if (err.name == 'NotFoundError') { //             
       response.status(STATUS_CODE.OK).contentType('html').send(index_html_file);
     } else {
       this.reject(context, err);
     }
   }

The documentation appears to suggest creating separate servers/applications for each base route, and then running them on different ports and with their own configs and individual sequences. That just seems wrong.

The example applications side step the issue by just not using the same path names to avoid collision between frontend and backend of the same name. For instance, in the shopping example, the frontend api path is defined as const apiUrl = window.location.origin whcih would be '/'. So /products (the frontend page) would collide with /products the Loopback Controller. The author's solution was to rename the frontend path to 'product-management'. When solution should be to mount the api on separate path to avoid such collisions and destination ambiguity.

What is the recommended way to achieve this common scenario?

[Bahlinc-Dev]

So I guess the solution is to make your whole Loopback application simply a route of a parent express app like this:

    this.app = express();
    this.httpServer = createServer(this.app);

    this.lbApp = new Lb4Application(options);
    this.app.use('/api', this.lbApp.requestHandler);  //   <-- loopback assigned to /api route

    // frontend files now at root!
    this.app.use('/', express.static(path.join(__dirname, '../path/to/frontend/files'))) 

To do this, make sure you prevent your loopback application from starting and listening to it's own http server by adding listenOnStart: false to the options in index.ts.

The steps are detailed here.
https://loopback.io/doc/en/lb4/express-with-lb4-rest-tutorial.html

This solves a couple other issues too:

1. Ability to add middleware for all routes (like compression)
2. Integrate websockets/SocketIO cleanly on same port as express/loopback server