Install in create-react-app using CRACO :hatching_chick:

Step 1. Install the package using your favorite package manager

$ yarn add uibook

Step 2. Add Uibook in craco.config.js

craco.config.js

let isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  webpack: {
    configure: {
      output: {
        filename: isProduction
            ? 'static/js/[name].[contenthash:8].js'
            : 'static/js/[name].js',
      },
    },
    plugins: [
      new UibookPlugin({
        // JSX is transformed only in `src/` folder
        controller: path.join(__dirname, 'src/uibook/uibook-controller.js'),
        isFixedHeader: true,
        outputPath: '/uibook',
        title: 'Uibook',
        hot: true
      }),
    ],
  },
};

where:

• controller — path to the Uibook Controller (we’ll create it on the next step)
• isFixedHeader (optional) — enables or disables sticky header, the default is true
• outputPath (optional) — directory to build Uibook files, the default is uibook
• title (optional) — Uibook title in a browser
• hot (optional) — enable webpack-dev-server hot reload feature

:warning: If you’re using HtmlWebpackPlugin, it’s necessary to exclude uibook:

webpack.config.js

new HtmlWebpackPlugin({
  excludeChunks: ['uibook']
})

Nice work! You’ve installed Uibook in Create React App just now. Now we can configure it.

Thanks to :octocat: @Grawl for help with this section.

---

← Back to the main page

Next: Configuration →