vue.js - Django/VueJs App deployed to Heroku showing blank pages

Question

I have a Django/VueJs app serving API's to the frontend via Django Rest Framework. I made use of webpack-loader on the django backend and webpack bundle tracker at the vuejs frontend. My app works very fine on localhost. I have deployed the app to Heroku (kolabo.herokuapp.com) and the build seems successful. However, i run into some issues after deployment. All the routes are blank except those served by Django (the admin page). A look at my console, i saw two main errors:
Refused to apply style from 'https://kolabo.herokuapp.com/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. And then this: GET https://kolabo.herokuapp.com/bundle.js net::ERR_ABORTED 404 (Not Found)

I also did heroku logs --tail and discovered that both bundle.js and bundle.css files were not found.

2021-02-24T12:30:40.755696+00:00 app[web.1]: [2021-02-24 12:30:40 +0000] [4] [INFO] Using worker: sync
2021-02-24T12:30:40.764939+00:00 app[web.1]: [2021-02-24 12:30:40 +0000] [9] [INFO] Booting worker with pid: 9
2021-02-24T12:30:40.832478+00:00 app[web.1]: [2021-02-24 12:30:40 +0000] [10] [INFO] Booting worker with pid: 10
2021-02-24T12:30:42.000000+00:00 app[api]: Build succeeded
2021-02-24T12:30:42.000526+00:00 heroku[web.1]: State changed from starting to up
2021-02-24T12:30:51.419065+00:00 heroku[router]: at=info method=GET path="/" host=kolabo.herokuapp.com request_id=0c53c710-1424-4b05-a687-9b6185c12f18 fwd="129.205.124.222" dyno=web.1 connect=0ms service=692ms status=200 bytes=1126 protocol=https
2021-02-24T12:30:51.420319+00:00 app[web.1]: 10.69.66.119 - - [24/Feb/2021:13:30:51 +0100] "GET / HTTP/1.1" 200 865 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
2021-02-24T12:30:51.784050+00:00 app[web.1]: Not Found: /bundle.js
2021-02-24T12:30:51.784941+00:00 app[web.1]: 10.152.193.4 - - [24/Feb/2021:13:30:51 +0100] "GET /bundle.js HTTP/1.1" 404 13998 "https://kolabo.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
2021-02-24T12:30:51.785632+00:00 heroku[router]: at=info method=GET path="/bundle.js" host=kolabo.herokuapp.com request_id=700103d0-98df-4ebb-bb06-395850a6a9be fwd="129.205.124.222" dyno=web.1 connect=1ms service=71ms status=404 bytes=14253 protocol=https
2021-02-24T12:30:51.954630+00:00 app[web.1]: Not Found: /bundle.css

I have googled around and saw similar issues where suggestions were given to resolve it like changing the publicPath in vue.config.js from publicPath: "http://127.0.0.1:8080/" to publicPath: '', i have done this but there is no change. However, i have both bundle files in my build 'dist' folder. Here are the some of my files: 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: '/',
  outputDir: "./dist/",

  chainWebpack: (config) => {
    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "./webpack_config/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:8080")
      .host("127.0.0.1")
      .port(8080)
      .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',
      },
  }
};

settings.py

WEBPACK_CONFIG = os.path.join(BASE_DIR, 'webpack_config')

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

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'dist')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

webpack_config is a directory at the root of my project holding the webpack-stats.json file. dist is the build folder at the root of the directory housing the index.html file, the bundle.css and bundle.js files. In my urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name="index.html"),name="app"),
]

and in my template/index.html file

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>My App</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link
    href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=Lato&family=Open+Sans:wght@300;400&family=Raleway:wght@300;600&family=Trebuchet:wght@300;600&family=Roboto:wght@300;400;500&family=Baloo+2&family=Baloo+Thambi+2&family=Source+Sans+Pro:wght@300;400&family=Comfortaa&family=Lora&family=Muli:wght@200;400&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<div id="app">
     <app></app>
 </div>
{% render_bundle 'app' %}
<!-- built files will be auto injected -->
  
</body>
</html>

I will appreciate any help to resolve this please. I will be happy to show more files as demanded.

Answer 1

Waitting for answers