Not able to access URL manually in ReactJS build - reactjs

Question

I have created build using Webpack 4.2.0. But I'm not able to access URLs directly without landing to index page.
My WebPack Config:
var webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin')
// require('react-select/dist/react-select.css')
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src/');
var CSS_DIR = path.resolve(__dirname,'public/css');
// const HtmlPlugin = require('html-webpack-plugin');
var config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
plugins: [
// Configure HtmlPlugin to use our own index.html file
// as a template.
// Check out https://github.com/jantimon/html-webpack-plugin
// for the full list of options.
new HtmlPlugin({
template: 'public/index.html'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
// new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
module : {
rules: [
{
test: /\.js$/,
enforce: "pre",
include : APP_DIR,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include : CSS_DIR
}
]
}
};
module.exports = config;
Index.js
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
APP.JS
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/contact' component={Contact}/>
<Route path='/listing' component={Listing}/>
<Route path='/product/:id' component={Product}/>
</Switch>
</main>
)
In Build folder, two files created.
- index.html
- bundle.js
And I have used http-server to open React Build
./node_modules/.bin/http-server build -p 3007
But In browser, it will throw 404 if I access URL localhost:3007/contact directly.
What is right way to deploy this for production which can be accessed via url say www.reactapp.com/contact

Answer 1

You need to configure your server to serve your index.html for all GET requests. ReactRouter just changes the navigation history, you don't actually leave the page when the route changes. Currently, your server is just serving the index.html page for the / route. Configure it to serve the page on all routes and you will be able to visit the routes by access their urls directly.