fly deploy

Dockerfile

@@ -11,20 +11,21 @@ WORKDIR /app
 COPY . /app/
 
 RUN mv .env.vite .env
+RUN chmod +x /app/*.sh
 
 ARG GALV_API_BASE_URL
 ENV GALV_API_BASE_URL=$GALV_API_BASE_URL
 
-RUN ["/bin/sh", "-c", "./fix_base_path.sh"]
+RUN ["/bin/sh", "-c", "/app/fix_base_path.sh"]
 
 RUN pnpm install
 
-RUN ["/bin/sh", "-c", "./inject_envvars.sh"]
+#RUN ["/bin/sh", "-c", "/app/inject_envvars.sh"]
 
-RUN pnpm build
+RUN pnpm build:plain
 
 FROM nginx:alpine
-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html
 COPY --from=build /app/nginx.conf.template /etc/nginx/conf.d/custom.conf
 
 EXPOSE 80

Dockerfile_cypress

@@ -0,0 +1,17 @@
+# SPDX-License-Identifier: BSD-2-Clause
+# Copyright  (c) 2020-2023, The Chancellor, Masters and Scholars of the University
+# of Oxford, and the 'Galv' Developers. All rights reserved.
+
+FROM cypress/base:20.9.0
+
+RUN mkdir -p /app
+WORKDIR /app
+COPY . /app
+
+RUN rm -rf /app/node_modules /app/.pnpm-store
+
+RUN npm install -g pnpm
+
+RUN mv .env.vite .env
+
+RUN pnpm install

README.md

@@ -60,6 +60,24 @@ The unit tests are run with Jest and the end-to-end tests are run with Cypress.
 
 Unit tests are kept to a minimum, and used to ensure that novel logic in the components works as expected.
 
+To run the unit tests, run the following command:
+
+```bash
+docker-compose up frontend_test
+```
+
 ### End-to-end tests
 
 End-to-end tests are used to ensure that the frontend works as expected from the user's perspective.  They are run with Cypress.
+
+To run the end-to-end tests, run the following command:
+
+```bash
+docker-compose up frontend_test_e2e
+```
+
+To develop end-to-end tests, you can use the Cypress GUI.  To do this, run the following command:
+
+```bash
+pnpm run cypress:open
+```

docker-compose.yaml

@@ -57,3 +57,23 @@ services:
       - .env.vite
     restart: "on-failure"
     command: "pnpm test"
+
+  frontend_test_e2e:
+    build:
+      context: .
+      dockerfile: Dockerfile_cypress
+    env_file:
+      - .env.vite
+    restart: "on-failure"
+    command: "pnpm cypress:e2e"
+
+  frontend_build:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        GALV_API_BASE_URL: "http://localhost:8082"
+    env_file:
+      - .env.vite
+    restart: "no"
+    command: "tail -F anything"

fly.toml

@@ -0,0 +1,28 @@
+# fly.toml app configuration file generated for galv-frontend-dev on 2024-01-02T00:30:59Z
+#
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app = "galv-frontend-dev"
+primary_region = "lhr"
+
+[env]
+  GALV_API_BASE_URL = "https://galv-backend-dev.fly.dev"
+
+[build]
+
+[build.args]
+  GALV_API_BASE_URL = "https://galv-backend-dev.fly.dev"
+
+[http_service]
+  internal_port = 80
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ["app"]
+
+[[vm]]
+  cpu_kind = "shared"
+  cpus = 1
+  memory_mb = 1024

nginx.conf.template

@@ -0,0 +1,31 @@
+# SPDX-License-Identifier: BSD-2-Clause
+# Copyright  (c) 2020-2023, The Chancellor, Masters and Scholars of the University
+# of Oxford, and the 'Galv' Developers. All rights reserved.
+
+error_log  /var/log/nginx/error.log warn;
+
+server {
+    listen       80;
+    server_name  localhost;
+
+    client_max_body_size 100M;
+
+    access_log  /var/log/nginx/access.log  main;
+    error_log /var/log/nginx/error.log debug;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+				# Serve index for any route that doesn't have a file extension (e.g. /devices)
+				# https://stackoverflow.com/a/45599233
+        try_files $uri $uri/ /index.html;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

package.json

@@ -52,6 +52,7 @@
   "scripts": {
     "dev": "vite",
     "start": "vite",
+    "build:plain": "vite build",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -60,6 +61,6 @@
     "styleguide:build": "styleguidist build",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "cypress:e2e": "start-server-and-test start http://localhost:3000 cypress:run"
+    "cypress:e2e": "start-server-and-test 'pnpm start --port 80' http://localhost 'pnpm cypress:run'"
   }
 }

vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    commonjsOptions: { transformMixedEsModules: true } // Change
+  }
+})