title: How do I deploy my Vue js SPA into my Django server?
body: <p>I'm currently following this guide on integrating my Vue.js frontend with my Django backend: <a href="https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70" rel="nofollow noreferrer">https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70</a></p>
  
  <p>For now, I just want to be able to render the default Vue.js boilerplate <a href="https://i.stack.imgur.com/ZAPyN.png" rel="nofollow noreferrer">index.html</a> page into my Django server at <a href="http://localhost:8000/" rel="nofollow noreferrer">http://localhost:8000/</a></p>
  
  <p>I used <code>django-admin startproject django-vue-template</code> to initialize Django and within the newly created django-vue-template folder, I ran <code>vue create .</code> to initialize Vue CLI. I then ran <code>npm run build</code>, so my project folder tree looks like <a href="https://i.stack.imgur.com/pknKe.png" rel="nofollow noreferrer">this</a> now.</p>
  
  <p>I also added these changes to my settings.py:</p>
  
  <pre><code>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'),
  ]
  </code></pre>
  
  <p>as well as these changes to my urls.py:</p>
  
  <pre><code>urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^$', TemplateView.as_view(template_name='index.html')),
  ]
  </code></pre>
  
  <p>According to the guide, I should already be seeing the Vue.js <a href="https://i.stack.imgur.com/ZAPyN.png" rel="nofollow noreferrer">index.html</a> page on <a href="http://localhost:8000/" rel="nofollow noreferrer">http://localhost:8000/</a> when I run <code>python manage.py runserver</code> but nothing renders except a white screen and when I check the console, I'm bombarded with error 404s as shown <a href="https://i.stack.imgur.com/7e310.png" rel="nofollow noreferrer">here</a>.</p>
  
  <p>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.</p>