Outsmartly
  • Introduction
  • Performance Best Practices / High Performance Checklist
  • Edge Slice Re-rendering
  • Interceptors
  • Middleware
  • Plugins
  • Reference Guide
    • outsmartly.config.js
    • OutsmartlyRequest
    • OutsmartlyEdgeVisitor
    • OutsmartlyClientVisitor
    • OutsmartlyVisitor
    • OutsmartlyCookies
    • OutsmartlyEvent
    • OutsmartlyOverrideEvent
    • OutsmartlyMiddlewareEvent
    • OutsmartlyInterceptEvent
    • OutsmartlyEdgeMessageEvent
    • OutsmartlyClientMessageEvent
    • OutsmartlyMessageEvent
    • MessageBus
  • Using Typescript
  • Troubleshooting / Debugging
Powered by GitBook
On this page
  • Common Plugins
  • Usage
  • Making Your Own Plugins
  • Example

Was this helpful?

Plugins

PreviousMiddlewareNextReference Guide

Last updated 3 years ago

Was this helpful?

Plugins are used to encapsulate and abstract away adding functionality to your Outsmartly edge. They'll often include things like middleware, interceptors, and overrides.

Making your own plugins is possible, but more commonly you'll use one of the existing ones maintained by Outsmartly, or ones from the community:

Common Plugins

Usage

import { somePlugin } from '@outsmartly/plugin-something';
export default {
  host: 'example.outsmartly.app',
  environments: [
    {
      name: 'production',
      origin: 'https://my-example-website.vercel.app',
    },
  ],
  plugins: [
    // Most plugins provide a factory function for passing in options:
    somePlugin({
      something: true,
    }),
  ],
};

Making Your Own Plugins

Plugins are objects with a name and lifecycle methods.

Example

export function myCustomPlugin(options) {
  return {
    name: '@yourcompany/outsmartly-plugin-does-something',
    setup({ config, messageBus }) {
      // Listening for messages, globally
      messageBus.on('Something.HAPPENED', async (event) => {
        const { message } = event;
        // do something with it, such as call fetch()
      });

      // Adding custom middleware
      config.middleware.unshift(async (event, next) => {
        const response = await next();
        return response;
      });

      config.routes.push({
        path: '/something',
        async intercept(event) {
          return new Response('hello, world!');
        },
      });
    },
  };
}

@outsmartly/plugin-image-optimizations
@outsmartly/plugin-shopify
Type Definition