python - Deploying Django, Django REST Framework backend & VueJS + webpack frontend on GCP App Engine (standard)

Question

I have following setup:

• Django==3.1.4
• djangorestframework==3.12.2
• django-webpack-loader==0.7.0 (I am not convinced to use this - but this is separate story - just doing some learning for fun)

On local dev setup everything works fine. Webpack-loader finds and deploys VueJS application. But when deployed to GAE following error is thrown:

Error reading /workspace/frontend/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

it comes from:

/layers/google.python.pip/pip/lib/python3.9/site-packages/webpack_loader/loader.py, line 28, in load_assets

I read tones of tutorials. All is clear when running on local dev - starting both django and VueJS. Of course, the problem is that webpack-stats.json are not created, as VueJS server is not started. I tried to find proper solution for this, but failed.

I tried as well having VueJS on just domain with statics - but failed as well.

What is best solution to have basic VueJS app talking to REST CRUDS and run it on GAE?

My vue.config.js (Its from one of tutorials):

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

module.exports = {
    publicPath: "http://0.0.0.0:8080/",
    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: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',
    //     },
    // }
}

Local versions: npm --version: 7.3.0 vue --version: @vue/cli 4.5.9

Answer 1

I manage to solve it by:

• changing publicPath as @lhar suggested to: publicPath: "/static/" (my django conf has STATIC_URL = '/static/')
• removing django-webpack-loader
• disabling hashing of generated files: filenameHashing: false (no need to do this now)
• starting VueJS app from template referring to static resources

Had to adjust as well my Cloud Build, but finally it works.

I found this very interesting article: Using webpack with Django and will go with option one as suggested, will solve filename hashing later.