MERN на Heroku не работает через браузеры - PullRequest
Новая
       82

MERN на Heroku не работает через браузеры

0 голосов
/ 02 июля 2018

Я разработал приложение MERN с MLab, React, Redux. Отлично работает в dev . Я развернул в Heroku и отлично работает в Chrome, который я использовал для разработки (с вложениями React, Redux).

Проблема : он отображается пустым в любом другом браузере на моей машине, в том числе в chrome на любых других машинах. Я посмотрел в сети и в соответствии с решением на этом форуме, я сделал следующее на server.js (или app.js). То есть в моем собственном chrome этот URL (https://servicexpoc.herokuapp.com/) работает нормально, но на любом другом это пустая страница. 

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) => {
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
      });
    }

Сделал традиционные ... git вещи (git add, commit), затем проверил удаленное соединение с Heroku и сделал 'git push heroku master'. Все прошло нормально ... сервер работает и загорает. И снова, это появляется в моем хроме и работает как шарм ... НО больше нигде.

Ниже приведен мой package.json на стороне сервера: 

    {
      "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 && npm run build --prefix client"
  },
      "author": "Jit <sarbojit.project@gmail.com>",
      "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"
     }
}

Ниже приведен пакет на стороне клиента. Json 

{
  "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"
}

Моя структура каталогов: 

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

Попытка следовать директивам как на: https://expressjs.com/en/starter/static-files.html

ЛЮБАЯ ПОМОЩЬ ...

1 Ответ

0 голосов
/ 11 июля 2018

Чтобы Heroku мог выполнить рендеринг, и если вы случайно добавили REDUX DEVTOOLS в свой хром для разработки, сделайте следующее:

const store = createStore ( rootReducer, начальное состояние, составлять ( applyMiddleware (... промежуточный слой), //window.REDUX_DEVTOOLS_EXTENSION && window. REDUX_DEVTOOLS_EXTENSION () // Проверяем, работает ли следующий thig окно. REDUX_DEVTOOLS_EXTENSION ? окно. REDUX_DEVTOOLS_EXTENSION () : f => f ) );

Изначально я заставил хром добавить DEVTOOL (как указано выше, теперь комментарии заменены на троичные). Героку во время строительства не игнорировал это и не создавал ошибку или даже предупреждение. Он просто не рендерится (пустым). В приведенном выше сценарии, это будет отображать ваши страницы.

...