Развертывание завершено, но на сайте Herokuapp ничего не отображается; Приложение React Webpack

Я пытаюсь развернуть свое приложение React Webpack на Heroku и прохожу несколько основных шагов, таких как редактирование моих скриптов в моем package.json.

Я добавил скрипты «postinstall» и «start», создал файл server.js.

Вот мой package.json (я выполнил sudo NPM install -g webpack и npm install, что позволило запустить мой $ webpack -p).

Я могу запустить $ node server.js запустить свой проект на localhost: 8080. Я получаю «Сервер запущен» из моего файла server.js в моем терминале, и проект действительно отображается на моем локальном хосте.

Затем я сделал:

$git add.
$git commit -am "deploy commit"
$git push heroku master

Я получил сообщение, что "Сборка выполнена!" но когда я открываю приложение, на сайте ничего не отображается.

Что я делаю неправильно?

Вот мои логи $ heroku для последнего запуска.

 2018-03-10T16:10:03.000000+00:00 app[api]: Build started by user [email protected]
2018-03-10T16:10:46.421847+00:00 app[api]: Release v8 created by user [email protected]
2018-03-10T16:10:46.771508+00:00 heroku[web.1]: Restarting
2018-03-10T16:10:46.773432+00:00 heroku[web.1]: State changed from up to starting
2018-03-10T16:10:46.421847+00:00 app[api]: Deploy 564e8921 by user [email protected]
2018-03-10T16:10:03.000000+00:00 app[api]: Build succeeded
2018-03-10T16:10:47.709064+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-03-10T16:10:47.791386+00:00 heroku[web.1]: Process exited with status 143
2018-03-10T16:10:53.037456+00:00 heroku[web.1]: Starting process with command `npm start`
2018-03-10T16:10:54.902517+00:00 app[web.1]: 
2018-03-10T16:10:54.902538+00:00 app[web.1]: > [email protected] start /app
2018-03-10T16:10:54.902540+00:00 app[web.1]: > node server.js
2018-03-10T16:10:54.902542+00:00 app[web.1]: 
2018-03-10T16:10:55.116187+00:00 app[web.1]: Server started
2018-03-10T16:10:55.335272+00:00 heroku[web.1]: State changed from starting to up
2018-03-10T16:10:58.234416+00:00 heroku[router]: at=info method=GET path = "/" host=weatherapp101.herokuapp.com request_id=e985ba8d-1e9e-4e9b-829c-1593329b1c65 fwd = "123.198.0.36" dyno=web.1 connect=1ms service=19ms status=200 bytes=762 protocol=https
2018-03-10T16:10:58.412820+00:00 heroku[router]: at=info method=GET path = "/style/style.css" host=weatherapp101.herokuapp.com request_id=1cbe3df1-d253-459e-b092-4a0e376cb7dc fwd = "123.198.0.36" dyno=web.1 connect=1ms service=3ms status=200 bytes=510 protocol=https
2018-03-10T16:10:58.587208+00:00 heroku[router]: at=info method=GET path = "/bundle.js" host=weatherapp101.herokuapp.com request_id=e6bf0498-e486-4535-b321-b1a395abe467 fwd = "123.198.0.36" dyno=web.1 connect=1ms service=15ms status=200 bytes=315609 protocol=https
2018-03-10T16:11:18.173974+00:00 heroku[router]: at=info method=GET path = "/favicon.ico" host=weatherapp101.herokuapp.com request_id=9dd508ad-04eb-4dc7-9ad1-00fd5e67c074 fwd = "123.198.0.36" dyno=web.1 connect=1ms service=4ms status=200 bytes=762 protocol=https

Вот журнал сборки heroku:

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.10.0...
       Using default npm version: 5.6.0
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json)

       > [email protected] postinstall /tmp/build_aa21f1c37823732c65451d55f7047e90
       > webpack -p

       Hash: 0846607ee102f618af36
       Version: webpack 1.15.0
       Time: 8198ms
       Asset    Size  Chunks             Chunk Names
       bundle.js  315 kB       0  [emitted]  main
       [0] multi main 28 bytes {0} [built]
       + 240 hidden modules

       WARNING in bundle.js from UglifyJs
       Condition always true [./~/react/lib/ReactMount.js:764,0]
       Condition always true [./~/react/lib/findDOMNode.js:46,0]
       Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
       Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0]
       Condition always true [./~/react/lib/traverseAllChildren.js:158,0]
       Side effects in initialization of unused variable support [./~/lodash/index.js:932,0]
       Condition always true [./~/lodash/index.js:12323,0]
       Dropping unreachable code [./~/lodash/index.js:12337,0]
       Side effects in initialization of unused variable moduleExports [./~/lodash/index.js:266,0]
       Condition always true [./~/react-sparklines/build/index.js:2,0]
       Dropping unreachable code [./~/react-sparklines/build/index.js:4,0]
       Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1511,0]
       Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1626,0]
       Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1843,0]
       Side effects in initialization of unused variable height [./~/react-sparklines/build/index.js:1844,0]
       Condition always true [./~/react/lib/ReactDOMComponent.js:907,0]
       Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0]
       Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListener.js:98,0]
       Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventListener.js:26,0]
       Condition always true [./~/symbol-observable/lib/index.js:22,1]
       Dropping unreachable code [./~/symbol-observable/lib/index.js:25,0]
       up to date in 15.615s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue
       https://github.com/npm/npm/issues/19356

       You can silence this warning by updating to at least npm 5.7.1 in your package.json
       https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 31.8M
-----> Launching...
       Released v8
       https://weatherapp101.herokuapp.com/ deployed to Heroku

Вот мой package.json:

{
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
    "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "postinstall": "webpack -p",
    "start": "node server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "react-sparklines": "^1.6.0",
    "redux": "^3.0.4",
    "redux-promise": "^0.5.3"
  }
}

Вот файл webpack.config.js:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Прикрепите конфигурацию webpack

Dmitry Manannikov 10.03.2018 13:21

Просто добавили конфигурацию webpack внизу.

bigmugcup 10.03.2018 14:02

В качестве обновления я переместил все свои devDependencies в зависимости и изменил спарклайны реакции на версию 1.4.2 без ^. Страница отображается сейчас, но выдает ошибку о том, что переменная не определена в обещании, чего не происходит в среде разработки.

bigmugcup 10.03.2018 23:13
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
3
625
0

Другие вопросы по теме