CORB issue while build and serving with django only

[AbrarNitk]

Hi Jordan, Thanks for your help.

I cloned your repository and try to run, It is perfectly working with npm run serve with django. Then I build it with npm run build and just serving it django so it is not able to load bundle.js May you please help in it.

I change port in frontend/vue.config.js 8080 to 8000(django port) Or is it mandatory to run npm run serve even in production also.

vue.config.js

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

module.exports = {
  // on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
  publicPath: "http://0.0.0.0:8000/",
  outputDir: "./dist/",

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

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

    config.optimization.splitChunks(false);

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

    config.devServer
      // the first 3 lines of the following code have been added to the configuration
      .public("http://127.0.0.1:8000")
      .host("127.0.0.1")
      .port(8000)
      .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',
  //     },
  // }
};

Then I changed settings.py and change ALLOWED_HOSTS = ["*"], then it is able to get bundle.js but browser is not loading it. Not able to figure out the issue.

[raymondlee2020]

Hi guys, Is there any solution to build the front-end part and only provide service by django server?

I notice the comment at the end of vue.config.js so I try

1. Uncomment the code and execute yarn build
2. Run django server

But the server can't get bundle.js and bundle.css

I am not familiar with webpack config. I would appreciate it if you could help me.

---

Thankfully, I got a solution yesterday.

I add following code in settings.py MIDDLEWARE = [ ... corsheaders.middleware.CorsMiddleware ... ] and the CORB problem is solved, but django server still can't get the resources.

So I add url pattern to get static file in frontend/dist by django.views.static, (related setting way can be found by searching django media) and finally get the complete Vue page.

Hope this comment can help somebody.