wip serving quasar application from templates for cypress testing in gitlab ci

Author: briancaffey

backend/backend/settings/base.py

@@ -116,7 +116,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [

backend/backend/settings/gitlab-ci.py

@@ -19,6 +19,21 @@
     },
 }
 
-STATIC_URL = '/static/'
+MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'social_django.middleware.SocialAuthExceptionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    # disabled to simplify testing
+    # 'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'core.middleware.SubdomainMiddleware',
+]
+
+
+STATIC_URL = '/'
 
 STATIC_ROOT = '/static/'

backend/backend/urls.py

@@ -14,11 +14,13 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.conf import settings
+from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import include, path
 
+from core.views import index_view
+
 urlpatterns = [
-    path('', include('core.urls',)),
     path('admin/', admin.site.urls),
     path('api/', include('accounts.urls')),
     path('api/', include('core.urls'))
@@ -27,6 +29,7 @@
 
 if settings.DEBUG:
     import debug_toolbar # noqa
-    urlpatterns = [
+    urlpatterns = urlpatterns + [
+        path('', index_view, name='index'),
         path('admin/__debug__/', include(debug_toolbar.urls)),
-    ] + urlpatterns
+    ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

backend/core/views.py

@@ -6,6 +6,13 @@
 
 from core.tasks import debug_task, send_test_email_task
 
+
+from django.views.generic import TemplateView
+from django.views.decorators.cache import never_cache
+
+# Serve Vue Application via template for GitLab CI
+index_view = never_cache(TemplateView.as_view(template_name='index.html'))
+
 r = settings.REDIS
 
 

backend/scripts/dev/start_ci.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-python3 manage.py collectstatic --no-input
+# python3 manage.py collectstatic --no-input
 python3 manage.py makemigrations
 python3 manage.py migrate --no-input
 python3 manage.py create_default_user

backend/scripts/prod/Dockerfile

@@ -1,10 +1,41 @@
-FROM python:3.7
+# build stage that generates quasar assets
+FROM node:10-alpine as build-stage
+ENV HTTP_PROTOCOL http
+ENV WS_PROTOCOL ws
+ENV DOMAIN_NAME localhost:8000
+WORKDIR /app/
+COPY quasar/package.json /app/
+RUN npm cache verify
+RUN npm install -g @quasar/cli
+RUN npm install --progress=false
+COPY quasar /app/
+RUN quasar build -m pwa
+
+# this image is tagged and pushed to the production registry (such as ECR)
+FROM python:3.7 as production
 ENV PYTHONUNBUFFERED 1
 ENV PYTHONDONTWRITEBYTECODE 1
 RUN mkdir /code
 WORKDIR /code
-COPY requirements/base.txt /code/requirements/
+COPY backend/requirements/base.txt /code/requirements/
 RUN python3 -m pip install --upgrade pip
 RUN pip install -r requirements/base.txt
-COPY scripts/prod/start_prod.sh scripts/dev/start_ci.sh scripts/dev/start_asgi.sh /
-ADD . /code/
+COPY backend/scripts/prod/start_prod.sh \
+    backend/scripts/dev/start_ci.sh \
+    backend/scripts/dev/start_asgi.sh \
+    /
+ADD backend /code/
+
+# this stage is used for integration testing
+FROM production as gitlab-ci
+# cypress dependencies
+# RUN apt-get -qq update
+# RUN apt-get -qq install -y xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+# add static files from build
+COPY --from=build-stage /app/dist/pwa/index.html /code/templates/
+# COPY --from=build-stage /app/dist/pwa /code/static
+COPY --from=build-stage /app/dist/pwa /static
+# index.html is listed here
+RUN ls /code/templates/ -al
+# also tried this, but still nothing in the templates directory when the container is started
+RUN cp /static/index.html /code/templates/index.html

backend/templates/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

compose/test.yml

@@ -0,0 +1,71 @@
+version: '3.7'
+
+services:
+  postgres:
+    container_name: postgres
+    image: postgres
+    networks:
+      - main
+    ports:
+      - "5432:5432"
+    volumes:
+      - pg-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_PASSWORD=${RDS_PASSWORD}
+      - POSTGRES_USER=${RDS_USERNAME}
+      - POSTGRES_DB=${RDS_DB_NAME}
+
+  redis:
+    image: redis:alpine
+    volumes:
+      - redis-data:/data
+    container_name: redis
+    networks:
+      - main
+
+
+  backend: &backend
+    container_name: backend
+    build:
+      context: ../
+      dockerfile: backend/scripts/prod/Dockerfile
+    ports:
+      - "8000:8000"
+    command: /start_ci.sh
+    volumes:
+      - django-static:/code/static
+    networks:
+      - main
+    environment:
+      - SECRET_KEY=${SECRET_KEY}
+      - DEBUG=True
+      - DJANGO_EMAIL_HOST=${DJANGO_EMAIL_HOST}
+      - DJANGO_EMAIL_PORT=${DJANGO_EMAIL_PORT}
+      - RDS_PASSWORD=${RDS_PASSWORD}
+      - RDS_USERNAME=${RDS_USERNAME}
+      - RDS_DB_NAME=${RDS_DB_NAME}
+      - CELERY_BROKER_URL=${CELERY_BROKER_URL}
+      - CELERY_RESULT_BACKEND=${CELERY_RESULT_BACKEND}
+      - DJANGO_SETTINGS_MODULE=backend.settings.gitlab-ci
+      - GITHUB_KEY=${GITHUB_KEY}
+      - GITHUB_SECRET=${GITHUB_SECRET}
+      - GOOGLE_OAUTH2_KEY=${GOOGLE_OAUTH2_KEY}
+      - GOOGLE_OAUTH2_SECRET=${GOOGLE_OAUTH2_SECRET}
+
+      # # for Quasar
+      # - HTTP_PROTOCOL=http
+      # - WS_PROTOCOL=ws
+      # - DOMAIN_NAME=${DOMAIN_NAME}
+    depends_on:
+      - postgres
+      - redis
+
+
+volumes:
+  pg-data:
+  django-static:
+  redis-data:
+
+networks:
+  main:
+    driver: bridge

quasar/quasar.conf.js

@@ -7,7 +7,6 @@ module.exports = function(ctx) {
     // --> boot files are part of "main.js"
     boot: ["i18n", "axios", "components", "websockets"],
     css: ["app.styl"],
-
     extras: [
       // "ionicons-v4",
       // "mdi-v3",
@@ -73,7 +72,7 @@ module.exports = function(ctx) {
             ),
             WS_PING_PONG: JSON.stringify(
               `${process.env.WS_PROTOCOL}://${
-                process.env.LOCAL_IP_ADDRESS
+                process.env.DOMAIN_NAME
               }/ws/ping-pong/`
             ),
             GITHUB_KEY: JSON.stringify(process.env.GITHUB_KEY),
@@ -82,6 +81,7 @@ module.exports = function(ctx) {
       scopeHoisting: true,
       useNotifier: false,
       vueRouterMode: "history",
+      // comments
       // vueCompiler: true,
       // gzip: true,
       // analyze: true,

quasar/src/pages/About.vue

@@ -4,7 +4,7 @@
       <h4>About this site...</h4>
       <p>
         This site is built with Django, Vue, Postgres, nginx, docker, and other
-        technologies.
+        technologies...
       </p>
     </q-page>
   </q-page-container>