setup web server to handle audio requests in prod

Author: secondubly

src/api/index.ts

@@ -5,6 +5,7 @@ import fastify, {
     type FastifyRequest,
 } from 'fastify'
 import cors from '@fastify/cors'
+import FastifyStatic from '@fastify/static'
 import { MikroORM } from '@mikro-orm/sqlite'
 import fastifySSE from '@fastify/sse'
 import { Token } from '../lib/db/models/token.entity.js'
@@ -13,6 +14,8 @@ import { log } from '@lib/utils/logger.js'
 import { setupShutdownHandler } from '@lib/utils/utils.js'
 import type { SpotifyAccessToken } from '@lib/core/types.js'
 import redisClient from '@lib/utils/redis.js'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
 
 interface Client {
     id: number
@@ -51,6 +54,10 @@ const sendAudioUpdates = (data: string) => {
     })
 }
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const web = path.join(__dirname, '..', '..', 'build', 'web')
+
 export const routes = {
     async getTwitchToken(id: string, scopes: string) {
         const scopesArray = scopes ? scopes.split(',') : undefined
@@ -126,18 +133,33 @@ export const init = async (port: number) => {
     }
 
     await server.register(cors, {
-        origin: ['http://localhost:5000', 'http://localhost:5001'],
+        origin: (origin, cb) => {
+            if (!origin || /localhost:5000/.test(origin) || /localhost:5001/.test(origin) || /192.168.1.\d+/.test(origin)) {
+                cb(null, true)
+                return
+            }
+
+            cb(new Error('Not allowed'), false)
+        },
         methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
     })
 
+    await server.register(FastifyStatic, {
+        root: web
+    })
+
     await server.register(fastifySSE)
 
     // GET /ping - test endpoint
     server.get('/ping', async (_request, _reply) => {
         return 'pong\n'
     })
 
-    // GET /api/token/{id} - for retrieveing twitch api tokens
+    server.get('/', async (_request, reply) => {
+        return reply.sendFile('index.html')
+    })
+
+    // GET /api/token/{id} - for retrieving twitch api tokens
     server.get<{
         Params: RequestParams
         Querystring: TokenQueryString
@@ -252,6 +274,7 @@ export const init = async (port: number) => {
         reply.code(200).send({ message: 'spotify token updated successfully' })
     })
 
+    // GET /events - SSR listener for audio events
     server.get('/events', { sse: true }, async (_request, reply) => {
         reply.sse.keepAlive()
         await reply.sse.send({ data: 'Connected' })
@@ -270,6 +293,7 @@ export const init = async (port: number) => {
     })
 
     if (process.env.NODE_ENV === 'development') {
+        log.api.info('API server running in development mode')
         return server.listen({ port }, (err, address) => {
             if (err) {
                 log.api.error(err)

src/web/react/App.tsx

@@ -36,7 +36,7 @@ export default function MyApp() {
         const [connectionState, setConnectionState] = useState('CONNECTING')
 
         useEffect(() => {
-            const es = new EventSource('http://localhost:4000/events')
+            const es = new EventSource('/events')
 
             es.onopen = () => {
                 console.log('SSE Connection Opened')

vite.config.ts

@@ -13,8 +13,8 @@ export default defineConfig({
         port: 5000, // dev server will run on port 5000
         proxy: {
             // custom proxy rules for dev server, allows shorthand for fetch requests
-            '/api': {
-                target: 'http://localhost:4000',
+            '/events': {
+                target: 'http://localhost:4000/events',
                 changeOrigin: true,
             },
         },