Adds frontend skeleton. Needs cleanup

src/server.ts

@@ -10,16 +10,16 @@ const app = express();
 expressWs(app);
 app.use(express.json());
 
-const router = express.Router();
+const apiRouter = express.Router();
 
 const mediaPlayer = new MediaPlayer();
 
-router.get("/playlist", async (req, res) => {
+apiRouter.get("/playlist", async (req, res) => {
     const playlist = await mediaPlayer.getPlaylist();
     res.send(playlist);
 });
 
-router.post("/playlist", async (req, res) => {
+apiRouter.post("/playlist", async (req, res) => {
     try {
         const { url } = req.body as PlaylistAppendRequest;
         await mediaPlayer.append(url);
@@ -30,13 +30,13 @@ router.post("/playlist", async (req, res) => {
     }
 });
 
-router.delete("/playlist/:index", async (req, res) => {
+apiRouter.delete("/playlist/:index", async (req, res) => {
     const { index } = req.params as { index: string };
     await mediaPlayer.deletePlaylistItem(parseInt(index));
     res.send(JSON.stringify({ success: true }));
 });
 
-router.post("/play", async (req, res) => {
+apiRouter.post("/play", async (req, res) => {
     try {
         await mediaPlayer.play();
         res.send(JSON.stringify({ success: true }));
@@ -46,7 +46,7 @@ router.post("/play", async (req, res) => {
     }
 });
 
-router.post("/pause", async (req, res) => {
+apiRouter.post("/pause", async (req, res) => {
     try {
         await mediaPlayer.pause();
         res.send(JSON.stringify({ success: true }));
@@ -56,7 +56,7 @@ router.post("/pause", async (req, res) => {
     }
 });
 
-router.get("/nowplaying", async (req, res) => {
+apiRouter.get("/nowplaying", async (req, res) => {
     const nowPlaying = await mediaPlayer.getNowPlaying();
     const pauseState = await mediaPlayer.getPauseState();
     const volume = await mediaPlayer.getVolume();
@@ -71,13 +71,13 @@ router.get("/nowplaying", async (req, res) => {
     }));
 });
 
-router.post("/volume", async (req, res) => {
+apiRouter.post("/volume", async (req, res) => {
     const { volume } = req.body as { volume: number };
     await mediaPlayer.setVolume(volume);
     res.send(JSON.stringify({ success: true }));
 });
 
-router.ws("/events", (ws, req) => {
+apiRouter.ws("/events", (ws, req) => {
     console.log(req.query);
     mediaPlayer.subscribe(ws);
 
@@ -86,7 +86,16 @@ router.ws("/events", (ws, req) => {
     });
 });
 
-app.use("/", router);
+// Serve static files for React app (after building)
+app.use(express.static("dist/frontend"));
+
+// Mount API routes under /api
+app.use("/api", apiRouter);
+
+// Serve React app for all other routes (client-side routing)
+app.get("*", (req, res) => {
+    res.sendFile("dist/frontend/index.html", { root: "." });
+});
 
 app.listen(3000, () => {
     console.log("Server is running on port 3000");