https://github.com/ara-framework/webpack-nova-consumer

Live reloading and lazy loading on nova consumers
https://github.com/ara-framework/webpack-nova-consumer

Last synced: 4 days ago
JSON representation

Live reloading and lazy loading on nova consumers

• Host: GitHub
• URL: https://github.com/ara-framework/webpack-nova-consumer
• Owner: ara-framework
• License: mit
• Created: 2019-09-12T15:08:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-08-02T06:00:11.000Z (over 3 years ago)
• Last Synced: 2024-12-01T23:06:55.255Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@ara/webpack-nova-consumer
• Size: 14.6 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webpack-nova-consumer

This webpack plugin enables to add external links from Nova bundles inside the consumer pages using the `html-webpack-plugin` hooks.

## Install

```shell

npm i --save-dev @ara/webpack-nova-consumer

```

## Usage

### Plugin

Add the plugin in the webpack configuration passing the Nova entry endpoints.

```js

module.exports = {

  ...

  plugins: [

    new NovaConsumerPlugin({

      novas: [

        {

          entry: 'http://localhost:8080/client.js',

          views: [

            'ExampleView'

          ]

        }

      ]

    })

  ]

}

```

### Live Reload

The plugin creates a socket connection for each Nova that is running with `webpack-dev-server` in development mode. Then the page is reload everytime that the Nova code is compiled with webpack. 

### Lazy Load

Lazy load is enabled by default when webpack runs in production mode. It generates a script file that loads the Nova `entry` when a view listed in the `views` field is placed in the page using the [Nova Bridge](https://ara-framework.github.io/website/docs/nova-bridge)

Example using [nova-vue-bridge](https://www.npmjs.com/package/nova-vue-bridge):

```vue

  


    

  


```

The entry point `http://localhost:8080/client.js` is loaded when Vue.js mounts the example component above.