I'm writing this blog post literally because I want a place to store this tip so I can get it easier later on. When you create a new LoopBack application, the command line automatically creates a folder called client for you. That's a folder where you may, if you want to, place a client-side application to use with your APIs. This is totally optional. If you do choose to use it, you may find yourself wanting to run both a web app there as well as the LoopBack server.

In the past, I simply went into that folder and used httpster to fire up a quick web server. However, recently it occurred to me that a) LoopBack runs on top of Express and b) Express has a way to point to a static folder and c) LoopBack provides a shortcut for updating that setting. So long as you're OK with your client stuff being on the same port and server as your API stuff, then here is a quick tip.

Open up server/middleware.json and find this bit:

"files": {}

And just tweak it to:

"files": {
    "loopback#static": {
      "params": "$!../client"
    }
}

And that's it. Now when you run your LoopBack app, files under the client folder that don't match routes will be loaded as static resources, including your HTML, JavaScript, and CSS.

Oh - one more thing. Most likely you'll add an index.html to your client folder. Don't forget that the default LoopBack app has a route for /. You can remove that in server/boot/root.js:

router.get('/', server.loopback.status());