Page Contents

Overview

LoopBack components are predefined packages that extend a basic LoopBack application. Fundamentally, a component is related code bundled together as a unit to enable LoopBack applications for easy reuse.   You can configure components declaratively in component-config.json.

The bare minimum to meet the LoopBack component “contract” is to export a function(app, options) as the main module export.

A LoopBack application itself is nothing more than a grouping of components with elements to tie them all together.

Component contract

To be a LoopBack component, a module must export a function with the following signature as the main module export:

function(app, options)

Compare that with Express middleware, which exports function(_options_)  that is supposed to return function(req, res, next) or function(err, req, res, next).

Pre-defined LoopBack components

LoopBack provides several pre-defined components, as described in the table below.

The sections below describe the configuration settings for each component in component-config.json.

Component Description Module
API Explorer Enables the Swagger UI for the API. See Use API Explorer for an example. loopback-component-explorer
OAuth 2.0 Enables LoopBack applications to function as oAuth 2.0 providers to authenticate and authorize client applications and users to access protected API endpoints. loopback-component-oauth2
Adds push notification capabilities to your LoopBack application as a mobile back end service.
Storage component Adds an interface to abstract storage providers like S3, filesystem into general containers and files. loopback-component-storage
Synchronization Adds replication capability between LoopBack running in a browser or between LoopBack back-end instances to enable offline synchronization and server-to-server data synchronization.

Built into LoopBack; will be refactored into loopback-component-sync
Third-party login using Passport Adds third-party login capabilities to your LoopBack application like Facebook, GitHub etc. loopback-component-passport

API Explorer

The application generator will scaffold an app with component-config.json containing the default entry for LoopBack API Explorer: 

server/component-config.json

{
  "loopback-explorer": {
    "mountPath": "/explorer"
  }
}

OAuth2

Example:

server/component-config.json

{
  "loopback-component-oauth2": {
    "dataSource": "db",
    "loginPage": "/login",
    "loginPath": "/login",
    "addHttpHeaders": "X-"
  }
}

Push Notifications

Non-public Information
server/component-config.json
{
  "loopback-component-push": {
    "gcmServerApiKey" : "..",
    "apnsCertData" : "...",
    "apnsKeyData" : "..."
  }
}
Property Description
gcmServerApiKey For Android apps, Google Cloud Messaging (GCM) API key.
apnsCertData For iOS apps, Apple Push Notification Service (APNS) certificate name and location
apnsKeyData For iOS apps, Apple Push Notification Service (APNS) key file name and location

Storage

Non-public Information
server/component-config.json
{
  "loopback-component-storage": {
   provider: "", // One of "amazon", "rackspace", "azure", "openstack", "filesystem"
   ... // Other options depend on the provider being used; see below.
  }
}

Provider Property Description Example

Amazon

 

 provider: 'amazon'   
{
  provider: 'amazon',
  key: '...',
  keyId: '...'
}
key

 Amazon key
keyId Amazon key ID

Rackspace

provider: 'rackspace'

   
{
  provider: 'rackspace',
  username: '...',
  apiKey: '...'
}
username Your username
apiKey Your API key
Azure

provider: 'azure'

   
{
 provider: 'azure',
 storageAccount: '...',
 storageAccessKey: '...'
}
storageAccount Name of your storage account
storageAccessKey Access key for storage account
OpenStack provider: 'openstack'   
{
 provider: 'openstack',
 username: '...',
 password: '...',
 authUrl: 'https://your-identity-service'
}
username Your username
password Your password
authUrl Your identity service
Local File System provider: 'filesystem'   
{
  provider: 'filesystem',
  root: '/tmp/storage'
}
root File path to storage root directory.

Third-party login (Passport)

REVIEW COMMENT from Rand
Is this the same as the configuration in providers.json and https://apidocs.loopback.io/loopback-component-passport/#passportconfigurator
Non-public Information
server/component-config.json
{
  "loopback-component-passport": {
    ...
  }
}