How do I deploy my Vue js SPA into my Django server?

Question

I'm currently following this guide on integrating my Vue.js frontend with my Django backend: https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70

For now, I just want to be able to render the default Vue.js boilerplate index.html page into my Django server at http://localhost:8000/

I used django-admin startproject django-vue-template to initialize Django and within the newly created django-vue-template folder, I ran vue create . to initialize Vue CLI. I then ran npm run build, so my project folder tree looks like this now.

I also added these changes to my settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'dist')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, 'dist/static'),
]

as well as these changes to my urls.py:

urlpatterns = [
  path('admin/', admin.site.urls),
  url(r'^$', TemplateView.as_view(template_name='index.html')),
]

According to the guide, I should already be seeing the Vue.js index.html page on http://localhost:8000/ when I run python manage.py runserver but nothing renders except a white screen and when I check the console, I'm bombarded with error 404s as shown here.

Django seems to be able to locate my index.html, but it can't find and import the css and js files it needs to make its SPA functionality work.

Answer 1

You must configure it manually Make sure at the top of index.html must have :

{% load static %}

then all links looks like:

<script src="{% static "app.d34dcca9.js" %}"></script>

same as css files or images.