How to deploy a React App on Apache web server

Ultimately was able to figure it out , i just hope it will help someone like me.
Following is how the web pack config file should look like check the dist dir and output file specified. I was missing the way to specify the path of dist directory

const webpack = require('webpack');const path = require('path');var config = {    entry: './main.js',    output: {        path: path.join(__dirname, '/dist'),        filename: 'index.js',    },    devServer: {        inline: true,        port: 8080    },    resolveLoader: {        modules: [path.join(__dirname, 'node_modules')]    },    module: {        loaders: [            {                test: /\.jsx?$/,                exclude: /node_modules/,                loader: 'babel-loader',                query: {                    presets: ['es2015', 'react']                }            }        ]    },}module.exports = config;

Then the package json file

{  "name": "reactapp",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "start": "webpack --progress",    "production": "webpack -p --progress"  },  "author": "",  "license": "ISC",  "dependencies": {    "react": "^15.4.2",    "react-dom": "^15.4.2",    "webpack": "^2.2.1"  },  "devDependencies": {    "babel-core": "^6.0.20",    "babel-loader": "^6.0.1",    "babel-preset-es2015": "^6.0.15",    "babel-preset-react": "^6.0.15",    "babel-preset-stage-0": "^6.0.15",    "express": "^4.13.3",    "webpack": "^1.9.6",    "webpack-devserver": "0.0.6"  }}

Notice the script section and production section, production section is what gives you the final deployable index.js file ( name can be anything )

Rest fot the things will depend upon your code and components

Execute following sequence of commands

npm install

this should get you all the dependency (node modules)

then

npm run production

this should get you the final index.js file which will contain all the code bundled

Once done place index.html and index.js files under www/html or the web app root directory and that's all.

Firstly, in your react project go to your package.json and adjust this line line of code to match your destination domain address + folder:

"homepage": "https://yourwebsite.com/your_folder_name/",

Secondly, go to terminal in your react project and type:

npm run build

Now, take all files from that newly created build folder and upload them into your_folder_name, with filezilla in subfolder like this:

public_html/your_folder_name

Check in the browser!

1. Go to your project root directory cd example /home/ubuntu/react-js

2. Build your project first npm run build

3. check your build directory gracefully all the files will be available in thebuild folder.

   asset-manifest.json

   favicon.ico

   manifest.json

   robots.txt

   static assets

   index.html

   precache-manifest.ddafca92870314adfea99542e1331500.js service-worker.js

4.copy the build folder to your apache server i.e /var/www/html

sudo cp -rf build /var/www/html

5. go to sites-available directory

   cd /etc/apache2/sites-available/

6. open 000-default.conf file

sudo vi 000-default.conf and rechange the DocumentRoot path

7. Now goto apache conf.

cd /etc/aapche2

sudo vi apache2.conf

add the given snippet

<Directory /var/www/html>            Options Indexes FollowSymLinks            AllowOverride All            Require all granted    </Directory>