npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fluxible-plugin-fetchr

v0.5.1

Published

A plugin for Fluxible applications to provide an isomorphic interface for RESTful services

Downloads

842

Readme

Fetchr Plugin for Fluxible

npm version

Provides isomorphic RESTful service access to your Fluxible application using fetchr.

Usage

import Fluxible from 'fluxible';
import fetchrPlugin from 'fluxible-plugin-fetchr';
const app = new Fluxible();

app.plug(fetchrPlugin({
    xhrPath: '/api' // Path for XHR to be served from
}));

Now, when calling the createContext method on the server, make sure to send in the request object and optionally pass an xhrContext which will be used as parameters for all XHR calls:

app.createContext({
    req: req,
    xhrContext: { // Used as query params for all XHR calls
        lang: 'en-US', // make sure XHR calls receive the same lang as the initial request
        _csrf: 'a3fc2d' // CSRF token to validate on the server using your favorite library
    }
});

Registering Your Services

Registering fetchr services is done on the server side. Since the fetchr plugin is in control of the fetchr class, we expose this through the registerService method.

pluginInstance.registerService(yourService);

Or if you need to do this from your application without direct access to the plugin

app.getPlugin('FetchrPlugin').registerService(yourService);

For real examples, you can check out the server.js file in our chat example.

Exposing Your Services

Fetchr also contains an express/connect middleware that can be used as your access point from the client. Fetchr middleware expects that you're using the body-parser middleware (or an alternative middleware that populates req.body) before you use Fetchr middleware.

const server = express();
// you need to use body parser middleware before `FetchrPlugin`
server.use(bodyParser.json());
server.use(pluginInstance.getXhrPath(), pluginInstance.getMiddleware());

For real examples, you can check out the server.js file in our chat example.

Dynamic XHR Paths

The fetchrPlugin method can also be passed a getXhrPath function that returns the string for the xhrPath. This allows you to dynamically set the xhrPath based on the current context. For instance, if you're hosting multiple sites and want to serve XHR via a pattern route like /:site/api, you can do the following:

app.plug(fetchrPlugin({
    getXhrPath: function (contextOptions) {
        // `contextOptions` is the object passed to `createContext` above
        return contextOptions.req.params.site + '/api';
    }
}));

CORS Support

Fetchr provides CORS support by allowing you to pass the full origin host into corsPath.

For example:

import Fluxible from 'fluxible';
import fetchrPlugin from 'fluxible-plugin-fetchr';
const app = new Fluxible();

app.plug(fetchrPlugin({
    corsPath: 'http://www.foo.com',
    xhrPath: '/fooProxy'
}));

See Fetchr docs for more info

Context Variables

By Default, fetchr appends all context values to the xhr url as query params. contextPicker allows you to greater control over which context variables get sent as query params depending on the xhr method (GET or POST) See Fetchr docs for more info

Stats Monitoring & Analysis

To collect fetcher service's success/failure/latency stats, you can configure statsCollector for FetchrPlugin. The statsCollector function will be invoked with two arguments: actionContext and stats:

Example for how to configure statsCollector:

import Fluxible from 'fluxible';
import fetchrPlugin from 'fluxible-plugin-fetchr';
const app = new Fluxible();

app.plug(fetchrPlugin({
    corsPath: 'http://www.foo.com',
    xhrPath: '/fooProxy',
    statsCollector: function (actionContext, stats) {
        // just console logging as a naive example.  there is a lot more you can do here,
        // like aggregating stats or filtering out stats you don't want to monitor
        console.log('Request for resource', stats.resource,
            'with', stats.operation,
            'returned statusCode:', stats.statusCode,
            ' within', stats.time, 'ms');
    }
}));

API

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.