Django - serving a SPA from a static folder
Our django server is our API as well as our base of operations. I am working on improving our operating bases by writing a Vue SPA that is slowly replacing existing operating systems.
I'm a proponent and a little lost in the intricacies of Django config. Can anyone suggest a reasonable solution to this problem?
I would like the application to be served from a static folder and install:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, '../console/dist'),
)
This works and I can see my code when I view the source, but only at http: // localhost: 8000 / static / console / index.html
1) it won't work because as a SPA, Vue requires routing control. From the Django side, how can I use /static/console/*
my Vue app? At the end of Vue, what do I need to configure in Webpack and Vue-router?
2) even though I can see my compiled application source, I get errors:
Creating Application Cache with manifest http://localhost:8000/static/appcache/manifest.appcache
index.html:1 Application Cache Checking event
index.html:1 Application Cache Downloading event
index.html:1 Application Cache Progress event (0 of 7) http://localhost:8000/favicon.ico
index.html:1 Application Cache Error event: Resource fetch failed (4) http://localhost:8000/favicon.ico
index.html:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
which is weird because it http://localhost:8000/favicon.ico
is a working URL. I have a feeling this is a Webpack issue.
What are my options?
source to share
I did this for an Angular2 app with Django (it works without issue) - I think it can help you.
urls.py:
# catch-all pattern for compatibility with the Angular routes
url(r'^(?P<path>.*)/$', views.index),
url(r'^$', views.index),
views.py
def index(request, path=''):
"""
Renders the Angular2 SPA
"""
return render(request, 'index.html')
index.html
{% load staticfiles %}
...some other stuff...
<app-root>Loading... </app-root>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/materialize.min.js'%}"></script>
<!-- Angular app -->
<script type="text/javascript" src="{% static 'js/app/inline.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js/app/vendor.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js/app/main.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js/app/scripts.bundle.js' %}"></script>¸
settings.py
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR],
'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',
],
},
},
]
My index.html is stored in the templates directory, my js app files are stored in static / js / app.
source to share