CODEWITHSUNDEEP
node.jsherokuwebpack
Cody Payne
Cody Payne

Reputation: 1

404 Error Bundle.js not found when deploying webpack project to Heroku

I'm new to webpack and I have a small project that works fine locally but when I deploy to Heroku I get the following error:

GET https://guarded-garden-60077.herokuapp.com/bundle.js net::ERR_ABORTED

Status code is 404, bundle.js not found. I think there is a webpack directory path issue somewhere but I can't figure out where.

Heroku log:

2018-02-13T16:57:39.008194+00:00 heroku[router]: at=info method=GET path="/" host=guarded-garden-60077.herokuapp.com request_id=073591d7-7628-4770-b20f-fd6170a355cf fwd="75.112.231.201" dyno=web.1 connect=1ms service=28ms status=200 bytes=492 protocol=https
2018-02-13T16:57:39.076253+00:00 heroku[router]: at=info method=GET path="/bundle.js" host=guarded-garden-60077.herokuapp.com request_id=e4084c44-474c-4cbb-a429-e4e891880c63 fwd="75.112.231.201" dyno=web.1 connect=0ms service=10ms status=404 bytes=392 protocol=https

webpack.config.js:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};

module.exports = {
  entry: path.join(paths.SRC, 'index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
        use: [
          {loader: "css-loader"}
        ]
        }),
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: path.join(__dirname, './dist'),
    publicPath: './',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.DIST, '/index.html'),
    }),
    new ExtractTextPlugin('style.bundle.css'),
  ],
  devServer: {
    contentBase: './dist'
  }
};

package.json: 

{
  "name": "btoz-react",
  "version": "1.0.0",
  "description": "Front-end for B To Z Blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --colors --config ./webpack.config.js",
    "build": "Webpack",
    "dev": "webpack-dev-server",
    "prod": "NODE_ENV=production node server.js --config ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.9",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.9",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  }
}

server.js: 

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Minimal React-Webpack-Babel Boilerplate</title>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
</html>
File structure:

-dist
--index.html
-node_modules
-src
--css
--js
--index.js
-package.json
-procfile
-server.js
-webpack.config.js

How do I get this project to display when deployed on Heroku? Thanks

Upvotes: 0

Views: 1745

Answers (1)

tam.dangc
tam.dangc

Reputation: 2032

I think you misunderstand here. As I understand, HtmlWebpackPlugin plugin will auto generate an index.html file, which injected bundle.js from a html file template and located in dist folder as you defined at output property:

output: {
  path: path.join(__dirname, './dist'),
  publicPath: './',
  filename: 'bundle.js'
},

webpack.config.js :

 new HtmlWebpackPlugin({
   template: 'src/index.html',
 }),

With app's structure:

-dist
-node_modules
-src
--css
--js
--index.js
--index.html
-package.json
-procfile
-server.js
-webpack.config.js

and index.html 

<!DOCTYPE html>
<html>
  <head>
    <title>Minimal React-Webpack-Babel Boilerplate</title>
  <body>
    <div id="app"></div>
  </body>
</html>

Upvotes: 0

Related Questions