I am trying to build a web-app with Django with a front-end made with Vue.js.

Here is how my dir is organized –

reco_system_app/urls.py
reco_system_app/settings.py

recommender/urls.py
recommender/views.py

vueapp/
static/
templates/

reco_system_app/urls.py is

from django.contrib import admin
from recommender.views import home
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('recommender.urls')),
    path('', home, name='home'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

settings.py has these two set

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

recommender/urls.py is

from django.urls import path
from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('movies/', views.get_random_movies, name='get_random_movies'),
    path('recommend/', views.get_recommendations, name='get_recommendations'),
]

view.py is

import random
from django.shortcuts import render
from django.views.generic import TemplateView
from django.http import JsonResponse

class IndexView(TemplateView):
    template_name = 'index.html'

def home(request):
    return render(request, "index.html")

def get_random_movies(request):
    # Simulate a list of movies
    sample_movies = ["The Shawshank Redemption", "The Godfather", "The Dark Knight", "Pulp Fiction", "The Lord of the Rings: The Return of the King"]
    # Return a random sample of 5 movies
    movies = random.sample(sample_movies, 3)
    return JsonResponse({"movies": movies})

def get_recommendations(request):
    # For simplicity, assume the movies are passed as a comma-separated string in the query parameter
    selected_movies = request.GET.get('movies', '')
    selected_movies_list = selected_movies.split(',')

    # Simulate recommendations by shuffling the input movies
    random.shuffle(selected_movies_list)
    recommendations = selected_movies_list  # In a real scenario, you'd query VertexAI here

    return JsonResponse({"recommendations": recommendations})

My front-end made with Vue.js is working fine. When I run npm run serve, I am able to see the front-end that I have created.

The Django server is also working I think, when I run python manage.py runserver 0.0.0.0:8000, the server is running and I can do curl http://0.0.0.0:8000/api/movies/ to get a list of movies.

But Django is not opening up the front-end webpage that I want to see. When I inspect the page, I can see the errors,

The resource from “http://0.0.0.0:8000/js/app.d193da3f.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:8000/js/chunk-vendors.5c940eb9.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I have made sure that the files that I build with npm run build are in the right locations. But I am still getting the error.

I am running the whole thing inside a docker container with

docker run -it --entrypoint /bin/sh -v ${PWD}:/workspace -p 8080:8080 -p 8000:8000 recommendation

Both the ports are exposed in the Dockerfile as well. What could be going wrong?