Add static assets to nginx

back/package.json

@@ -10,8 +10,8 @@
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
-    "start:dev": "nest start --watch",
-    "start:debug": "nest start --debug --watch",
+    "start:dev": "nest start --watch --preserveWatchOutput",
+    "start:debug": "nest start --debug --watch --preserveWatchOutput",
     "start:prod": "node dist/main",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",

docker-compose.dev.yml

@@ -40,13 +40,14 @@ services:
       retries: 5
     ports:
       - "5432:5432"
+
   front:
     build:
       context: ./front
       dockerfile: Dockerfile.dev
     environment:
       - SCOROMETER_URL=http://scorometer:6543/
-      - NGINX_PORT=80
+      - NGINX_PORT=4567
     ports:
       - "19006:19006"
     volumes:
@@ -55,3 +56,19 @@ services:
       - "back"
     env_file:
       - .env
+
+  nginx:
+    image: nginx
+    environment:
+      - API_URL=http://back:3000
+      - SCOROMETER_URL=http://scorometer:6543
+      - FRONT_URL=http://front:19006
+      - PORT=4567
+    depends_on:
+      - back
+      - front
+    volumes:
+      - "./front/assets:/assets:ro"
+      - "./front/nginx.conf.template.dev:/etc/nginx/templates/default.conf.template:ro"
+    ports:
+      - "4567:4567"

docker-compose.yml

@@ -35,11 +35,7 @@ services:
       retries: 5
 
   front:
-    build:
-      context: ./front
-      args:
-        - API_URL=${API_URL}
-        - SCORO_URL=${SCORO_URL}
+    build: ./front
     environment:
       - API_URL=http://back:3000/
       - SCOROMETER_URL=http://scorometer:6543/

front/Dockerfile

@@ -22,6 +22,7 @@ RUN yarn tsc && expo build:web
 # Serve the app
 FROM nginx:1.21-alpine
 COPY --from=build /app/web-build /usr/share/nginx/html
-COPY nginx.conf.template /etc/nginx/conf.d/default.conf.template
+COPY ./assets/ /usr/share/nginx/html/assets/
+COPY nginx.conf.template /etc/nginx/templates/default.conf.template
 
-CMD envsubst '$API_URL $SCOROMETER_URL $NGINX_PORT' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'
+CMD nginx -g 'daemon off;'

front/components/Metronome.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export const Metronome = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {
+	const ref = useRef<HTMLAudioElement | null>(null);
+	useEffect(() => {
+		const int = setInterval(() => {
+			if (!ref.current) ref.current = new Audio("/assets/metronome.mp3");
+			ref.current.play();
+		}, 60000 / bpm);
+		return () => clearInterval(int);
+	}, []);
+	return null;
+};

front/nginx.conf.template

@@ -4,6 +4,10 @@ server {
 
 	index index.html;
 
+	location /assets {
+		alias ./assets;
+	}
+
 	location / {
 		try_files $uri $uri/ /index.html;
 	}

front/nginx.conf.template.dev

@@ -0,0 +1,29 @@
+server {
+	listen ${PORT};
+	root /usr/share/nginx/html;
+
+	index index.html;
+
+	location /assets {
+		alias /assets;
+	}
+
+	location / {
+		proxy_pass ${FRONT_URL}/;
+	}
+
+	location /api/ {
+		proxy_pass ${API_URL}/;
+	}
+
+	location /ws {
+		proxy_set_header Host $host;
+		proxy_set_header X-Forwarded-Scheme $scheme;
+		proxy_set_header X-Forwarded-Proto  $scheme;
+		proxy_set_header X-Forwarded-For    $remote_addr;
+		proxy_pass ${SCOROMETER_URL};
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection $http_connection;
+		proxy_http_version 1.1;
+	}
+}

front/views/PlayView.tsx

@@ -33,6 +33,7 @@ import { MIDIAccess, MIDIMessageEvent, requestMIDIAccess } from '@motiz88/react-
 import * as Linking from 'expo-linking';
 import url from 'url';
 import { PianoCanvasContext, PianoCanvasMsg, NoteTiming } from '../models/PianoGame';
+import { Metronome } from '../components/Metronome';
 
 type PlayViewProps = {
 	songId: number;
@@ -357,6 +358,8 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				{!partitionRendered && <LoadingComponent />}
 			</View>
 
+			<Metronome paused={paused} bpm={60} />
+
 			<Box
 				shadow={4}
 				style={{