Powered by Gatsby

Gatsby is a blazing fast modern site generator for React and one of the greatest modern tools of the new frontend era. It has a huge ecosystem and community around it and a very talented team behind it.

Starting from v2, docz's core is entirely built around Gatsby, this is the biggest change in the project since its creation and one of the best things that we could make for the tool.

Using Gatsby as bundler behind the scenes gives you a lot of benefits like :

• Stay focused on creating features instead of worrying about bundler management
• Static and optimized builds by default
• Fast dev-experience and better workflow
• Huge ecosystem of tools, plugins and community
• Better and easy way to customize things inside Docz

Gatsby API and Hooks

Gatsby has an extensive API for developers and a lot of hooks and lifecycle methods that you can use in order to customize your build process.

You can hook into it in a lot of ways and all of these hooks and properties are available when you use docz.

Check the Gatsby API reference here.

If you want to use any of those Gatsby configurations file inside your Docz project, create it in the root and docz will do the rest.

If you want to make some changes to your webpack configuration, you can use the onCreateWebpackConfig hook by exporting a function from the gatsby-node.js file.

For example to create aliases or change how your modules are resolved, you can do something like the below example :

// gatsby-node.js
const path = require('path')

exports.onCreateWebpackConfig = args => {
  args.actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@': path.resolve(__dirname, '../src/components/'),
      },
    },
  })
}

⚠ Note the '..' in the path because the docz gatsby project lives in the .docz directory

Or if you want to change your Babel configuration you can use the onCreateBabelConfig hook for this:

// gatsby-node.js
exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name:  `babel-plugin-emotion`,
    options: {
      sourceMap: true,
    },
  })
}

You can use these hooks and actions to modify or get information about your bundler process.