https://github.com/nut-project/nut

🌰 A framework born for micro frontends
https://github.com/nut-project/nut

cli framework microfrontends nut spa

Last synced: 6 days ago
JSON representation

🌰 A framework born for micro frontends

• Host: GitHub
• URL: https://github.com/nut-project/nut
• Owner: nut-project
• License: mit
• Created: 2019-03-19T08:30:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-06T08:06:24.000Z (4 months ago)
• Last Synced: 2024-10-14T10:15:27.988Z (about 2 months ago)
• Topics: cli, framework, microfrontends, nut, spa
• Language: HTML
• Homepage: https://nut.js.org
• Size: 5.7 MB
• Stars: 109
• Watchers: 4
• Forks: 7
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-micro-frontends - nut
• awesome-micro-frontends - NUT
• awesome-micro-frontends - NUT

README

        


  



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 |

| :---: | :---: |

| ![ocean](media/default-ocean.jpg) | ![sakura](media/default-sakura.jpg) |

#### saber

| ocean | sakura |

| :---: | :---: |

| ![ocean](media/saber-ocean.jpg) | ![sakura](media/saber-sakura.jpg) |

#### now



### How to write a layout

...

### How to write a plugin

A standard plugin looks like

```js

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

```js

module.exports = {

  plugins: {

    superb: {

      package: 'your-superb-plugin',

      enable: true,

    }

  }

}

```

superb is the name in current application

Use above plugin for example

```js

// plugin exposed

ctx.use( 'superb', 'method_name' )

ctx.use( 'superb', 'prop' )

// plugin events

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

```

## Get started

```bash

yarn global add @nut-project/cli

```

```bash

nut # develop locally

nut --prod # build for production

```