Serve vue index page in development directly from vue

client/vite.config.ts

@@ -30,13 +30,5 @@ export default ({mode}) => {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
       },
     },
-    server: {
-      proxy: {
-        '^.*': process.env.VITE_PROXY_TARGET_BASE,
-        '/sso': process.env.VITE_PROXY_TARGET_BASE,
-        '/api': process.env.VITE_PROXY_TARGET_BASE,
-        '/todo': process.env.VITE_PROXY_TARGET_BASE,
-      }
-    },
   })
 }

server/config/settings/base.py

@@ -201,6 +201,8 @@ MEDIA_ROOT = str(APPS_DIR / "media")
 # https://docs.djangoproject.com/en/dev/ref/settings/#media-url
 MEDIA_URL = "/media/"
 
+IT_SERVE_VUE = env.bool("IT_SERVE_VUE", DEBUG)
+IT_SERVE_VUE_URL = env("IT_SERVE_VUE_URL", 'http://localhost:3000')
 
 # WAGTAIL
 # ------------------------------------------------------------------------------

server/config/urls.py

@@ -5,26 +5,25 @@ from django.contrib import admin
 from django.contrib.auth import views as auth_views
 from django.contrib.auth.decorators import user_passes_test
 from django.contrib.staticfiles.urls import staticfiles_urlpatterns
-from django.urls import include, path
+from django.urls import include, path, re_path
 from django.views import defaults as default_views
-from django.views.generic import TemplateView
 from drf_spectacular.views import SpectacularAPIView, SpectacularSwaggerView
+from grapple import urls as grapple_urls
 from ratelimit.exceptions import Ratelimited
 from rest_framework.authtoken.views import obtain_auth_token
+from wagtail.admin import urls as wagtailadmin_urls
+from wagtail.core import urls as wagtail_urls
+from wagtail.documents import urls as wagtaildocs_urls
+
 from vbv_lernwelt.core.middleware.auth import django_view_authentication_exempt
 from vbv_lernwelt.core.views import (
     rate_limit_exceeded_view,
     permission_denied_view,
-    check_rate_limit,
+    check_rate_limit, vue_home,
 )
-from wagtail.admin import urls as wagtailadmin_urls
-from wagtail.core import urls as wagtail_urls
-from wagtail.documents import urls as wagtaildocs_urls
-from grapple import urls as grapple_urls
 from .api import api_router
 
 
-
 def raise_example_error(request):
     """
     raise error to check if it gets logged
@@ -36,7 +35,6 @@ def raise_example_error(request):
 
 # fmt: off
 urlpatterns = [
-    path("", django_view_authentication_exempt(TemplateView.as_view(template_name="pages/home.html")), name="home"),
     path('admin/raise_error/', user_passes_test(lambda u: u.is_superuser, login_url='/login/')(raise_example_error), ),
     path(settings.ADMIN_URL, admin.site.urls),
     path("checkratelimit/", check_rate_limit),
@@ -106,3 +104,8 @@ if settings.DEBUG:
         import debug_toolbar
 
         urlpatterns = [path("__debug__/", include(debug_toolbar.urls))] + urlpatterns
+
+
+# serve everything else via the vue app
+urlpatterns += [re_path(r'^.*$', vue_home, name='home')]
+

server/vbv_lernwelt/core/views.py

@@ -1,11 +1,31 @@
 # Create your views here.
+import requests
+from django.conf import settings
 from django.http import JsonResponse, HttpResponse
 from django.shortcuts import render
+from django.views.decorators.csrf import ensure_csrf_cookie
 from ratelimit.decorators import ratelimit
 
 from vbv_lernwelt.core.middleware.auth import django_view_authentication_exempt
 
 
+@django_view_authentication_exempt
+@ensure_csrf_cookie
+def vue_home(request):
+    if settings.IT_SERVE_VUE:
+        try:
+            res = requests.get(f'{settings.IT_SERVE_VUE_URL}{request.get_full_path()}')
+            headers = res.headers
+            content_type = headers.get('content-type', 'text/html')
+            return HttpResponse(res.text, content_type=content_type)
+        except Exception as e:
+            print(f'Can not connect to vue dev server at {settings.IT_SERVE_VUE_URL}:', e)
+            return
+
+    # render index.html from `npm run build`
+    return render(request, 'index.html', {})
+
+
 def permission_denied_view(request, exception):
     return render(request, "403.html", status=403)
 

server/vbv_lernwelt/templates/pages/home.html

@@ -1,108 +0,0 @@
-{% extends "base.html" %}
-
-
-{% block content %}
-<div class="container mx-auto">
-  <div class="flex justify-between flex-col md:flex-row">
-    <img class="w-full md:w-2/4"
-         src="https://www.thezebra.com/insurance-news/wp-content/uploads/2016/01/Tree-fallen-on-car-1024x682.jpeg"/>
-    <div class="w-full md:w-2/4 flex flex-col justify-center p-4 md:p-16">
-      <h2 class="text-xl md:text-3xl font-bold">Machen Sie hier eine Selbstevaluation</h2>
-      <p class="my-4 text-xl">Hier steht noch etwas mehr Text</p>
-    </div>
-  </div>
-</div>
-
-<div class="container mx-auto bg-blue-100 border-t-2 border-gray-900">
-  <div class="p-8 flex flex-col md:flex-row">
-
-    <div class="w-full md:w-1/2 xl:w-1/3 px-4">
-      <div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
-        <img
-          src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-01.jpg"
-          alt="image"
-          class="w-full"
-        />
-        <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
-          <a
-            href="javascript:void(0)"
-            class="
-                     inline-block
-                     py-2
-                     px-7
-                     border border-[#E5E7EB]
-                     rounded-full
-                     text-base text-body-color
-                     font-medium
-                     hover:border-primary hover:bg-primary hover:text-white
-                     transition
-                     "
-          >
-            Kurs X
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full md:w-1/2 xl:w-1/3 px-4">
-      <div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
-        <img
-          src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-02.jpg"
-          alt="image"
-          class="w-full"
-        />
-        <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
-          <a
-            href="javascript:void(0)"
-            class="
-                     inline-block
-                     py-2
-                     px-7
-                     border border-[#E5E7EB]
-                     rounded-full
-                     text-base text-body-color
-                     font-medium
-                     hover:border-primary hover:bg-primary hover:text-white
-                     transition
-                     "
-          >
-            Kurs Y
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full md:w-1/2 xl:w-1/3 px-4">
-      <div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
-        <img
-          src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-03.jpg"
-          alt="image"
-          class="w-full"
-        />
-        <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
-          <a
-            href="javascript:void(0)"
-            class="
-                     inline-block
-                     py-2
-                     px-7
-                     border border-[#E5E7EB]
-                     rounded-full
-                     text-base text-body-color
-                     font-medium
-                     hover:border-primary hover:bg-primary hover:text-white
-                     transition
-                     "
-          >
-            Kurs Z
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <p class="p-8 text-right">weitere Kurse entdecken und buchen</p>
-
-  <div class="border-t-2 border-blue-400 m-8 p-8"></div>
-</div>
-
-{% endblock %}