Docz: How to integrate docz with custom webpack configurations?

[iraSenthil]

How to integrate docz with custom webpack configurations?

docz looks awesome ❤️🔥, Thank you for creating and maintaining it. I am trying to use docz for a design system documentation.

We have custom webpack configuration and eslint config to develop and build our documentation site. We need to keep this custom configuration for business reasons; access webpack dev server in HTTPS to access webcam, consistent linting and formatting rules for all developers etc..

How can I integrate our custom webpack configuration and eslint configurations with docz?

I see that you are using webpac-chain under the hood, we are using NeutrinoJS from Mozilla for our boilerplate/template.

Appreciate any help.

Thank you

[mgallagher]

What I did was use modifyBundlerConfig in the doczrc file. I needed docz to understand our webpack aliases, and this is how I managed that (disclaimer: there is probably a better way):

// doczrc.js
const baseWebpackConfig = require('./webpack.base.js');

module.exports = {
  ...
  modifyBundlerConfig: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      ...baseWebpackConfig.resolve.alias
    }
  }

You'll see there's also onCreateWebpackChain if you what you're doing there. Hope that helps!

[dan10gc]

If using version 2 they removed this option from docrz.js and moved to using Gatsby hooks .
https://www.docz.site/docs/powered-by-gatsby