title: MERN on Heroku does not work across browsers
body: <p>I developed MERN app with MLab, React, Redux. <strong>Works fine in dev</strong>.
  I deployed in Heroku and  <strong>works fine in the Chrome that I used for developing</strong> (with React, Redux attachments).</p>
  
  <p><strong>Issue</strong>: It shows up blank in any other browser in my machine, including in chrome in any other machines. I looked in the net and per a solution in this forum, I did the following on the server.js (or app.js). That is, in my own chrome this URL (<a href="https://servicexpoc.herokuapp.com/" rel="nofollow noreferrer">https://servicexpoc.herokuapp.com/</a>) works fine but in any other it is a blank page.</p>
  
  <pre><code>if (process.env.NODE_ENV === 'production') {
          // app.use(express.static('client/build')); returns blank page
          // Changed to ...
          app.use('/static', express.static(path.join(__dirname, 'client/build')));
          app.get('*', (req, res) =&gt; {
          res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
        });
      }
  </code></pre>
  
  <p>Did the traditional ... git stuff (git add, commit) then check the  remote connect to Heroku and did the 'git push heroku master' . Everything went fine ... the server is up and sunning. And once again, it shows up in my chrome and works like a charm ... BUT Nowhere else.</p>
  
  <p>Following  is my server side package.json:</p>
  
  <pre><code>    {
        "name": "appname",
        "version": "1.0.0",
        "description": "Developer Connection social media",
        "main": "server.js",
        "scripts": {
        "client-install": "npm install --prefix client",
        "start": "node server.js",
        "server": "nodemon server.js",
        "client": "npm start -prefix client",
        "dev": "concurrently \"npm run server\" \"npm run client\"",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix 
   client &amp;&amp; npm run build --prefix client"
    },
        "author": "Jit &lt;sarbojit.project@gmail.com&gt;",
        "license": "ISC",
        "dependencies": {
        "bcryptjs": "^2.4.3",
        "body-parser": "^1.18.3",
        "concurrently": "^3.6.0",
        "express": "^4.16.3",
        "gravatar": "^1.6.0",
        "jsonwebtoken": "^8.3.0",
        "mongoose": "^5.1.5",
        "passport": "^0.4.0",
        "passport-jwt": "^4.0.0",
        "validator": "^10.3.0"
       }
  }
  </code></pre>
  
  <p>Following is  the client side package.json</p>
  
  <pre><code>{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "jwt-decode": "^2.2.0",
    "moment": "^2.22.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-moment": "^0.7.7",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
   },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
   },
   "proxy": "http://localhost:5000"
  }
  </code></pre>
  
  <p>My directory structure:</p>
  
  <pre><code>appName
    client
      public 
        ... index.html (that is the root of react)
      src
        ... this has all the react code
    package.json (client side)
  ....... SERVER SIDE  
  server.js
  models  
     ... all models here
  routers
     ... all routers here
  validations
     ... all validations here
  package.json   (SERVER SIDE)
  .gitignore
  </code></pre>
  
  <p>Trying to follow directives as on:
  <a href="https://expressjs.com/en/starter/static-files.html" rel="nofollow noreferrer">https://expressjs.com/en/starter/static-files.html</a></p>
  
  <p>ANY HELP ... </p>