uwsgi static files loading error form django (react and webpack)

Question

My app consists of django and react, which at the end is bundled to static (.js) file. My goal is to setup a nginx for it, but for now I just want to run in uwsgi to see if it works. Aaaaand it does not work at all. I belive there is a issue with loading this bundle file which webpack is compiling.

Connection to uwsgi works, server is up and running, but when connecting to 127.0.0.1:8080 I get (in Mozilla):

The resource from “http://127.0.0.1:8080/static/frontend/main.js” 
was blocked due to MIME type (“text/html”) mismatch 
(X-Content-Type-Options: nosniff).

# and another

GET http://127.0.0.1:8080/static/frontend/main.js

HTTP/1.1 404 Not Found
Content-Type: text/html
X-Frame-Options: DENY
Content-Length: 3277
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Vary: Origin

Similar topic I found: Difference between static STATIC_URL and STATIC_ROOT on Django

and this: Django + React The resource was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

But messing with python manage.py collectstatic resolved nothing.

I have this lines of code to manage static files:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join('/app/label_it/front/static/frontend/')

And this is how I start my uwsgi connection:

python manage.py collectstatic --no-input
uwsgi --http 0.0.0.0:8080 --master --enable-threads --module label_it.wsgi

Beside collectstatic I've tried messing with <script src"static_file_path"></script> this static path with:

<script src="../../static/frontend/main.js"></script>

# and

<script src="{% static "frontend/main.js" %}"></script>

Which result in nothing.

Any clues appreciated !

EDIT:

My file structure:

Answer 1

Ok I just did some testing with my own server and django project to confirm my suspicion and I've come to the following conclusion: This error will happen if the path to the static file doesn't exist. Meaning that uwsgi cannot find this main.js file with the settings you have.

My suggestion would be to do the following to ensure your static files are being served correctly in a way that django knows where to look.

By default django searches inside each installed app for a static folder to find static assets. Because your project is not setup that way you have to specify additional directories where static files live.

This is what STATICFILES_DIRS is for.

In your settings.py put the following

STATICFILES_DIRS  = [
    BASE_DIR / 'label_it/front/static'
] 

This will make all files inside label_it/front/static discoverable to django.

Now this means that

<script src="{% static "frontend/main.js" %}"></script>

will (hopefully) work.

additionally, remember to include your static urls in your urls.py file if you haven't already.

urls.py

from django.contrib.staticfiles.urls import staticfiles_urlpatterns


urlpatterns = [
    ...
]

# static content urls
urlpatterns += staticfiles_urlpatterns()

---

Sidenote: STATIC_ROOT is intended to be the location where all static files will be collected to when you run python manage.py collectstatic.

As such it should be an empty directory, preferably in the root of your django project.

STATIC_ROOT = os.path.join(BASE_DIR, 'static_collected')

The name of the folder doesn't really matter and I've used static_collected as an example.

If you run the command hopefully you'll see all the files in label_it/front/static/ copied there.