ERR_CONNECTION_REFUSED with Django and Vue.js bundle files

Question

I've built a simple SPA CRUD web app with Django, Vue and Docker(-compose).

Since I've finished developing the app, I'm now preparing for the production environment, that is, using bundle.js and bundle.css files.

When I try to load the main page, http://localhost:8000, no CSS or JS are being loaded because I'm getting this error in the browser's console:

GET http://0.0.0.0:8080/bundle.css net::ERR_CONNECTION_REFUSED
GET http://0.0.0.0:8080/bundle.js net::ERR_CONNECTION_REFUSED

I really don't know why it is giving that error or how to fix it.

This is my vue.config.js file:

const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: "http://0.0.0.0:8080/",
  outputDir: "./dist/",
  filenameHashing: false,

  configureWebpack: {
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      })
    ]
  },

  chainWebpack: config => {
    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "./webpack-stats.json" }]);

    config.output.filename("bundle.js");

    config.optimization.splitChunks(false);

    config.optimization.delete("splitChunks");

    config.resolve.alias.set("__STATIC__", "static");

    config.devServer
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .disableHostCheck(true)
      .headers({ "Access-Control-Allow-Origin": ["*"] });
  },

  // uncomment before executing 'npm run build'
  css: {
    extract: {
      filename: "bundle.css",
      chunkFilename: "bundle.css"
    }
  }
};

This is part of my settings.py file:

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "assets"),
    os.path.join(BASE_DIR, "frontend/dist"),
]

# STATIC_ROOT = ""  # The absolute path to the dir for collectstatic

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
    }
}

When I run the npm run build command I get notified that both the bundle.css and the bundle.js files have been generated:

  File               Size                        Gzipped

  dist/bundle.js     150.73 KiB                  51.05 KiB
  dist/bundle.css    192.06 KiB                  26.89 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

I really don't know why it is giving that ERR_CONNECTION_REFUSEDerror or how to fix it.

Answer 1

For production remove publicPath from your vue config file, I suppose you used that for development purposes, but in production you should only create the bundle and serve it to the user.

What's probably happening is that in your Docker setup you don't have the webpack dev server running (and you don't need it), thus you hit a connection refused error.