Api Explorer not working after setting up loopback as a route via express

[zkrami]

Description / Steps to reproduce / Feature proposal

I followed the instruction to create Express application with loopback as follows as in this tutorial
Creating an Express Application with LoopBack
If I opened the explorer under /api/explorer , the page is rendering just fine , but no request would work.
The reason behind this is the routes in openapi.json are missing /api
E.g:
the route in openapi.json is Get /books but it should be /api/books
how can I setup openapi to prefix every route with /api ?
Thank you.

[dougal83]

I think the tutorial might be incomplete. The server variable is key, Get /books, will be correct as I understand it. Can you confirm that openapi.json server variable is not as follows:

"servers": [
    {
      "url": "http://127.0.0.1:3000/api"
    }
  ]

I've a working example /w angular based on pull requests currently undergoing review. Might have some code you can compare to your own.

[dhmlau]

Might be addressed in @nabdelgadir's PR: #2552.
@nabdelgadir , could you please take a look? Thanks.

[nabdelgadir]

I went through the tutorial again (based on some minor updates made in #2552, but they shouldn't affect this issue) and made a successful POST request to create a note. The url the request goes to is http://localhost:3000/api/notes:

As the LoopBack application is mounted on top of the Express server using /api, the LoopBack application's endpoints are independent of /api as it's part of the Express server, which is why they don't include it in openapi.json. However, when you make a request to the application, it goes through the server url + the endpoint, e.g. http://localhost:3000/api and /notes.

Can you confirm what the server url is in openapi.json and whether you included this line in your application: this.app.use('/api', this.lbApp.requestHandler);?

[zkrami]

the this.app.use('/api', this.lbApp.requestHandler) line in on my server constructor.
however the servers in openapi.json has http://127.0.0.1:3000 as a value.
I know I have to change it ,but I have not figured out how .
would you guide me please.

[dougal83]

If you've configured the code correctly the servers variable will be correct. Post your code or look at a working example and compare to yours. I've posted a working example above if you look at the server folder, you'll see that it is an lb4 app with the express set up correctly. Up to you.

[zkrami]

I have compared it no difference found ,here is a snippet of my code.

server.ts

export class ExpressServer {
  private app: express.Application;
  public readonly lbApp: AlrafikBackendApplication;
  private server: http.Server;

  constructor(options: ApplicationConfig = {}) {
    this.app = express();


    this.lbApp = new AlrafikBackendApplication(options);


    // Custom Express routes
    this.app.get('/', function (_req: Request, res: Response) {
      res.sendFile(path.resolve('public/index.html'));
    });
  

    // Serve static files in the public folder
    this.app.use(express.static('public'));



    // @temp
    this.app.get("/openapi.json", (req, res) => {
      res.redirect("/api/openapi.json");
    });
 
    this.app.use('/api', this.lbApp.requestHandler);



    // body parser
    this.app.use(bodyParser.json());

    // auth
    this.app.use((req, res, next) => {
      req.user = { id: 'userId' };
      next();
    });



    // error handeler
    this.app.use((err: any, req: Request, res: Response, next: any) => {
      res.status(err.status || 500).json({
        error: {
          message: err.message || 'Internal Server Error'
        }
      });
    });



  }

  public async boot() {
    await this.lbApp.boot();
  }

  public async start() {
    this.server = this.app.listen(3000);
    await pEvent(this.server, 'listening');
  }

  // For testing purposes
  public async stop() {
    if (!this.server) return;
    this.server.close();
    await pEvent(this.server, 'close');
  }
}

application.ts

export class AlrafikBackendApplication extends BootMixin(
  ServiceMixin(RepositoryMixin(RestApplication)),
) {
  constructor(options: ApplicationConfig = {}) {
    super(options);

    // Set up the custom sequence
    this.sequence(MySequence);


    this.static('/', path.join(__dirname, '../public'));






    // Customize @loopback/rest-explorer configuration here
    this.bind(RestExplorerBindings.CONFIG).to({
      path: '/explorer',

    });

    this.component(RestExplorerComponent);

    this.projectRoot = __dirname;
    // Customize @loopback/boot Booter Conventions here
    this.bootOptions = {
      controllers: {
        // Customize ControllerBooter Conventions here
        dirs: ['controllers'],
        extensions: ['.controller.js'],
        nested: true,
      },
    };

  }
}

[dougal83]

Well, you can try commenting out all the additions you've made that are different to a working example and debug from there.

[nabdelgadir]

I used your modified server.ts and application.ts files and the api requests (e.g. GET /notes) are working. I believe the modification made in these two commits should resolve your problem. I'm going to close this issue, but feel free to reopen it if it's still not working.