@globality/poco NPM

poco

Opinionated, extensible React applications framework

What is `poco`

Poco is a React application framework, that aims to make it easy to create applications with pre loaded services like redux, apollo client, remote configurations, etc.

Installation

yarn add @globality/poco

How to use `poco`

The following is an app that uses redux and react-intl.

import Poco, { IntlPlugin, ReduxPlugin } from '@globality/poco';

const App = new Poco({
    appName: 'my-app',
    createApp: () => <div>Hello world!</div>,
});

App.load((app) => {
    app.addPlugin(IntlPlugin);
    app.addPlugin(ReduxPlugin, {
        rootReducer: state => state,
    });
});

Constructor

Poco receives an object with the following properties:

appName (string, required)
Application name, is used by the plugins (i.e. to determine where to load or save configuration)
createApp (function, required)
Function that returns the React component that holds the application. It receives an object with:
- container: the bottle-js service container
- onReady: function that must be called whenever the app is ready to be shown to the user, this allows the app to load data before rendering
environment (object)
Object containing basic environment configuration:
- config: configuration object that contains the default values. Remote configurations (if enabled) will be merged into this object
- remoteConfigs: remote configuration loader options (more about this below)

Plugins

Currently, there are a few included plug-ins:

ConfigurationPlugin - Loads configuration from remote URLs and localStorage
HistoryPlugin - Creates a history/createBrowserHistory instance
IntlPlugin - Wraps the app in an IntlProvider HoC from react-intl
ReduxPlugin - Creates a redux instance

Remote configuration

The ConfigurationPlugin is loaded by default when load() is called, and uses 3 sources for loading configuration that can be used by other plugins or in your app.

The 3 sources are:

Environment: Passing a config object in the environment property will create a default configuration
Remote: Loaded from one or more remote JSON files
localStorage: Loaded from the browser's localStorage, intended for feature flags and session state

The different sources are loaded and merged in this order, in other words: _.merge({}, environmentConfig, remoteConfig, localConfig)

Setup

In order to load configuration from remote sources, you need to pass a remoteConfigs object to the environment property:

environment: {
    remoteConfigs: {
        enabled: true,
        origin: 'https://example.com',
        paths: ['/configs/my-app.json', '/configs/common.json'],
    },
}