Deploying ReactJS app Production

Question

I have finished my ReactJS app and I want to put it in production. I run next command: webpack --progress -p but in chrome F12 I get next error: index.js:1 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See WebSiteFbReactJs for more details..

It is my webpack.config.js:

'use strict';

const WEBPACK = require('webpack');
const PATH = require('path');
const CopyFiles = require('copy-webpack-plugin');
const BaseName = "/upct";

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    context: __dirname,
    entry: {
        app: ['./src/index.jsx']
    },
    output: {
        path: PATH.join(__dirname, '/public'),
        /*path: './public',*/
        publicPath: BaseName+'/',
        filename: 'index.js'
    },
    devServer: {
        host: 'localhost',
        port: 3000,
        contentBase: PATH.join(__dirname, '/public'),
        inline: true,
        historyApiFallback: true,
        headers: { "Access-Control-Allow-Origin": "*" }
    },
    module: {
        loaders: [
            {
                test: /(\.js|.jsx)$/,
                loader: 'babel',
                query: {
                    "presets": [
                        "es2015",
                        "react",
                        "stage-0"
                    ],
                    "plugins": [
                        "react-html-attrs",
                        "transform-decorators-legacy",
                        "transform-class-properties"
                    ]
                }
            }
        ]
    },
    plugins: [
        new WEBPACK.DefinePlugin({
            BASENAME: JSON.stringify(BaseName)
        })
    ]
}

What could this error be?. It is all OK, right? How could I solve this? Thank you.

EDIT: I am getting next error too: DevTools failed to parse SourceMap: http://MYSERVER.com/upct/src/css/bootstrap.css.map

Answer 1

Please add NODE_ENV = 'production' environmental variable to your Webpack build in order to disable debug information and warnings, most of the property type checks and other developer-friendly tools. It will make the app faster but harder to debug. Use this only when deploying to the production.

In your case, in the plugins section just add:

new WEBPACK.DefinePlugin({
    'process.env': {
        'NODE_ENV': JSON.stringify('production')
    }
}),

Please see documentation about optimizing the production build with React, especially Webpack section.

As for the error with the source maps, it seems that the link is broken and returns 404 Not Found error so Chrome can't fetch the original source code mapping for Bootstrap's CSS. That's not a big issue as you probably won't be looking at it's source but that might be a signal that your Webpack build doesn't deploy source maps when building the app. Please add devtool: 'source-map' to your config file in order to produce source maps which will improve the debugging experience on production by translating bundled code to original source files.

UglifyJs will minimize the code size by renaming variables, function names and by other optimization tricks. You can add it to your plugins section of the config file the same way:

new WEBPACK.optimize.UglifyJsPlugin({
    compress: {
        // suppresses warnings, usually from module minification
        warnings: false,
    },
}),

There are many possible optimizations, for more information please see this optimization guide.