Redirecting to http://loopback.io/doc/en/lb2/Add-a-static-web-page.html ...
Get the app (in the state following the last article) from GitHub and install all its dependencies:
Introduction to middleware
Before continuing, you need to understand a basic concept that LoopBack inherits from Express: middleware.
req) representing the HTTP request, the response object (
res) representing the HTTP response, and the next middleware in line in the request-response cycle of an Express application, commonly denoted by a variable named
next. Middleware can:
- Execute any code.
- Make changes to the request and the response objects.
- End the request-response cycle.
- Call the next middleware in the stack.
LoopBack middleware is exactly like Express middleware, except that LoopBack adds the concept of phases, that enables you to easily set the order in which middleware is called. This avoids one of the tricky aspects of Express: making sure middleware gets executed when it should be.
When you create an application with the Application generator,
slc loopback, it creates a
server/middleware.json file that specifies what middleware is executed in which phase. Registering new middleware is as simple as editing this JSON file. Expand this code to see what it looks like:
Each of the top-level keys in
middleware.json defines a middleware phase:
auth, and so on, ending with
final. There are also modifiers to register middleware
after a given phase. There's a bit more to it, but that covers the basics. See Defining middleware for all the details.
Change or modify the default root route handler
/client directory as static assets.
First, you have to disable the default route handler for the root URL. Remember back in Create a simple API (you have been following along, haven't you?) when you loaded the application root URL, http://localhost:3000/, you saw the application respond with a simple status message such as this:
This happens because by default the scaffolded application has a boot script named
root.js that sets up route-handling middleware for the root route ("/"):
This code says that for any GET request to the root URI ("/"), the application will return the results of
To make your application serve static content you need to disable this script. Either delete it or just rename it to something without a
.js ending (that ensures the application won't execute it).
Define static middleware
Next, you need to define static middleware to serve files in the
server/middleware.json. Look for the "files" entry:
Add the following:
These lines define static middleware that makes the application serve files in the
/client directory as static content. The
$! characters indicate that the path is relative to the location of
Add an HTML file
Now, the application will serve any files you put in the
/client directory as static (client-side) content. So, to see it in action, add an HTML file to
/client. For example, add a file named
index.html with this content:
Of course, you can add any static HTML you like–this is just an example.
Now run the application again:
When you load http://0.0.0.0:3000/ now instead of the status JSON, you'll see this: