harveyrandall/nut

🌰 A framework born for micro frontends

NUT Project

Features

• Flexible layout mechanism
• File-based router system
• Customizable layouts and themes
• Builtin markdown support
• System events
• Configuration management
• Convenient hot reload during development
• Plugin system

layout / theme HMR

markdown theme HMR

System events

Route matching

Builtin layouts

default

ocean	sakura

saber

ocean	sakura

now

How to write a layout

...

How to write a plugin

A standard plugin looks like

export default {
  name: 'your-superb-plugin',
  // some special plugin need specify type，but you can ignore this in most cases
  type: 'login',
  apply( ctx = {}, options = {} ) {
    const { api, events } = ctx

    api.expose( 'method_name', () => {} )
    api.expose( 'prop', 'value' )

    events.on( 'system:before-startup', async ctx => {
      await api.axios() // do some request
      await events.pluginEmit( 'some-event', data ) // emit plugin event out
    } )
  }
}

You can expose some methods or props to application, or listen for system events, emit out some event in plugin

Using plugin

nut.config.js

module.exports = {
  plugins: {
    superb: {
      package: 'your-superb-plugin',
      enable: true,
    }
  }
}

superb is the name in current application

Use above plugin for example

// plugin exposed
ctx.use( 'superb', 'method_name' )
ctx.use( 'superb', 'prop' )

// plugin events
ctx.events.on( 'plugin:superb:some-event', async data => {} )

Get started

yarn global add @nut-project/cli

nut # develop locally
nut --prod # build for production