How to to server index.html from public folder if 404 occurs.

[rajkaran]

Hi I am trying to serve Angular with Loopback 4. previously I was using solution suggested here which doesn't apply anymore as the legacy Sequence is has been deprecated.

How can I achieve same with Middleware. I am using below code which isn't working for me. Which is taken from official documentation https://loopback.io/doc/en/lb4/Migrate-from-legacy-sequence.html

export class ErrorHandlerMiddlewareProvider implements Provider<Middleware> {
  constructor(
    @inject(RestBindings.SequenceActions.LOG_ERROR)
    protected logError: LogError,
  ) { }

  async value() {
    const middleware: Middleware = async (
      ctx: MiddlewareContext,
      next: Next,
    ) => {
      try {
        return await next();
      } catch (err) {
        // Any error handling goes here

        if (err.statusCode == 404) {
          console.log([err.statusCode, err.statusCode === 404], err)
          ctx.response.sendFile('public/index.html', {root: './'})
          return;
        } else {
          return this.handleError(ctx, err);
        }


      }
    };
    return middleware;
  }

  handleError(context: MiddlewareContext, err: HttpErrors.HttpError): Response {
    // We simply log the error although more complex scenarios can be performed
    // such as customizing errors for a specific endpoint
    this.logError(err, err.statusCode, context.request);
    throw err;
  }
}

[mrmodise]

@rajkaran have you migrated to middleware-based sequence? if yes, below is how you would migrate your code to use the updated middleware-based sequence:

Step 1: Upgrade sequence.ts
Replace the contents of your sequence file with the contents on this link: https://github.com/loopbackio/loopback4-example-shopping/blob/master/packages/shopping/src/sequence.ts

Step 2: Mount your sequence.ts
Bind the sequence to the application: https://github.com/loopbackio/loopback4-example-shopping/blob/f21ecc85e12674d9c2531058b87c331a910b3b6f/packages/shopping/src/application.ts#L72

Step 3: Create your middle-ware
Create your middleware with error handling: https://github.com/loopbackio/loopback4-example-shopping/blob/master/packages/shopping/src/middlewares/error-handler.middleware.ts#L41

Step 4: Mount your middle-ware
Bind your middleware to the application: https://github.com/loopbackio/loopback4-example-shopping/blob/f21ecc85e12674d9c2531058b87c331a910b3b6f/packages/shopping/src/application.ts#L107

Step 5: Include your 404 error handing
You can now make changes to the middleware in highlighted lines: https://github.com/loopbackio/loopback4-example-shopping/blob/f21ecc85e12674d9c2531058b87c331a910b3b6f/packages/shopping/src/middlewares/error-handler.middleware.ts#L43

[rajkaran]

@mrmodise Thanks you for a quick reply.
I have done all of this. If you look at the code I have shared in my question it is almost exactly the same as on Loopback documentation.

No matter where I put below code I will continue to see error in terminal and browser won't be redirected to static page in public directory i.e. index.html

if (err.statusCode == 404) {
    console.log([err.statusCode, err.statusCode === 404], err)
    ctx.response.sendFile('public/index.html', {root: './'})
    return;
}

I will get typescript error on Response if I put above code in handleError(context: MiddlewareContext, err: HttpErrors.HttpError): Response function.

[mrmodise]

Thanks for confirming the above. I believe your current challenge is now to mount Express into your LoopBack app to serve static content, as per the initially referenced link?

[rajkaran]

I have mounted express in Loopback but it doesn't forward to static by default. Where I can configure it to do so.

[rajkaran]

Finally I figured it out with small adjustment to my original code. I pasting my solution here for someone having same issue in future.

async value() {
    const middleware: Middleware = async (ctx: MiddlewareContext, next: Next) => {
      try {
        return await next();
      } catch (error) {
        if (error.statusCode === 404) {
          ctx.response.sendFile('public/index.html', {root: './'})
        } else {
          throw error;
        }

        return;
      }
    };
    return middleware;
  }