MERN 堆栈 web 应用程序显示空白屏幕 Android 移动浏览器，作为 React-Redux 前端，Node-Express 后端 [英] MERN stack webapp showing blank screen Android-mobile browser, as React-Redux frontend, Node-Express backend

问题描述

我已经使用 MongoDB、Express、React、Nodejs 在 MERN 堆栈中构建了 WebApp.

我将它作为

Desktop-chrome 的屏幕截图，在隐身模式下，工作状态.

Chrome 中 Mobile-mode 的屏幕截图，工作状态.

我的package.json 内容是

<代码>{"name": "find-geeks","版本": "1.0.0","description": "开发者的社交媒体，与 Linkedin 完全相同.","main": "server.js",脚本":{"client-install": "npm install --prefix frontend","start": "节点 server.js","server": "nodemon server.js","client": "npm start --prefix frontend","dev": "同时\"npm 运行服务器\" \"npm 运行客户端\"","heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"},存储库":{"类型": "git","url": "git+https://github.com/ganesh-deshmukh/connect-geeks.git"},"author": "Ganesh Ashok Deshmukh","许可证": "麻省理工学院",错误":{"url": "https://github.com/ganesh-deshmukh/connect-geeks/issues"},"主页": "https://github.com/ganesh-deshmukh/connect-geeks#readme",依赖关系":{"bcryptjs": "2.4.3","body-parser": "1.18.2","同时": "3.5.1","快递": "4.16.3","gravatar": "1.6.0","jsonwebtoken": "8.2.0","猫鼬": "5.4.0","护照": "0.4.0","passport-jwt": "4.0.0",验证器":9.4.1"},开发依赖":{nodemon":1.17.3"}}

编辑 1:

我尝试通过本地主机服务器在移动屏幕上调试，网址为 http://192.168.43.171:3000/,

然后它显示错误位置为，

从 store.js 中删除了 DevTools，现在它可以通过 localhost-server 在移动浏览器上运行.

可能是因为 Heroku 构建脚本或其他任何原因.

它在删除 redux-dev-tools 后就可以在移动屏幕上运行，就像在本地一样.

但它不适用于

它现在可以在移动设备上运行，通过 localhost-server 和 url 作为

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.

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

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

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/,

then it showed error location as,

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

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

解决方案

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.

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

这篇关于MERN 堆栈 web 应用程序显示空白屏幕 Android 移动浏览器，作为 React-Redux 前端，Node-Express 后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！