Wire up

EugeneDae · May 25, 2020 · 7a3df2a · 7a3df2a
1 parent 9b8b68d
commit 7a3df2a
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 19 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,17 +1,14 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+{% extends "base.html" %}
+{% block html %}
+<!doctype html>
+<html {% block html_tag_attributes %}{{ block.super }}{% endblock %}>
+    <head>
+        {% block head %}{{ block.super }}{% endblock %}
+        <!-- html-webpack-inject will inject head assets below -->
+    </head>
+    <body {% block body_tag_attributes %}{{ block.super }}{% endblock %}>
+        {% block body %}{{ block.super }}{% endblock %}
+        <!-- html-webpack-inject will inject body assets below -->
+    </body>
 </html>
+{% endblock %}
diff --git a/client/src/router/index.js b/client/src/router/index.js
@@ -24,7 +24,7 @@ Vue.use(VueRouter)
 
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.BASE_URL,
+  //base: process.env.BASE_URL,
   routes
 })
 

diff --git a/client/vue.config.js b/client/vue.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+    publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : 'http://127.0.0.1:8080',
+    outputDir: '../server/static/dist',
+    indexPath: '../../templates/base-vue.html', // relative to outputDir!
+
+    chainWebpack: config => {
+        /*
+        The arrow function in writeToDisk(...) tells the dev server to write
+        only index.html to the disk.
+
+        The indexPath option (see above) instructs Webpack to also rename
+        index.html to base-vue.html and save it to Django templates folder.
+
+        We don't need other assets on the disk (CSS, JS...) - the dev server
+        can serve them from memory.
+
+        See also:
+        https://cli.vuejs.org/config/#indexpath
+        https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
+        */
+        config.devServer
+            .public('http://127.0.0.1:8080')
+            .hotOnly(true)
+            .headers({"Access-Control-Allow-Origin": "*"})
+            .writeToDisk(filePath => filePath.endsWith('index.html'));
+    }
+}
diff --git a/server/demo/settings.py b/server/demo/settings.py
@@ -54,7 +54,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -118,3 +118,7 @@
 # https://docs.djangoproject.com/en/3.0/howto/static-files/
 
 STATIC_URL = '/static/'
+
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'static')
+]
diff --git a/server/demo/urls.py b/server/demo/urls.py
@@ -14,8 +14,10 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, re_path
+from django.views.generic import TemplateView
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    re_path(r'^.*$', TemplateView.as_view(template_name='index.html'), name='index')
 ]
diff --git a/server/templates/base.html b/server/templates/base.html
@@ -0,0 +1,19 @@
+{% block html %}
+<!doctype html>
+<html {% block html_tag_attributes %}{% endblock %}>
+    <head>
+        {% block head %}
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- <link rel="icon" href="favicon.ico"> -->
+        <title>Django + Vue CLI + Webpack demo</title>
+        {% endblock %}
+    </head>
+    <body {% block body_tag_attributes %}{% endblock %}>
+        {% block body %}
+            {% block content %}{% endblock %}
+        {% endblock %}
+    </body>
+</html>
+{% endblock %}
diff --git a/server/templates/index.html b/server/templates/index.html
@@ -0,0 +1,13 @@
+{% extends "base-vue.html" %}
+
+{% block html_tag_attributes %}lang="en"{% endblock %}
+
+{% block content %}
+    <noscript>
+        <strong>Please enable JavaScript to continue.</strong>
+    </noscript>
+
+    <div id="app"></div>
+
+    <h3 style="margin-top: 4em; text-align: center; font-family: Arial, Helvetica, sans-serif;">Powered by Django!</h3>
+{% endblock %}