From b64035e2b0836731a6695d6a9a1d0b2eb1c7e767 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 16 May 2026 21:27:38 +0000 Subject: [PATCH 1/2] Initial plan From 3480eca02722b4c455af9a2a65102d5a70954486 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 16 May 2026 21:48:38 +0000 Subject: [PATCH 2/2] feat: migrate hugomeet and portfolio nx apps to vite targets Agent-Logs-Url: https://github.com/hcabel/web-monorepo/sessions/d285f036-fbc9-4af4-8065-06965a81a10a Co-authored-by: hcabel <49307497+hcabel@users.noreply.github.com> --- apps/hugomeet/index.html | 12 ++++ apps/hugomeet/project.json | 56 +++++++++++++---- apps/hugomeet/src/App.tsx | 27 ++++++++ .../hugomeet/src/components/Header/Header.tsx | 12 ++-- .../components/LandingPage/LandingPage.tsx | 10 +-- .../src/components/RoomPage/RoomPage.tsx | 10 +-- .../RoomPage/layers/preRoom/PreRoomLayer.tsx | 10 +-- .../RoomPage/layers/roomLayer/RoomLayer.tsx | 10 +-- .../src/components/RouteLifecycleHandler.tsx | 8 +-- apps/hugomeet/src/config.ts | 10 ++- apps/hugomeet/src/main.tsx | 21 +++++++ apps/hugomeet/src/types/assets.d.ts | 4 ++ apps/hugomeet/src/vite-env.d.ts | 10 +++ apps/hugomeet/tsconfig.json | 17 ++---- apps/hugomeet/vite.config.mts | 22 +++++++ apps/portfolio/index.html | 12 ++++ apps/portfolio/project.json | 61 +++++++++++++------ apps/portfolio/src/App.tsx | 31 ++++++++++ apps/portfolio/src/main.tsx | 10 +++ apps/portfolio/src/vite-env.d.ts | 9 +++ apps/portfolio/tsconfig.json | 18 ++---- apps/portfolio/vite.config.mts | 22 +++++++ 22 files changed, 318 insertions(+), 84 deletions(-) create mode 100644 apps/hugomeet/index.html create mode 100644 apps/hugomeet/src/App.tsx create mode 100644 apps/hugomeet/src/main.tsx create mode 100644 apps/hugomeet/src/types/assets.d.ts create mode 100644 apps/hugomeet/src/vite-env.d.ts create mode 100644 apps/hugomeet/vite.config.mts create mode 100644 apps/portfolio/index.html create mode 100644 apps/portfolio/src/App.tsx create mode 100644 apps/portfolio/src/main.tsx create mode 100644 apps/portfolio/src/vite-env.d.ts create mode 100644 apps/portfolio/vite.config.mts diff --git a/apps/hugomeet/index.html b/apps/hugomeet/index.html new file mode 100644 index 0000000..67bae49 --- /dev/null +++ b/apps/hugomeet/index.html @@ -0,0 +1,12 @@ + + + + + + HugoMeet + + +
+ + + diff --git a/apps/hugomeet/project.json b/apps/hugomeet/project.json index 3fceb3c..5e23603 100644 --- a/apps/hugomeet/project.json +++ b/apps/hugomeet/project.json @@ -9,30 +9,64 @@ ], "targets": { "build": { - "executor": "@nx/next:build", + "executor": "@nx/vite:build", "outputs": [ "{options.outputPath}" ], - "nextConfig": "apps/hugomeet/next.config.js", "options": { - "root": "apps/hugomeet", - "outputPath": "dist/apps/hugomeet" + "outputPath": "dist/apps/hugomeet", + "configFile": "apps/hugomeet/vite.config.mts" + }, + "configurations": { + "development": { + "mode": "development" + }, + "production": { + "mode": "production" + } + } + }, + "dev": { + "executor": "@nx/vite:dev-server", + "defaultConfiguration": "development", + "options": { + "buildTarget": "hugomeet:build" + }, + "configurations": { + "development": { + "buildTarget": "hugomeet:build:development" + }, + "production": { + "buildTarget": "hugomeet:build:production" + } } }, "serve": { - "executor": "@nx/next:server", + "executor": "@nx/vite:dev-server", "defaultConfiguration": "development", "options": { - "buildTarget": "hugomeet:build", - "dev": true + "buildTarget": "hugomeet:build" + }, + "configurations": { + "development": { + "buildTarget": "hugomeet:build:development" + }, + "production": { + "buildTarget": "hugomeet:build:production" + } + } + }, + "preview": { + "executor": "@nx/vite:preview-server", + "options": { + "buildTarget": "hugomeet:build" }, "configurations": { "development": { - "dev": true + "buildTarget": "hugomeet:build:development" }, "production": { - "buildTarget": "hugomeet:build", - "dev": false + "buildTarget": "hugomeet:build:production" } } }, @@ -44,7 +78,7 @@ ], "options": { "commands": [ - "pm2 start --name HugoMeet next -- start -p 3000" + "pm2 start --name HugoMeet node -- apps/hugomeet/server.js 3000" ] } }, diff --git a/apps/hugomeet/src/App.tsx b/apps/hugomeet/src/App.tsx new file mode 100644 index 0000000..ce712b5 --- /dev/null +++ b/apps/hugomeet/src/App.tsx @@ -0,0 +1,27 @@ +import { Navigate, Route, Routes, useParams } from "react-router-dom"; + +import LandingPage from "./components/LandingPage/LandingPage"; +import Providers from "./components/Providers"; +import RoomPage from "./components/RoomPage/RoomPage"; +import RouteLifecycleHandler from "./components/RouteLifecycleHandler"; + +function RoomPageRoute() { + const params = useParams<{ roomId: string }>(); + if (!params.roomId) { + return ; + } + return ; +} + +export default function App() { + return ( + + + + } /> + } /> + } /> + + + ); +} diff --git a/apps/hugomeet/src/components/Header/Header.tsx b/apps/hugomeet/src/components/Header/Header.tsx index 50e96f6..681e26a 100644 --- a/apps/hugomeet/src/components/Header/Header.tsx +++ b/apps/hugomeet/src/components/Header/Header.tsx @@ -1,18 +1,18 @@ "use client"; import { useState, useEffect } from "react"; -import { usePathname, useRouter } from "next/navigation"; +import { useLocation, useNavigate } from "react-router-dom"; import HugoMeetLogo from "./assets/HugoMeetLogo.png"; export default function Header() { const [dateTime, setDateTime] = useState(new Date()); - const router = useRouter(); - const pathname = usePathname(); + const navigate = useNavigate(); + const location = useLocation(); function goToTheLandingPage() { - if (pathname !== "/") { - router.push("/"); + if (location.pathname !== "/") { + navigate("/"); } } @@ -53,7 +53,7 @@ export default function Header() { return (
- HugoMeet logo + HugoMeet logo Hugo Meet
diff --git a/apps/hugomeet/src/components/LandingPage/LandingPage.tsx b/apps/hugomeet/src/components/LandingPage/LandingPage.tsx index bc8ff25..3823761 100644 --- a/apps/hugomeet/src/components/LandingPage/LandingPage.tsx +++ b/apps/hugomeet/src/components/LandingPage/LandingPage.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, type ChangeEvent } from "react"; -import { useRouter } from "next/navigation"; +import { useNavigate } from "react-router-dom"; import Header from "../Header/Header"; @@ -28,14 +28,14 @@ const presentationText = [ ]; export default function LandingPage() { - const router = useRouter(); + const navigate = useNavigate(); const [presentationIndex, setPresentationIndex] = useState(0); const [value, setValue] = useState(""); const [focused, setFocused] = useState(false); function createNewRoom() { const newRoomId = Utils.idGenerator.generateRoomID(9); - router.push(`/room/${newRoomId}`); + navigate(`/room/${newRoomId}`); } function joinRoom(roomId: string) { @@ -43,7 +43,7 @@ export default function LandingPage() { console.warn("RoomID is not valid !"); return; } - router.push(`/room/${roomId}`); + navigate(`/room/${roomId}`); } function updateInputValue(e: ChangeEvent) { @@ -141,7 +141,7 @@ export default function LandingPage() {
- presentation images + presentation images
{presentationTitle[presentationIndex]}
{presentationText[presentationIndex]}
diff --git a/apps/hugomeet/src/components/RoomPage/RoomPage.tsx b/apps/hugomeet/src/components/RoomPage/RoomPage.tsx index 2e1aec3..349ff92 100644 --- a/apps/hugomeet/src/components/RoomPage/RoomPage.tsx +++ b/apps/hugomeet/src/components/RoomPage/RoomPage.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, useEffect } from "react"; -import { useRouter } from "next/navigation"; +import { useNavigate } from "react-router-dom"; import PreRoomLayer from "./layers/preRoom/PreRoomLayer"; import RoomLayer from "./layers/roomLayer/RoomLayer"; @@ -20,7 +20,7 @@ export default function RoomPage({ roomId }: RoomPageProps) { const [selfId, setSelfId] = useState(""); const [rtcOptions, setRtcOptions] = useState({}); - const router = useRouter(); + const navigate = useNavigate(); function onConnectionCallback(msg: ConnectionCallbackMessage) { setSelfId(msg.selfId); @@ -38,7 +38,7 @@ export default function RoomPage({ roomId }: RoomPageProps) { if (!navigator.mediaDevices) { alert("This site is untrusted we cant access to the camera/or and microphone !"); - router.push("/"); + navigate("/"); return undefined; } @@ -106,9 +106,9 @@ export default function RoomPage({ roomId }: RoomPageProps) { useEffect(() => { if (!Utils.idGenerator.isRoomIDValid(roomId)) { - router.push("/"); + navigate("/"); } - }, [roomId, router]); + }, [roomId, navigate]); useEffect(() => { if (window.clockTimeout !== undefined) { diff --git a/apps/hugomeet/src/components/RoomPage/layers/preRoom/PreRoomLayer.tsx b/apps/hugomeet/src/components/RoomPage/layers/preRoom/PreRoomLayer.tsx index 4f1773c..85f7621 100644 --- a/apps/hugomeet/src/components/RoomPage/layers/preRoom/PreRoomLayer.tsx +++ b/apps/hugomeet/src/components/RoomPage/layers/preRoom/PreRoomLayer.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import { useCookies } from "react-cookie"; -import { usePathname, useRouter } from "next/navigation"; +import { useLocation, useNavigate } from "react-router-dom"; import config from "../../../../config"; import Header from "../../../Header/Header"; @@ -30,8 +30,8 @@ export default function PreRoomLayer(props: PreRoomLayerProps) { ); const [state, setState] = useState("Form"); - const router = useRouter(); - const pathname = usePathname(); + const navigate = useNavigate(); + const location = useLocation(); function WSonMessage(msg: MessageEvent) { let parsedMessage: ConnectionCallbackMessage | JoinRequestCallbackMessage | { type: string }; @@ -66,8 +66,8 @@ export default function PreRoomLayer(props: PreRoomLayerProps) { setState("Connection Error"); } else { console.log(`WS close: ${event.code}${event.reason && ` - ${event.reason}`}`); - if (pathname !== "/") { - router.push("/"); + if (location.pathname !== "/") { + navigate("/"); } } } diff --git a/apps/hugomeet/src/components/RoomPage/layers/roomLayer/RoomLayer.tsx b/apps/hugomeet/src/components/RoomPage/layers/roomLayer/RoomLayer.tsx index fa00894..3cfa022 100644 --- a/apps/hugomeet/src/components/RoomPage/layers/roomLayer/RoomLayer.tsx +++ b/apps/hugomeet/src/components/RoomPage/layers/roomLayer/RoomLayer.tsx @@ -13,7 +13,7 @@ "use client"; import { useState, useEffect } from "react"; -import { useRouter } from "next/navigation"; +import { useNavigate } from "react-router-dom"; import Utils from "../../../../utils/utils"; import type { Invitation, Peer, PeerConnectionEntry, RTCSignalMessage } from "../../../../types/hugomeet"; @@ -40,7 +40,7 @@ export default function RoomLayer(props: RoomLayerProps) { const [_Peers, set_Peers] = useState([]); const [_PendingInvitation, set_PendingInvitation] = useState([]); - const router = useRouter(); + const navigate = useNavigate(); const roomId = props.roomId; /////////////////////////////////////////////////////////////////////////////// @@ -416,7 +416,7 @@ export default function RoomLayer(props: RoomLayerProps) { PeersConnection.clear(); window.SignalingSocket.close(); } - router.push("/"); + navigate("/"); } function toggleAudio() { @@ -543,7 +543,7 @@ export default function RoomLayer(props: RoomLayerProps) { ) { new Notification("Hugo Meet - Joining request", { body: `${parsedMessage.name} ask you for joining the room`, - icon: NotificationIcon.src, + icon: NotificationIcon, requireInteraction: true, silent: false, }); @@ -747,7 +747,7 @@ export default function RoomLayer(props: RoomLayerProps) { Leave the call
diff --git a/apps/hugomeet/src/components/RouteLifecycleHandler.tsx b/apps/hugomeet/src/components/RouteLifecycleHandler.tsx index c328ee2..2183e99 100644 --- a/apps/hugomeet/src/components/RouteLifecycleHandler.tsx +++ b/apps/hugomeet/src/components/RouteLifecycleHandler.tsx @@ -1,15 +1,15 @@ "use client"; import { useEffect } from "react"; -import { usePathname } from "next/navigation"; +import { useLocation } from "react-router-dom"; import Utils from "../utils/utils"; export default function RouteLifecycleHandler() { - const pathname = usePathname(); + const location = useLocation(); useEffect(() => { - if (!pathname.startsWith("/room/")) { + if (!location.pathname.startsWith("/room/")) { if (window.SignalingSocket) { window.SignalingSocket.onopen = undefined; window.SignalingSocket.onmessage = undefined; @@ -29,7 +29,7 @@ export default function RouteLifecycleHandler() { window.localStream ); } - }, [pathname]); + }, [location.pathname]); return null; } diff --git a/apps/hugomeet/src/config.ts b/apps/hugomeet/src/config.ts index decf6d4..66b6861 100644 --- a/apps/hugomeet/src/config.ts +++ b/apps/hugomeet/src/config.ts @@ -1,6 +1,12 @@ const config = { - url_front: process.env.NX_HUGOMEET_ENDPOINT || "", - url_signaling: process.env.NX_HUGOMEET_SS_ENDPOINT || "", + url_front: + import.meta.env.NX_HUGOMEET_ENDPOINT ?? + (typeof process !== "undefined" ? process.env.NX_HUGOMEET_ENDPOINT : undefined) ?? + "", + url_signaling: + import.meta.env.NX_HUGOMEET_SS_ENDPOINT ?? + (typeof process !== "undefined" ? process.env.NX_HUGOMEET_SS_ENDPOINT : undefined) ?? + "", }; export default config; diff --git a/apps/hugomeet/src/main.tsx b/apps/hugomeet/src/main.tsx new file mode 100644 index 0000000..7e03ba4 --- /dev/null +++ b/apps/hugomeet/src/main.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; + +import "./components/Header/HeaderCSS.css"; +import "./components/LandingPage/landingPageCSS.css"; +import "./components/RoomPage/roomPageCSS.css"; +import "./components/RoomPage/layers/preRoom/preRoomLayerCSS.css"; +import "./components/RoomPage/layers/roomLayer/roomLayerCSS.css"; +import "./components/RoomPage/layers/roomLayer/components/peerVideo/peerVideoCSS.css"; +import "./components/RoomPage/layers/roomLayer/components/notification/notificationHugoMeetCSS.css"; + +import App from "./App"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + + + +); diff --git a/apps/hugomeet/src/types/assets.d.ts b/apps/hugomeet/src/types/assets.d.ts new file mode 100644 index 0000000..6117232 --- /dev/null +++ b/apps/hugomeet/src/types/assets.d.ts @@ -0,0 +1,4 @@ +declare module "*.png" { + const src: string; + export default src; +} diff --git a/apps/hugomeet/src/vite-env.d.ts b/apps/hugomeet/src/vite-env.d.ts new file mode 100644 index 0000000..5d13957 --- /dev/null +++ b/apps/hugomeet/src/vite-env.d.ts @@ -0,0 +1,10 @@ +/// + +interface ImportMetaEnv { + readonly NX_HUGOMEET_ENDPOINT?: string; + readonly NX_HUGOMEET_SS_ENDPOINT?: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/apps/hugomeet/tsconfig.json b/apps/hugomeet/tsconfig.json index 884e3cb..a769bba 100644 --- a/apps/hugomeet/tsconfig.json +++ b/apps/hugomeet/tsconfig.json @@ -13,26 +13,19 @@ "isolatedModules": true, "incremental": true, "types": [ - "node" - ], - "plugins": [ - { - "name": "next" - } + "node", + "vite/client" ] }, "include": [ "**/*.ts", "**/*.tsx", "**/*.js", - "**/*.jsx", - "next-env.d.ts", - ".next/types/**/*.ts", - "../../dist/apps/hugomeet/.next/types/**/*.ts", - "../../dist/dist/apps/hugomeet/.next/types/**/*.ts" + "**/*.jsx" ], "exclude": [ "node_modules", - "next.config.js" + "next.config.js", + "next-env.d.ts" ] } diff --git a/apps/hugomeet/vite.config.mts b/apps/hugomeet/vite.config.mts new file mode 100644 index 0000000..cd09f6d --- /dev/null +++ b/apps/hugomeet/vite.config.mts @@ -0,0 +1,22 @@ +import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; + +export default defineConfig({ + root: __dirname, + cacheDir: "../../node_modules/.vite/apps/hugomeet", + envPrefix: ["VITE_", "NX_"], + plugins: [react(), nxViteTsPaths()], + server: { + host: "0.0.0.0", + port: 3000, + }, + preview: { + host: "0.0.0.0", + port: 3000, + }, + build: { + outDir: "../../dist/apps/hugomeet", + emptyOutDir: true, + }, +}); diff --git a/apps/portfolio/index.html b/apps/portfolio/index.html new file mode 100644 index 0000000..b6534b5 --- /dev/null +++ b/apps/portfolio/index.html @@ -0,0 +1,12 @@ + + + + + + Portfolio + + +
+ + + diff --git a/apps/portfolio/project.json b/apps/portfolio/project.json index 0b2f562..6352c1c 100644 --- a/apps/portfolio/project.json +++ b/apps/portfolio/project.json @@ -11,37 +11,64 @@ ], "targets": { "build": { - "executor": "@nx/next:build", + "executor": "@nx/vite:build", "outputs": [ "{options.outputPath}" ], - "nextConfig": "apps/portfolio/next.config.js", "options": { - "root": "apps/portfolio", - "outputPath": "dist/apps/portfolio" + "outputPath": "dist/apps/portfolio", + "configFile": "apps/portfolio/vite.config.mts" + }, + "configurations": { + "development": { + "mode": "development" + }, + "production": { + "mode": "production" + } + } + }, + "dev": { + "executor": "@nx/vite:dev-server", + "defaultConfiguration": "development", + "options": { + "buildTarget": "portfolio:build" + }, + "configurations": { + "development": { + "buildTarget": "portfolio:build:development" + }, + "production": { + "buildTarget": "portfolio:build:production" + } } }, - "serve-DEV": { - "executor": "@nx/next:server", + "serve": { + "executor": "@nx/vite:dev-server", + "defaultConfiguration": "development", "options": { - "buildTarget": "portfolio:build", - "dev": true + "buildTarget": "portfolio:build" }, "configurations": { - "OnLocalNetwork": { - "hostname": "10.0.0.78" + "development": { + "buildTarget": "portfolio:build:development" + }, + "production": { + "buildTarget": "portfolio:build:production" } } }, - "serve-PROD": { - "executor": "@nx/next:server", + "preview": { + "executor": "@nx/vite:preview-server", "options": { - "buildTarget": "portfolio:build", - "dev": false + "buildTarget": "portfolio:build" }, "configurations": { - "OnLocalNetwork": { - "hostname": "10.0.0.78" + "development": { + "buildTarget": "portfolio:build:development" + }, + "production": { + "buildTarget": "portfolio:build:production" } } }, @@ -52,7 +79,7 @@ ], "options": { "commands": [ - "pm2 start --name Portfolio next -- start -p 4200" + "pm2 start --name Portfolio pnpm -- nx preview portfolio --configuration production" ] } }, diff --git a/apps/portfolio/src/App.tsx b/apps/portfolio/src/App.tsx new file mode 100644 index 0000000..277be97 --- /dev/null +++ b/apps/portfolio/src/App.tsx @@ -0,0 +1,31 @@ +const endpoint = import.meta.env.NX_PORTFOLIO_ENDPOINT ?? ""; + +export default function App() { + return ( +
+
+

Portfolio

+

Vite development build is configured for this app.

+ {endpoint ? ( +

+ Live endpoint:{" "} + + {endpoint} + +

+ ) : ( +

Set NX_PORTFOLIO_ENDPOINT in the monorepo root env file.

+ )} +
+
+ ); +} diff --git a/apps/portfolio/src/main.tsx b/apps/portfolio/src/main.tsx new file mode 100644 index 0000000..6816d32 --- /dev/null +++ b/apps/portfolio/src/main.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; + +import App from "./App"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + +); diff --git a/apps/portfolio/src/vite-env.d.ts b/apps/portfolio/src/vite-env.d.ts new file mode 100644 index 0000000..ee01e91 --- /dev/null +++ b/apps/portfolio/src/vite-env.d.ts @@ -0,0 +1,9 @@ +/// + +interface ImportMetaEnv { + readonly NX_PORTFOLIO_ENDPOINT?: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/apps/portfolio/tsconfig.json b/apps/portfolio/tsconfig.json index ec82a7d..8d0ada0 100644 --- a/apps/portfolio/tsconfig.json +++ b/apps/portfolio/tsconfig.json @@ -12,7 +12,8 @@ "isolatedModules": true, "incremental": true, "types": [ - "node" + "node", + "vite/client" ], "paths": { // External libs paths @@ -39,25 +40,18 @@ "apps/portfolio/utils/*" ] }, - "plugins": [ - { - "name": "next" - } - ] + "plugins": [] }, "include": [ "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", - "next-env.d.ts", - "**/*.glsl", - ".next/types/**/*.ts", - "../../dist/apps/portfolio/.next/types/**/*.ts", - "../../dist/dist/apps/portfolio/.next/types/**/*.ts" + "**/*.glsl" ], "exclude": [ "node_modules", - "next.config.js" + "next.config.js", + "next-env.d.ts" ] } diff --git a/apps/portfolio/vite.config.mts b/apps/portfolio/vite.config.mts new file mode 100644 index 0000000..b6301f4 --- /dev/null +++ b/apps/portfolio/vite.config.mts @@ -0,0 +1,22 @@ +import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; + +export default defineConfig({ + root: __dirname, + cacheDir: "../../node_modules/.vite/apps/portfolio", + envPrefix: ["VITE_", "NX_"], + plugins: [react(), nxViteTsPaths()], + server: { + host: "0.0.0.0", + port: 4200, + }, + preview: { + host: "0.0.0.0", + port: 4200, + }, + build: { + outDir: "../../dist/apps/portfolio", + emptyOutDir: true, + }, +});