How to add a public folder to react-boilerplate webpack config?

Question

I'm setting up a new web app using react and its boilerplate the react-boilerplate. Now I want to add a public folder in the root that contains the index.html as well as the robot.txt .htaccess files and some external js libraries. Can someone please guide me through editing the webpack config files to make it behave like so.

Thanks in advance

Romans

Answer 1

You could use copy-webpack-plugin to copy files from public folder to your build folder. Make the next steps to make it works:

1. Install copy-webpack-plugin:

npm i copy-webpack-plugin --save-dev

2. Edit your webpack.base.babel.js in /internals/webpack:

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin'); <-- import plugin

module.exports = options => ({
    ...
    plugins: options.plugins.concat([
        ...
        new CopyWebpackPlugin([ <-- add plugin 
            {
                from: 'public',
            },
        ]),
  ]),

3. Now you can create folder public in your source root and all files from this folder will be copied to build folder.

IMPORTANT! You already have index.html which is generated from /app/index.html template by HtmlWebpackPlugin. If you created index.html in your public folder, it could override generated one.

Githens

Apparently, this is slightly outdated. This should work: new CopyWebpackPlugin({patterns: [{from: 'public', }]}) from version ^11.0.0. – Transmute