Added SSR (server-side rendering)

{{cookiecutter.slug}}/backend/{{cookiecutter.slug}}/index.py

@@ -2,11 +2,16 @@
 from django.http import HttpRequest, HttpResponse
 from django.contrib.staticfiles import finders
 from django.views.decorators.csrf import ensure_csrf_cookie
-import mimetypes
+
 
 @ensure_csrf_cookie
 def index(request: HttpRequest):
-    """ Thin wrapper for the static index.html that adds the CSRF cookie."""
+    """Thin wrapper for the static index.html that adds the CSRF cookie."""
     language = request.LANGUAGE_CODE
+    page = request.path[1:].split("/", 1)[0]
+    # pre-rendered version available?
+    location = finders.find(path.join(language, page, "index.html"))
+    if not location:
+        location = finders.find(path.join(language, "index.html"))
 
-    return HttpResponse(content=open(finders.find(path.join(language, 'index.html'))))
+    return HttpResponse(content=open(location))

{{cookiecutter.slug}}/bootstrap.py

@@ -221,6 +221,7 @@ def activate_frontend():
         Command(
             'Creating project',
             ['yarn', 'ng', 'new', project_name, '--prefix={{cookiecutter.app_prefix}}',
+                '--ssr',
                 '--skip-git=true',
                 '--skip-install=true',
                 '--package-manager=yarn',

{{cookiecutter.slug}}/collect.py

@@ -14,7 +14,11 @@
 
 ALLOWED_HOSTS = ['localhost', '127.0.0.1', '::1']
 
+{% if cookiecutter.frontend == "angular" %}
+STATICFILES_DIRS = [op.join(here, 'frontend', 'dist', 'browser')]
+{% else %}
 STATICFILES_DIRS = [op.join(here, 'frontend', 'dist')]
+{% endif %}
 
 STATIC_ROOT = op.join(here, 'static')
 

{{cookiecutter.slug}}/frontend.angular/src/app/app.config.ts

@@ -1,4 +1,5 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
 import { provideHttpClient, withXsrfConfiguration } from '@angular/common/http';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -15,6 +16,13 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(withXsrfConfiguration({
             cookieName: 'csrftoken',
             headerName: 'X-CSRFToken'
-        }))
+        })),
+        // The language is used as the base_path for finding the right
+        // static-files. For example /nl/static/main.js
+        // However the routing is done from a base path starting from
+        // the root e.g. /home
+        // The server should then switch index.html based on a language
+        // cookie with a fallback to Dutch e.g. /nl/static/index.html
+        { provide: APP_BASE_HREF, useValue: '/' }
     ]
 };

{{cookiecutter.slug}}/frontend.angular/src/app/menu/menu.component.ts

@@ -23,14 +23,17 @@ export class MenuComponent implements OnInit {
     faGlobe = faGlobe;
     faSync = faSync;
 
-    // use the target languages for displaying the respective language names
+    /**
+     * Use the target languages for displaying the respective language names
+     */
     languages?: LanguageInfo['supported'];
 
     constructor(
         @Inject(LOCALE_ID) private localeId: string,
         private ngZone: NgZone,
         private languageService: LanguageService) {
-        const isDesktop = window.matchMedia("screen and (min-width: 1024px)").matches
+        // Window is undefined on the server
+        const isDesktop = typeof window !== "undefined" ? window.matchMedia("screen and (min-width: 1024px)").matches : true;
         this.burgerShow = isDesktop ? 'show' : 'hide';
         this.currentLanguage = this.localeId;
     }