Пытаемся нажимать webpack на gh-pages

Question

Я пытаюсь подтолкнуть свое приложение с помощью реакции/redux/webpack на gh-pages. Но со всем, что я вижу в Интернете, видно, что страницы не отображаются. Что я получил от консоли, это ошибка в том, что github не может получить файл bundle.js.

Я думаю, что я, возможно, пропустил что-то, но не мог понять. Я тоже пытаюсь нажать на Heroku и получить тот же результат.

Это repository.

package.json

{ 
    "name": "twitch", 
    "version": "0.1.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
     "start": "node server.js", 
     "clean": "rimraf dist", 
     "build:webpack": "NODE_ENV=production webpack --config webpack.prod.config.js", 
     "build": "npm run clean && npm run build:webpack" 
    }, 
    "keywords": [ 
    "redux", 
    "react", 
    "express", 
    "api" 
    ], 
    "author": "Emanuel Quimper", 
    "license": "ISC", 
    "dependencies": { 
    "babel": "^6.5.2", 
    "babel-eslint": "^6.0.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "body-parser": "^1.15.1", 
     "css-loader": "^0.23.1", 
     "cssnext-loader": "^1.0.1", 
    "express": "^4.13.4", 
    "jsxstyle": "0.0.18", 
    "material-ui": "^0.15.0", 
    "normalizr": "^2.1.0", 
    "path": "^0.12.7", 
    "radium": "^0.17.1", 
    "react": "^15.1.0", 
     "react-css-modules": "^3.7.6", 
    "react-dom": "^15.1.0", 
    "react-redux": "^4.4.5", 
    "react-router": "^2.4.1", 
    "react-router-redux": "^4.0.4", 
    "react-tap-event-plugin": "^1.0.0", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-promise-middleware": "^3.0.0", 
    "request": "^2.72.0", 
    "style-loader": "^0.13.1", 
    "superagent": "^2.0.0-alpha.3", 
    "webpack": "^1.13.1" 
    }, 
    "devDependencies": { 
    "eslint": "^2.10.2", 
    "eslint-loader": "^1.3.0", 
    "eslint-plugin-babel": "^3.2.0", 
    "eslint-plugin-react": "^5.1.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "react-hot-loader": "^1.3.0", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-hot-middleware": "^2.10.0" 
    } 
} 

server.js

//const webpack = require('webpack'); 
//const WebpackDevServer = require('webpack-dev-server'); 
///*>>>>>>=============================================<<<<<<*/ 
//const config = require('./webpack.dev.config.js'); 
///*>>>>>>=============================================<<<<<<*/ 
//const PORT = process.env.PORT || 3000; 
// 
//new WebpackDevServer(webpack(config), { 
// publicPath: config.output.publicPath, 
// hot: true, 
// historyApiFallback: true 
//}).listen(PORT, 'localhost', (err, result) => { 
// if (err) { 
//  return console.log(err); 
// } 
// 
// console.log(`Listening on port ${PORT}`); 
//}); 

const path = require('path'); 
const webpack = require('webpack'); 
const config = require('./webpack.dev.config.js'); 
const express = require('express'); 
const app = express(); 
const compiler = webpack(config); 


app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.use(require('webpack-hot-middleware')(compiler)); 

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

const PORT = process.env.PORT || 3000; 

app.listen(PORT, 'localhost', (err) => { 
    if (err) { 
     console.log(err); 
     return; 
    } 

    console.log(`Listening at http://localhost:${PORT}`); 
}); 

webpack.prod.config.js

const path = require('path'); 
const webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
     './src/js/index' 
    ], 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: '/static/' 
    }, 
    plugins: [ 
     new ExtractTextPlugin('app.css', { 
      allChunks: true 
     }), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      compressor: { 
       warnings: false 
      } 
     }), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }) 
    ], 

    module: { 
     loaders: [ 
      { 
       test: /\.js?$/, 
       loaders: [ 'react-hot', 'babel' ], 
       exclude: /node_modules/, 
       include: path.join(__dirname, 'src') 
      }, 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'cssnext') 
      } 
     ] 
    } 
}; 

index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Game Streaming</title> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" type="text/css"> 
</head> 
<body> 
    <div id="app"></div> 
    <script src="/static/bundle.js"></script> 
</body> 
</html> 

Answer 1

страницы ожидает в bundle.js быть в «статической» директории. Поскольку gh-pages не запускает ваш server.js, вам нужно либо вручную создать статическую папку, либо поставить там bundle.js, либо предоставить правильный путь к bundle.js из файла HTML.

Answer 2

Страницы Github могут только статические файлы хоста. Вам нужно создать свой проект, а затем опубликовать созданные файлы. Вы должны, по крайней мере, index.html и bundle.js

Answer 3

Для работы с GitHub страниц сделать ваш WebPack компилировать корневого пути /, а не /static, /dist или такой.

должен выглядеть примерно так в webpack.config.js

output: { 
    filename: 'bundle.js', 
    path: '/', 
    }, 

Ref: Deploying a React Webpack app (not created with create-react-app) to Github pages