Frontend

Setup & configuration

Vue.js/Vuetify 3 are used to develop the frontend. The build process is fully integrated in the Vite environment, which creates the website content at ~/docker/frontend/app/dist. To support the build process of a version a shell script ~/docker/frontend/frontend-build.sh was created which executes the necessary steps automatically.

To serve the frontend we use a standard nginx docker container and mount the ~/docker/frontend/app/dist path into it. The nginx.conf is located in the frontend's home directory and also mounted into the container.

In the nginx.conf file we add no-cache headers to certain files to allow an immediate refresh when a new version is deployed:

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
        include       /etc/nginx/mime.types;
        default_type  application/octet-stream;

        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';

        access_log  /var/log/nginx/access.log  main;                                                                                                                                                                                         
        sendfile        on;
        #tcp_nopush     on;

        keepalive_timeout  65;

        #gzip  on;

        server {
            listen 80;
            server_name klharriettes.org;
            root /usr/share/nginx/html;

            location/{
                try_files $uri $uri/ /index.html;
                add_header Cache-Control "no-cache, must-revalidate" always;
            }

            # Bypass cache for service worker
            location = /sw.js {
                add_header Content-Type application/javascript;
                add_header Cache-Control "no-cache";
                try_files $uri =404;
            }

            # Bypass cache for manifest.webmanifest
            location = /manifest.webmanifest {
                add_header Cache-Control "no-cache";
                try_files $uri =404;
            }             
            
            location /assets/ {
                expires 1y;
            }

        }

        include /etc/nginx/conf.d/*.conf;
    }

Environment variables

WARNING

In order to be picked up properly by the Vite build process, variable names must start with VITE_

Environment variables are located in ~/docker/frontend/app/.env:

• VITE_BACKEND_PATH:

  The URI where to find the backend API

• VITE_GOOGLE_MAPS_API_KEY:

  The Google Maps API key with the respective scope to display the runsites on the location map and the little map snippets for each location

• VITE_PIWIGO_PATH;

  The path where to find the Piwigo Image Gallery

• VITE_PIWIGO_USERNAME: The username of the Piwigo user accessing the Piwigo API

• VITE_PIWIGO_PASSWORD:

  The password of the Piwigo user accessing the Piwigo API

• VITE_WEEKS_TO_SHOW:

  The number of run cards shown in the Run gallery below the Hero Run

• VITE_CONTACT_PHONE:

  The contact number the WhatsApp button is pointing to on the "Run with us" page

• VITE_API_TOKEN:

  The authentication token for the Strapi API

• VITE_ENV:

  Environment type steers some internal functionality

• VITE_TURNSTILE_SITE_KEY:

  cloudflare's turnstile key for the respective turnstile setup

• VITE_TURNSTILE_VERIFICATION_URL:

  The relative path to the cloudflare Worker responsible for verifying the turnstile token.

Deployment

To deploy a new version of the frontend the following steps need to be executed:

• the source code must be pulled from its GitHub repository
• the Vite managed build process needs to be triggered using the frontend-build.sh script.
• the nginx docker container should be restarted (optional)

git -C pull docker/frontend/app pull origin production
docker/frontend/frontend-build.sh
docker restart frontend

During this process the website will be available except for a few seconds when the new src/dist folder`is picked up.

With the first deployment of the fully blown Progressive Web App an APP_VERSION was introduced in the frontend. For further details see there

DANGER

It is strongly recommended purging the cloudflare cache after every deployment, in order to avoid any caching issues

INFO

Besides the GitHub repository, no further backup is required for the frontend component