Quick LoopBack Tip - Using the Client Folder for your Static Directory

This post is more than 2 years old.

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());
Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Robert Zehnder posted on 11/8/2016 at 7:57 PM

I found this before then immediately forgot about it. I have been meaning to get back to it, but trying to grok Angular 2 has slowed me down.

Comment 2 by Benny posted on 9/4/2018 at 12:32 PM

Thanks buddy, this should be on by default!

Comment 3 (In reply to #2) by Raymond Camden posted on 9/4/2018 at 1:21 PM

Glad to help!