title: Use React App (with NodeJS Backend) in own network
body: <p>I've got a react app (latest React version) with a NodeJS backend.
  That runs so far locally. But now I want to use this React App (together with its NodeJS backend) with other devices in my home network.</p>
  
  <p>How to do that?</p>
  
  <p>That is my package.json of the React App:</p>
  
  <pre><code> {
    "name": "dionysiscontrolcenter",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "private": true,
    "devDependencies": {
      "@babel/core": "^7.4.5",
      "@babel/plugin-transform-runtime": "^7.5.5",
      "@babel/preset-env": "^7.4.5",
      "@babel/preset-react": "^7.0.0",
      "@babel/runtime": "^7.5.5",
      "@hot-loader/react-dom": "^16.8.6",
      "babel-eslint": "^10.0.2",
      "babel-loader": "^8.0.6",
      "babel-plugin-import": "^1.12.0",
      "babel-plugin-syntax-dynamic-import": "^6.18.0",
      "babel-preset-es2015": "^6.24.1",
      "copy-webpack-plugin": "^5.0.3",
      "css-hot-loader": "^1.4.4",
      "eslint": "5.15.3",
      "eslint-config-airbnb": "^17.1.0",
      "eslint-loader": "^2.1.2",
      "eslint-plugin-import": "2.18.0",
      "eslint-plugin-jsx-a11y": "^6.2.1",
      "eslint-plugin-react": "7.14.2",
      "file-loader": "^4.0.0",
      "node-sass": "^4.12.0",
      "prettier": "^1.18.2",
      "sass-loader": "^7.1.0",
      "webpack": "^4.35.0",
      "webpack-bundle-analyzer": "^3.3.2",
      "webpack-cli": "^3.3.5",
      "webpack-dev-server": "^3.7.2"
    },
    "dependencies": {
      "antd": "^3.15.2",
      "babel-plugin-transform-runtime": "^6.23.0",
      "css-loader": "^2.1.1",
      "html-webpack-plugin": "^3.2.0",
      "image-webpack-loader": "^5.0.0",
      "less": "^3.9.0",
      "less-loader": "^5.0.0",
      "moment": "^2.24.0",
      "prop-types": "^15.7.2",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-hot-loader": "^4.12.10",
      "react-scripts": "2.0.0",
      "react-string-replace": "^0.4.1",
      "socket.io-client": "^2.2.0",
      "style-loader": "^0.23.1",
      "url-loader": "^1.1.2"
    },
    "scripts": {
      "dev": "webpack-dev-server --hot --env.mode=development",
      "build": "webpack --colors --profile --progress --env.mode=production",
      "build:analyze": "webpack --colors --profile --progress --env.mode=production --env.analyze=true",
      "lint": "eslint ./src/ --ext .js,.jsx"
    }
  }
  </code></pre>
  
  <p>My webpack.config.js:</p>
  
  <pre><code>const path = require('path');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  
  module.exports = (env = {}) =&gt; {
    const config = {
      entry: ['./src/main.less', './src/main.jsx'],
      output: {
        path: path.resolve(__dirname, `./html/${env.branch || 'master'}`),
        filename: 'dionysiscontrolcenter.js',
        library: 'dionySisControlCenter',
        libraryExport: 'default',
        libraryTarget: 'umd',
      },
      mode: env.mode || 'development',
      devtool: 'eval',
      resolve: {
        extensions: ['.js', '.jsx', '.css', '.less'],
      },
      plugins: [
        new HtmlWebpackPlugin({ hash: false, template: './index.hbs' }),
        new CopyWebpackPlugin([
          { from: 'dev/static/', to: 'static/' },
          'dev/index.html',
        ]),
      ],
      module: {
        rules: [
          {
            test: [/\.js$/, /\.jsx$/],
            exclude: /node_modules/,
            use: 'babel-loader',
          },
          {
            test: /\.css$/i,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
              },
            ],
          },
          {
            test: /\.less$/i,
            use: [
              {
                loader: 'style-loader', // creates style nodes from JS strings
              },
              {
                loader: 'css-loader', // translates CSS into CommonJS
                options: {
                  sourceMap: true,
                  import: false,
                },
              },
              {
                loader: 'less-loader', // compiles Less to CSS
                options: {
                  sourceMap: true,
                  javascriptEnabled: true,
                },
              },
            ],
          },
          {
            test: /\.(jpe?g|png|gif)$/i,
            use: [
              {
                loader: 'image-webpack-loader',
                options: {
                  gifsicle: {
                    interlaced: false,
                  },
                  optipng: {
                    optimizationLevel: 7,
                  },
                },
              },
              {
                loader: 'file-loader',
              },
            ],
          },
          {
            test: /\.(svg)$/i,
            use: [
              {
                loader: 'file-loader',
              },
            ],
          },
          {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
          },
          {
            test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: 'file-loader',
          },
        ],
      },
      watchOptions: {
        poll: 1500,
      },
      devServer: {
        contentBase: path.resolve(__dirname, './dev/'),
        watchContentBase: true,
        disableHostCheck: true,
        // host: '0.0.0.0',
        inline: true,
        port: 8000,
        // public: process.env.webpack_public_address || null,
        overlay: true,
      },
    };
  
    if (env.mode === 'development') {
      // blabla alias
      config.entry.unshift(
        'webpack/hot/only-dev-server',
        'react-hot-loader/patch'
      );
      config.resolve.alias = { 'react-dom': '@hot-loader/react-dom' };
      config.module.rules.unshift({
        enforce: 'pre',
        test: [/\.js$/, /\.jsx$/],
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnError: env.mode === 'production',
        },
      });
    }
  
    if (env.analyze === 'true') {
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
        })
      );
    }
  
    return config;
  };
  </code></pre>
  
  <p>What I tried so far:</p>
  
  <ul>
  <li>Commented in host: '0.0.0.0' in the webpack.config.js</li>
  <li>Added the line: "dev": "webpack-dev-server --hot --env.mode=development --host 0.0.0.0", to scripts attribute in the package.json</li>
  <li>Removed --hot parameter in the scripts attribute of "dev" command</li>
  </ul>
  
  <p>Can someone help here?</p>