Configure react webpack for deploy

Question

need a little help. We had tried to deploy a react project, but we are unable to configure it.

We use: es6, webpack, redux, react, babel.

this is webpack base:

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  entry: './app/app.js',
  output: {
    path: './app/App/dist',
    filename: '/bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass'),

      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css!sass'),
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.svg$/,
        loader: 'babel?presets[]=es2015,presets[]=react!svg-react',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/App/index.html',
    }),
    new ExtractTextPlugin('/app/App/css/default.css', {
      allChunks: true,
    }),
  ],
};

webpack dev:

import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  debug: true,
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    ...baseConfig.plugins,
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    colors: true,
    historyApiFallback: true,
    inline: true,
    hot: true,
  },
};
export default config;

webpack prod:

import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  plugins: [
    ...baseConfig.plugins,
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        screw_ie8: true,
        warnings: false,
      },
    }),
  ],
};
export default config;

This is our actual webpack, we are trying to deploy the project with it, but does not work.

Does anyone have an idea how to configure it?

Answer 1

So, it's a server problem probably. You need a HTTP server in order to server the static files (your app basically). I recommend the Ngxin, very easy to configure and use.

After install nginx, delete the /etc/nginx/sites-enable/default file and create a new one (you can use whatever name you want here). Here's the config I use:

server {
    listen 80;
    listen [::]:80;

    server_name example.com;

    location / {
        root /var/html/myProject/;
        try_files $uri /index.html;
    }
}

after that, restart nginx and should be ready to go.

for webpack, I have a simpler config that works well:

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isProd = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() == 'production';

const plugins = [
  new ExtractTextPlugin(isProd ? 'bundle.[hash].css' : 'bundle.css', { allChunks: true }),
  new HtmlWebpackPlugin({
    template: 'index.html',
    inject: 'body',
    filename: 'index.html'
  }),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  })
];

const prodPlugins = [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()
];

module.exports = {
  devtool: isProd ? 'cheap-module-source-map' : 'eval',
  entry: [
    './src/index.jsx'
  ],
  output: {
    path: isProd ? path.join(__dirname, 'dist') : __dirname,
    publicPath: '/',
    filename: isProd ? 'bundle.[hash].js' : 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },
    {
      test: /\.(scss|css|sass)$/,
      loader: ExtractTextPlugin.extract('css!sass')
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url'
    },
    {
      test: /\.html$/,
      loader: 'html'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: isProd ? prodPlugins.concat(plugins) : plugins
};

A few points:

• I'm using SASS
• Check the path's before run anything
• To compile for production, just run NODE_ENV=production webpack -p
• I'm using a few plugins for Uglify JS and compress files.

I think that's it! Cheers!