Saleor: Webpack doesn't look into the right folder when STATIC_URL is supplied

[NyanKiyoshi]

It seems like there is an issue with the configuration of webpack. Which is described as below.

Webpack is building under the folder named assets (of which the parent is static).

The webpack configuration seems to be expecting the user to supply the base static folder to look into. Which, by default is /static/. If, the environment variable STATIC_URL is not set, the webpack configuration sets the assets path to /static/assets/, which appends to the default /static/.

Now, if we are supplying the environment variable STATIC_URL to webpack, it make sense that the webpack would expect the assets folder to be appended to the base static folder. But webpack doesn't manually appends assets to the base path.

As a result, webpack is looking for the assets at the root static folder instead of its generated folder (assets).

As of now, the way to prevent conflicts between the settings.py, django side, would be to supply a STATIC_URL for request serving; and a different STATIC_URL including the assets folder in the URL on compilation time of webpack (for webpack-bundle.json thus). Which can make sense, but would be really confusing for the users.

Steps to reproduce the problem

1. Set the environment variable STATIC_URL to /static/ and keep it for every command below;
2. Compile the assets in production mode;
3. webpack-bundle.json should have publicPath set to /static/ instead of /static/assets/;
4. Launch Saleor;
5. Make a request on the home page;
6. Saleor will find anything non-related to the webpack bundles (e.g.: placeholder images) but not the assets.

Proposed solution

As the target folder (assets) is hard coded in the config, thus non changeable by the user, I would propose to join process.env.STATIC_URL with the folder assets.

Index: webpack.config.js
===================================================================
--- webpack.config.js   (revision 89489fa751617fdb1e60f508ef6eb05931398c5b)
+++ webpack.config.js   (date 1533322641000)
@@ -11,11 +11,13 @@
 var output;

 if (process.env.NODE_ENV === 'production') {
+  const baseStaticPath = process.env.STATIC_URL || '/static/';
+  const publicPath = path.join(baseStaticPath, 'assets/');
   output = {
     path: resolve('saleor/static/assets/'),
     filename: '[name].[chunkhash].js',
     chunkFilename: '[name].[chunkhash].js',
-    publicPath: process.env.STATIC_URL || '/static/assets/'
+    publicPath: publicPath
   };
   fileLoaderPath = 'file-loader?name=[name].[hash].[ext]';
   extractCssPlugin = new MiniCssExtractPlugin({

[2XL]

$ nodejs
> var path = require('path');
undefined
> path.join('https://google.es/', 'assets/') 
'https:/google.es/assets/'    <------ wrong: found `/` instead of  `//` after URI  scheme
> path.join('https://google.es/', '/assets/') 
'https:/google.es/assets/'
> var url = require('url');
undefined
> url.resolve('https://google.es/', 'assets/') 
'https://google.es/assets/'
> url.resolve('https://google.es', 'assets/') 
'https://google.es/assets/'
> url.resolve('/static/', 'assets/') 
'/static/assets/'
> 

replace path.join with url.resolve ?

[2XL]

https://github.com/mirumee/saleor/blob/master/templates/dashboard/base.html#L57
Raising 400 error

               ↓
return static('/images/placeholder{size}x{size}.png'.format(size=size))

Should be:

return static('images/placeholder{size}x{size}.png'.format(size=size))

Same applies for:
https://github.com/mirumee/saleor/blob/master/saleor/core/templatetags/placeholder.py#L9

                          ↓
<svg data-src="{% static "/dashboard/images/account-circle.svg" %}" width="24" height="24" fill="#fff" />

Should be:

<svg data-src="{% static "dashboard/images/account-circle.svg" %}" width="24" height="24" fill="#fff" />

More:

UWSGI uwsgi "GET /dashboard/products/types/add/ HTTP/1.0" 200 13842 307ms [PID:40:Worker-1] [RSS:116MB]
UWSGI uwsgi "GET /en/jsi18n/ HTTP/1.0" 200 3293 41ms [PID:39:Worker-4] [RSS:96MB]
UWSGI uwsgi "GET /health/ HTTP/1.1" 200 45 0ms [PID:40:Worker-1] [RSS:116MB]
UWSGI uwsgi "GET /health/ HTTP/1.1" 200 45 0ms [PID:37:Worker-2] [RSS:94MB]
UWSGI uwsgi "POST /dashboard/products/types/add/ HTTP/1.0" 302 335 4039ms [PID:38:Worker-3] [RSS:90MB]
ERROR django.security.SuspiciousOperation Attempted access to '/images/filter-icon.svg' denied. [PID:40:uWSGIWorker1Core0]
ERROR django.security.SuspiciousOperation Attempted access to '/images/filter-icon.svg' denied. [PID:40:uWSGIWorker1Core0]
UWSGI uwsgi "GET /dashboard/products/types/ HTTP/1.0" 400 152 152ms [PID:40:Worker-1] [RSS:117MB]

$ git diff
diff --git a/.scripts b/.scripts
diff --git a/templates/dashboard/includes/_filters.html b/templates/dashboard/includes/_filters.html
@@ -9,7 +9,7 @@
       <div class="col s12">
         <span class="card-title">{% trans 'Filters' context 'Dashboard card title' %}</span>
         {{ filter.get_summary_message }}
-        <span class="collapse-activate hide-on-large-only"><svg data-src="{% static '/images/filter-icon.svg' %}" /></span>
+        <span class="collapse-activate hide-on-large-only"><svg data-src="{% static 'images/filter-icon.svg' %}" /></span>
       </div>
       <div class="col s12 hide-on-large-only chips-container">
         {% for chip in chips %}
diff --git a/templates/dashboard/order/pdf/invoice.html b/templates/dashboard/order/pdf/invoice.html
-    <img src="{% static '/images/logo-document.svg' %}">
+    <img src="{% static 'images/logo-document.svg' %}">
   </div>
   <div
       style="float:right">{{ order.created }}<br>{% trans 'Order' context 'Invoice header' %} #{{ order.id }}
diff --git a/templates/dashboard/order/pdf/packing_slip.html 
@@ -10,7 +10,7 @@
 <body>
 <header>
   <div style="float:left">
-    <img src="{% static '/images/logo-document.svg' %}">
+    <img src="{% static 'images/logo-document.svg' %}">
   </div>
   <div
       style="float:right">{{ order.created }}<br>{% trans "Order ID:" context "Packing slip header" %} {{ order.id }}