Why is React Webpack production build showing Blan

Question

I'm building a react app, and at the moment webpack-dev-server works just fine( the hello world text shows up ), But webpack -p shows blank page. For the Production build The network tab under chrome dev tools, shows index.html and index_bundle.js to have size 0 B(see picture) But That is clearly not the case HTML file size is 227 B & index_bundle.js file size is 195Kb(see picture)

Also Chrome Devtools Elements Tab shows the following(see picture)

My webpack config file looks like this:

Answer 1

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

• You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
• Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.

Answer 2

I figured it out, I was using browserHistory without setting up a local server. If i changed it to hashHistory it worked. To test webpack production locally with react-router browser history i needed to do this Configure a Server:

Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response.

An express app might look like this:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

And just in case anyone is deploying to firebase using react-router with browser-history do this:

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

Answer 3

use

import { HashRouter } from 'react-router-dom';

instead of

import { BrowserRouter} from 'react-router-dom';

and don't forget to replace it in your routes code

<HashRouter>
  ...
</HashRouter>