Trying to push webpack to gh-pages
Solution 1
the page is expecting the bundle.js to be in 'static' directory. Since gh-pages does not run your server.js, you'd want to either manually create static folder and put bundle.js there, or provide a proper path to the bundle.js from the HTML file
Solution 2
Github Pages can only host static files. You need to build your project and then publish the generated files. You should at least have index.html and bundle.js
Solution 3
To work with github pages make your webpack compile to the root path /
rather than /static
, /dist
or such.
Should look something like this in webpack.config.js
output: {
filename: 'bundle.js',
path: '/',
},
Ref: Deploying a React Webpack app (not created with create-react-app) to Github pages
EQuimper
Updated on June 13, 2022Comments
-
EQuimper almost 2 years
I try to push my app build with react/redux/webpack to gh-pages. But with everything I find on the web seen that the pages don't render. What I got from the console it's a error about github can't get the bundle.js file.
I think I maybe miss something but can't figured out. I try to push to Heroku too and get the same result.
This is the 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>