From 7a3df2a8fe9bfa44ec4c6892cf4d8bbac903e589 Mon Sep 17 00:00:00 2001 From: Eugene / Dae Date: Mon, 25 May 2020 23:17:44 +0300 Subject: [PATCH] Wire up --- client/public/index.html | 29 +++++++++++++---------------- client/src/router/index.js | 2 +- client/vue.config.js | 27 +++++++++++++++++++++++++++ server/demo/settings.py | 6 +++++- server/demo/urls.py | 4 +++- server/templates/base.html | 19 +++++++++++++++++++ server/templates/index.html | 13 +++++++++++++ 7 files changed, 81 insertions(+), 19 deletions(-) create mode 100644 client/vue.config.js create mode 100644 server/templates/base.html create mode 100644 server/templates/index.html diff --git a/client/public/index.html b/client/public/index.html index 4123528..100ded5 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,17 +1,14 @@ - - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - -
- - +{% extends "base.html" %} +{% block html %} + + + + {% block head %}{{ block.super }}{% endblock %} + + + + {% block body %}{{ block.super }}{% endblock %} + + +{% endblock %} diff --git a/client/src/router/index.js b/client/src/router/index.js index 2368fee..aaec1b3 100644 --- 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 new file mode 100644 index 0000000..ae8ff2d --- /dev/null +++ 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 index 5639d72..cc7756f 100644 --- 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 index 90560ac..8a30660 100644 --- 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 new file mode 100644 index 0000000..ace4d8f --- /dev/null +++ b/server/templates/base.html @@ -0,0 +1,19 @@ +{% block html %} + + + + {% block head %} + + + + + Django + Vue CLI + Webpack demo + {% endblock %} + + + {% block body %} + {% block content %}{% endblock %} + {% endblock %} + + +{% endblock %} diff --git a/server/templates/index.html b/server/templates/index.html new file mode 100644 index 0000000..a3a314c --- /dev/null +++ b/server/templates/index.html @@ -0,0 +1,13 @@ +{% extends "base-vue.html" %} + +{% block html_tag_attributes %}lang="en"{% endblock %} + +{% block content %} + + +
+ +

Powered by Django!

+{% endblock %}