ReactJS App on PHP backend - how to hot reload on local machine?

Question

I am developing a ReactJS-App that gets served by a PHP backend. On my local machine I set up MAMP with a virtual host pointing to my project's root and I use webpack to bundle my React-App.

Since I really enjoy working with hot reloading I now try to use the webpack dev server to proxy MAMP and benfit from its react hot loading capabilities.

I haven't been able to get it working yet and I hope for someone to help me with the configuration. Or isn't my approach basically working? Anyway, I'll be happy if you help me out with this. Thanks in advance! Here's my webpack config so far:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-source-map',
  devServer: {
    port: 3000,
    proxy: {
      '*': {
        target: 'http://my-virtual-host.dev:8888/',
      }
    }
  },
  entry: [
    './src/app.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:3000/build/'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        loader: 'eslint-loader',
      },
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        loader: 'react-hot-loader'
      },
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: 1 },
            },
            'postcss-loader',
          ],
        }),
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),

    new ExtractTextPlugin('bundle.css'),
    new StyleLintPlugin({
      configFile: '.stylelintrc',
      context: 'src',
      files: '**/*.pcss'
    })
  ]
};

Peh

This should help you: webpack.js.org/guides/hot-module-replacement – Ergograph

Thanks @Ergograph ! I've been digging deeper into the problem. What keeps me confused is how it is basically working. Is it that MAMP serves my index.html and the webpack dev server servers the assets? Or is it the webpack dev server who's serving everything but "takes" for example the index.html from MAMP? Thank you! – Peh

@Ergograph I solved my question, see the comment below! Thank you very much for helping me getting further! – Peh

Answer 1

Okay, I found the solution! My fault: I was thinking that my webpack dev server should "proxy" every request to MAMP and return its response. Putting in the other way around solved my Problem: MAMP serves my PHP Application and the webpack dev server only its assets.

When in development mode my PHP Application links assets to the webpack dev server (this discussion around a github issue helped me a lot: https://github.com/webpack/webpack-dev-server/issues/400).

Now, the main attributes I changed in my webpack config are:

module.exports = {
  devServer: {
    proxy: {
      '*': {
        target: 'http://my-virtual-host.dev:8888/',
        changeOrigin: true,
      }
    }
  },
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/only-dev-server', // Enable hot reloading
    './src/app.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080/build/'
  },
}

Linking assets for example to http://localhost:8080/build/app.js, the proxy settings and the output.publicPath did the trick. Hot reloading works fine.

Although it works for me now I'm still interessted in your thoughts!

Peh

thank you for your research, hopefully gonna try in near future – Oppugnant