Search code examples
node.jsreactjsreduxreact-reduxredux-devtools

MERN stack webapp showing blank screen Android-mobile browser, as React-Redux frontend, Node-Express backend

I have built up WebApp in MERN stack with MongoDB, Express, React, Nodejs.

I hosted it to Heroku-Cloud as https://connectgeeks.herokuapp.com.

Github-repo of the project- Find_Geeks. it works on my Desktop browsers but can't run on any Android chrome.

I have an auto-build app in Heroku cloud with command in package.json as

"scripts:{ "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend" } when it loads on android, it's search bar background changes to black and I assume the page is loaded that time, but can't display components.

Screenshot of Desktop-chrome, in the working state.

screenshot1

Screenshot of Desktop-chrome, in Incognito-mode, the working state.

screenshot2

Screenshot of Mobile-mode in chrome, the working state.

screenshot3

my package.json contents are 

{
  "name": "find-geeks",
  "version": "1.0.0",
  "description": "social media for developers, quite same as Linkedin.",
  "main": "server.js",
  "scripts": {
    "client-install": "npm install --prefix frontend",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client  \"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ganesh-deshmukh/connect-geeks.git"
  },
  "author": "Ganesh Ashok Deshmukh",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ganesh-deshmukh/connect-geeks/issues"
  },
  "homepage": "https://github.com/ganesh-deshmukh/connect-geeks#readme",
  "dependencies": {
    "bcryptjs": "2.4.3",
    "body-parser": "1.18.2",
    "concurrently": "3.5.1",
    "express": "4.16.3",
    "gravatar": "1.6.0",
    "jsonwebtoken": "8.2.0",
    "mongoose": "5.4.0",
    "passport": "0.4.0",
    "passport-jwt": "4.0.0",
    "validator": "9.4.1"
  },
  "devDependencies": {
    "nodemon": "1.17.3"
  }
}

Edit 1:

I tried debugging on mobile screen via localhost-server, at url http://192.168.43.171:3000/,

screenshot5

then it showed error location as,

screen6

screen7

screen8

Removed DevTools from store.js, and now it works on Mobile browsers, through localhost-server.

screen8

maybe that's due to Heroku-build script or any other.

it works on a mobile screen just after removing redux-dev-tools, as this locally.

but it won't work with URL as https://connectgeeks.herokuapp.com

Solution

  • this question doesn't have any error but the mistake of not pushing Heroku master once changes were done.

    I checked logs on Heroku dashboard, and it showed activity at old-date, though I updated and push git-repo.

    my mistake was not pushing Heroku-repo after removing redux-dev-tools.

    after solving it, in the activity tab, it shows new logs, means it's updated.

    screen1

    It works on mobile now, both through localhost-server and url as https://connect-geeks.herokuapp.com/

    screen2