Scaffolded LB4 app reports 404 for the home page

[raymondfeng]

Description / Steps to reproduce / Feature proposal

lb4 my-app
cd my-app
npm start

It displays:

Server is running at http://[::1]:3000
Try http://[::1]:3000/ping

Current Behavior

Open your browser and point to http://[::1]:3000, you'll see 404 Error.

Expected Behavior

We should have a default home page to promote LoopBack and guide the developer to use the API explorer and other resources.

Adding this feature will help loopback4-example-shopping too before we create a UI.

See Reporting Issues for more tips on writing good issues

[raymondfeng]

Possible quick fixes for the generated app:

1. Add public/index.html (Either simple page or redirect to /explorer). This also allows our users to add static assets into public by convention.

2. Call app.static('/', path.join(__dirname, '../../public'); ==> At this moment / is not allowed.

[virkt25]

Possible quick fixes

Since we don't allow static file mounting to / path intentionally, maybe the above won't be a quick fix. How about if we using a controller, return some html or text saying Welcome to your application. Try your API's by visiting (link to explorer)?

Alternatively if we had some way of checking to see if a controller has been defined or not for / ... and if not then we should just redirect the user to the explorer?

[bajtos]

How about if we using a controller, return some html or text saying Welcome to your application. Try your API's by visiting (link to explorer)?

I like this approach. Similarly to how we add a PingController to a newly created app, we can also add e.g. HomePageController that will serve the root endpoint /.

I am proposing to serve a simple self-contained HTML page that includes all necessary CSS styles, etc., so that we don't need any other static middleware to have it correctly rendered in the browser. The page should contain the application name and description (from package.json), a link to OpenAPI JSON specification (e.g. /openapi.json) and a link to API explorer.

[dhmlau]

I am proposing to serve a simple self-contained HTML page that includes all necessary CSS styles, etc., so that we don't need any other static middleware to have it correctly rendered in the browser. The page should contain the application name and description (from package.json), a link to OpenAPI JSON specification (e.g. /openapi.json) and a link to API explorer. +1. I was actually thinking just redirecting to the API explorer when Raymond first opened this issue. But I guess it's better with more info as the app's default landing page?

[raymondfeng]

See https://github.com/strongloop/loopback4-example-shopping/pull/16.

While I'm fine to have a controller to render the home page, I think it will be better that leave the html template (maybe EJS view) in public/ for ease of customization.

We still have to figure out how to make static serving simpler.

[bajtos]

While I'm fine to have a controller to render the home page, I think it will be better that leave the html template (maybe EJS view) in public/ for ease of customization.

Makes sense 👍