# Webpack Tutorial

# Installation

Macaca DataHub and DataHub Proxy Middleware are distibuted through npm. To install it, run the command line below:

$ npm i macaca-datahub --save-dev
$ npm i datahub-proxy-middleware --save-dev

# Sample Project

$ cd webpack-datahub-sample
$ npm i
$ npm run dev

Visit the DataHub page: http://localhost:5678 (opens new window)

# How a webpack project integrates DataHub

const path = require('path');
const DataHub = require('macaca-datahub');
const datahubMiddleware = require('datahub-proxy-middleware');

const datahubConfig = {
  port: 5678,
  hostname: '127.0.0.1',
  store: path.join(__dirname, '..', 'data'),
  proxy: {
    '/api': {
      hub: 'sample',
    },
  },
  showBoard: true,
};

const defaultDatahub = new DataHub({
  port: datahubConfig.port,
});

// devServer field
devServer: {
  before: app => {
    datahubMiddleware(app)(datahubConfig);
  },
  after: () => {
    defaultDatahub.startServer(datahubConfig).then(() => {
      console.log('datahub ready');
    });
  },
},

set showBoard=true, then you can use the built-in DataHub in your page.

# How to proxy