Django serve index.html from dist folder generated by webpack and vue - django

Question

I'm using Vue + webpack with a Django backend for my webapp and I need to be able to serve files from the dist folder from Django when the user hits the root url '/'. The dist folder containing the static files from Vue + webpack has already been created, and I just need to know how to serve those files from Django. I disabled collectstatic on Heroku because all my files will be served from dist folder that was not generated by django.
I'm able to serve index.html from the dist folder but not the js and css files in there. The error i'm getting is /static/js/main.js not found
Here's what I have so far, but none of my attempts are working. I need some way to configure Django urlpatterns to serve the static files in the dist folder
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.template.context_processors.static',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_ROOT = os.path.join(BASE_DIR, '../dist')
STATIC_URL = '/dist/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../dist'),
]
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
urls.py
if settings.DEBUG is False:
urlpatterns += url(
urlpatterns += url(r'^$', generic.TemplateView.as_view(template_name='index.html')),
dist/
- index.html
- static
- js
- main.js
- css
- main.css