A next-generation tool to create blazing-fast documentation sites
API
created:3/15/2021
updated:3/15/2021
Below, we go over how to add a component-controls documentation site to new Webpack projects and existing Webpack projects.
You can find sample projects

Clone starter

The easiest way to get started is to clone the webpack-5-controls-starter project
webpack 5:
git clone git@github.com:ccontrols/webpack-5-controls-starter.git my-webpack-project
webpack 4:
git clone git@github.com:ccontrols/webpack-controls-starter.git my-webpack-project
You can also start your project from scratch, or using one of the webpack starter tutorials (for example this article)

Existing Webpack project

Add component-controls

yarn add @component-controls/react-router-integration

Enable component-controls

You will need to make a few changes to your webpack.config.(js|ts) files:

webpack.dev.config.js

const {
withComponentControls,
} = require('@component-controls/react-router-integration/webpack-build');
const publicFolder = process.env.PUBLIC_PATH || 'public';
const publicPath = path.join(__dirname, publicFolder);
const config = {
mode: 'development',
entry: './src/index.tsx',
...
}
// the following will compile your documentation files before launching the webpack proces to compile the documentation site itself:
module.exports = withComponentControls({
config,
options: { configPath: '.config', distFolder: publicFolder },
});
or if you are using ts-node and typescript webpack configuration files

webpack.dev.config.ts

import webpack from 'webpack';
import { withComponentControls } from '@component-controls/react-router-integration/webpack-build';
const publicFolder = process.env.PUBLIC_PATH || 'public';
const publicPath = path.join(__dirname, publicFolder);
const config: webpack.Configuration = {
mode: 'development',
entry: './src/index.tsx',
...
}
// the following will compile your documentation files before launching the webpack proces to compile the documentation site itself:
module.exports = withComponentControls({
config,
options: {
configPath: '.config',
distFolder: publicFolder,
},
});
Be aware that react/webpack/react-router applications are single page applications (SPA), where all pages are running from the same index.html file. To address this issue of client-side routing and depending on your server provider, you might need to use create-file-webpack for example to create a _redirects file

Create documentation site

Create a src folder

mkdir src

React index file

Create a new or edit index.tsx or index.js file in the src folder:

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);

HTML template file

Create a new or edit index.html file in the src folder. PLease note that you might need to update a standard index.html file with the <base href= /> tag to account for dynamic routes:

src/index.html

<!DOCTYPE html>
<html>
<head>
<base href="/" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

Application home

Create a new or edit App.tsx or App.js file in the src folder and import the useRoutes hook from @component-controls/react-router-integration. This will return a list of all the routes and corresponding pages for the documentation site that you can include in your <Router> component, alongside any other custom routes as needed.

src/App.tsx

import React, { FC } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { useRoutes } from '@component-controls/react-router-integration';
export const App: FC = () => {
const routes = useRoutes();
return <Router>{routes}</Router>;
};

Create your documentation site

Check our create a documentation site tutorial