title: Webpack hot reload using webpack dev server and rails server
body: <p>My current application is set up using Ruby on Rails and React/Typescript. I am trying to set up hot reloading.</p>
  
  <p>Here is the current folder structure</p>
  
  <pre><code>Project Root
    - app =&gt; all the rails code
    - frontend =&gt; all the react code
    - webpack =&gt; list of configuration files, like development.js and production.js
  </code></pre>
  
  <p>This project isn't using <code>react_on_rails</code> or <code>webpacker</code>. The frontend code is kept separate from the backend code. The Rails backend serves up an html </p>
  
  <pre><code>&lt;div id='root' /&gt;
  </code></pre>
  
  <p>and the react code will run off of that. </p>
  
  <p>This is the command I tried to run to get hot reloading to work</p>
  
  <pre><code>node_modules/.bin/webpack-dev-server --config=./webpack/development.js  --hotOnly --entry=../frontend/Entry.tsx --allowedHosts=localhost:3000
  </code></pre>
  
  <p>However, not only is hot reloading not working, the changes I made are not showing up in the browser as well. Everything looks like in the terminal. </p>
  
  <p>My issue here is I technically have two servers running at the same time.</p>
  
  <pre><code>localhost:3000 =&gt; Rails server
  localhost:8080 =&gt; Webpack dev server. 
  </code></pre>
  
  <p>If I change webpack server to point to 3000 as well, the rails app will not work properly. </p>
  
  <p>Is there a way where I can get hot reloading to work using this setup?</p>
  
  <p>here are the webpack version</p>
  
  <pre><code>"webpack": "^4.20.1",
  "webpack-cli": "^3.1.1",
  "webpack-dev-server": "^3.7.1" 
  </code></pre>
  
  <p>webpack.development.config.js</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
  const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  
  module.exports = {
    context: __dirname,
    entry: '../frontend/Entry.tsx',
    devtool: 'source-maps',
    resolve: {
      extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
      modules: [
        'node_modules',
        path.resolve(__dirname, '../frontend'),
        path.resolve(__dirname, '../node_modules')
      ]
    },
    output: {
      path: path.join(__dirname, `../public/javascripts/`),
      publicPath: `/javascripts/`,
      filename: '[name]-[hash].js'
    },
    module: {
      rules: [
        {
          test: /\.(t|j)sx?$/,
          loader: 'ts-loader',
          options: {
            // disable type checker - we will use it in fork plugin
            transpileOnly: true
          }
        },
        {
          enforce: 'pre',
          test: /\.(t|j)sx?$/,
          loader: 'source-map-loader'
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name]-[hash].[ext]',
                outputPath: 'images/'
              }
            },
            {
              loader: 'image-webpack-loader',
              options: {
                pngquant: {
                  quality: '40',
                  speed: 4
                }
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development')
        }
      }),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, '..', 'application.html'),
        filename: path.join(__dirname, '..', 'app', 'views', 'layouts', '_javascript.html.erb')
      }),
      // runs typescript type checker on a separate process.
      new ForkTsCheckerWebpackPlugin({
        checkSyntacticErrors: true,
        tsconfig: '../tsconfig.json'
      }),
      new CaseSensitivePathsPlugin()
    ],
    optimization: {
      splitChunks: { chunks: 'all' }
    }
  };
  </code></pre>