0

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

GD- Ganesh Deshmukh
  • 1,456
  • 3
  • 24
  • 36

2 Answers2

0

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

GD- Ganesh Deshmukh
  • 1,456
  • 3
  • 24
  • 36
0

I know this is an old question, but I'll post the answer in case anyone needs it.

The problem is in your server.js (Backend) file. You need to put the middlewares in server.js in the following order.

order of the middlewares

Hashim Jameel
  • 21
  • 7