A vue app bundle is not serving from s3 bucket

[fgarcia6connex]

I've been trying to make an integration using Vue. It is working properly locally, the trouble comes when trying to do it in production.

It seems, Django tries to get the files from a static URL like using the same URL, but it must be from s3. The weird fact is, css and others from S3 have been loaded properly, which means s3 is working as expected. But, when it comes to the bundle that is created for Vue, in production it fails.

this is the configuration that I have:
I'm using in the backend
Zappa 0.52.0
Django 3.2
django-storages 1.11.1
django-webpack-loader 1.1.0

I'm using in the frontend
webpack-bundle-tracker 1.1.0
vue 3.0

settings.py

AWS_STORAGE_BUCKET_NAME = os.getenv('STATIC_S3_NAME_BUCKET')
AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY')
AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_HOST = 's3-us-west-2.amazonaws.com'

STATICFILES_LOCATION = 'static'
STATICFILES_STORAGE = 'apps.index.custom_storages.StaticStorage'
STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, STATICFILES_LOCATION)

MEDIAFILES_LOCATION = 'media'
MEDIA_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, MEDIAFILES_LOCATION)
DEFAULT_FILE_STORAGE = 'apps.index.custom_storages.MediaStorage'

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

vue.config.js

const BundleTracker = require("webpack-bundle-tracker");
const ASSET_PATH = process.env.NODE_ENV === 'production' ? '' : 'http://0.0.0.0:8082';
module.exports = {
  publicPath: `${ASSET_PATH}/static/vue/`,
  outputDir: '../static/vue/',
  chainWebpack: config => {
    config.optimization
      .splitChunks(false)
    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])
    config.resolve.alias
      .set('__STATIC__', 'static')
    config.devServer
      .public('http://0.0.0.0:8082/static/vue/')
      .host('0.0.0.0')
      .port(8082)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({"Access-Control-Allow-Origin": ["*"]})
  },
  pages: {
    index: 'src/main.js'
  }
};

the webpack-stats.js created for production was

{
  "status": "done",
  "chunks": {
    "index": [
      "css/index.853078a8.css",
      "js/index.7b5f8fc6.js",
      "js/index.7b5f8fc6.js.map"
    ]
  },
  "publicPath": "/static/vue/",
  "assets": {
    "img/buttonRealTime.1ec76826.png": {
      "name": "img/buttonRealTime.1ec76826.png",
      "path": "/Users/fgarcia/PycharmProjects/personal/business/webpage/static/vue/img/buttonRealTime.1ec76826.png",
      "publicPath": "/static/vue/img/buttonRealTime.1ec76826.png"
    },
    "css/index.853078a8.css": {
      "name": "css/index.853078a8.css",
      "path": "/Users/fgarcia/PycharmProjects/personal/business/webpage/static/vue/css/index.853078a8.css",
      "publicPath": "/static/vue/css/index.853078a8.css"
    },
    "js/index.7b5f8fc6.js": {
      "name": "js/index.7b5f8fc6.js",
      "path": "/Users/fgarcia/PycharmProjects/personal/business/webpage/static/vue/js/index.7b5f8fc6.js",
      "publicPath": "/static/vue/js/index.7b5f8fc6.js"
    },
    "js/index.7b5f8fc6.js.map": {
      "name": "js/index.7b5f8fc6.js.map",
      "path": "/Users/fgarcia/PycharmProjects/personal/business/webpage/static/vue/js/index.7b5f8fc6.js.map",
      "publicPath": "/static/vue/js/index.7b5f8fc6.js.map"
    },
    "index.html": {
      "name": "index.html",
      "path": "/Users/fgarcia/PycharmProjects/personal/business/webpage/static/vue/index.html",
      "publicPath": "/static/vue/index.html"
    },
    "favicon.ico": {
      "name": "favicon.ico",
      "path": "/Users/fgarcia/PycharmProjects/personal/business/webpage/static/vue/favicon.ico",
      "publicPath": "/static/vue/favicon.ico"
    }
  }
}

index.html

...
{% load render_bundle from webpack_loader %}
....

{% render_bundle 'index' %}
...

And finally in the frontend was I got when trying to get the files about the bundle were

But it must bring them form s3, as this css file was brought

Thanks for your help!

[fjsj]

Hi @fgarcia6connex , did you solve this issue by yourself? Could you please share what was wrong in your config, if this was the case?

[fgarcia6connex]

Hi @fgarcia6connex , did you solve this issue by yourself? Could you please share what was wrong in your config, if this was the case?

Hi @fjsj. I think I was wrong about the build. I realize at the moment that I made the build locally to deployed, I was taken the static path that I had locally, I was needed the one that is on production, so...

My solution was really simple. I know what is my static URL in s3, so I set into my vue.config.js something like this:

const ASSET_PATH = process.env.NODE_ENV === 'production' ? process.env.STATIC_URL : 'http://0.0.0.0:8082';

to be used like this:

module.exports = {
  publicPath: `${ASSET_PATH}/static/vue/`,
  outputDir: '../static/vue/',
  productionSourceMap: false,
  chainWebpack: config => {
    config.optimization
      .splitChunks(false)
    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])
    config.resolve.alias
      .set('__STATIC__', 'static')
    config.devServer
      .public('http://0.0.0.0:8082/static/vue/')
      .host('0.0.0.0')
      .port(8082)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({"Access-Control-Allow-Origin": ["*"]})
  },
  pages: {
    index: 'src/main.js'
  }
};

This way I let the build process know I must use the static_url related to the s3 bucket. Not sure if this is the more elegant way to do it but at least it works.

STATIC_URL is in .env file with the proper base URL to the static folder on s3.

Just let me know if there is another better way to do it.

[fjsj]

That looks right, thanks. We'll clarify this better in the README updates to be implemented at #282