Migrate hugomeet and portfolio Nx apps to Vite with root NX_ env support

[Copilot]

This PR converts apps/hugomeet and apps/portfolio from the previous Next/Nx-next execution model to Vite in Nx, including target/config updates so nx serve/build/preview work with Vite. It also preserves monorepo-root environment variable usage for HugoMeet (NX_HUGOMEET_ENDPOINT, NX_HUGOMEET_SS_ENDPOINT) by configuring Vite to accept NX_-prefixed vars.

• Nx target migration to Vite

  • Updated both app project.json files to use:
    • @nx/vite:build
    • @nx/vite:dev-server (dev + serve)
    • @nx/vite:preview-server (preview)
  • Added Vite-style configuration variants (development / production) for build and runtime targets.

• Vite app configuration

  • Added:
    • apps/hugomeet/vite.config.mts
    • apps/portfolio/vite.config.mts
  • Configured monorepo-aware root/cache/outDir and explicit app ports.
  • Enabled envPrefix: ["VITE_", "NX_"] to keep existing root env naming conventions.

• App entrypoint/runtime wiring

  • Added Vite entrypoints for both apps:
    • index.html
    • src/main.tsx
  • Added lightweight app shells required by Vite runtime bootstrapping.

• Hugomeet env + routing adaptation

  • Updated HugoMeet config loading to use Vite envs while still supporting existing NX_ values:

export default defineConfig({
  envPrefix: ["VITE_", "NX_"],
});

const config = {
  url_front: import.meta.env.NX_HUGOMEET_ENDPOINT ?? "",
  url_signaling: import.meta.env.NX_HUGOMEET_SS_ENDPOINT ?? "",
};

• Replaced Next router hooks used by HugoMeet UI flow with React Router equivalents for the Vite runtime path.

• TypeScript compatibility updates

  • Removed Next-specific TS plugin/type coupling from migrated app tsconfigs.
  • Added Vite/client env typing and static asset typing needed by the new build path.

• UI screenshots

  • HugoMeet: https://github.com/user-attachments/assets/c05c991c-94ea-4bbf-912b-4585e60ec7ba
  • Portfolio: https://github.com/user-attachments/assets/ffb5d8ff-8746-46ba-bc8c-3df0636828da

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/web-monorepo/web-monorepo/node_modules/.pnpm/next@14.2.0_@babel+core@7.27.1_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.54.5/node_modules/next/dist/compiled/jest-worker/processChild.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Overview

Convert the hugomeet and portfolio applications from their current build setup to Vite, updating all NX configurations accordingly.

Current State

The monorepo currently has environment variables defined at the root:

# port 3000
NX_HUGOMEET_ENDPOINT=https://meet.hugocabel.com
# port 8042
NX_HUGOMEET_SS_ENDPOINT=wss://signalling-meet.hugocabel.com

# port 4200
NX_PORTFOLIO_ENDPOINT=https://hugocabel.com

# port 4900
NX_CACHING_API_ENDPOINT=https://api-projects.hugocabel.com
# port 4800
NX_TELEMETRY_API_ENDPOINT=https://api-telemetry.hugocabel.com

Running pnpm nx serve hugomeet fails with:

NX   Could not find vite config at provided path "/home/debian/hcabel-monorepo/apps/hugomeet/vite.config.mts".

Requirements

1. Convert both apps to Vite

• Create proper vite.config.mts files for both hugomeet and portfolio apps
• Ensure Vite is properly configured for the monorepo structure

2. Environment Variables

• hugomeet must be able to:
  • Connect through meet.hugocabel.com (using NX_HUGOMEET_ENDPOINT)
  • Connect to signalling server at wss://signalling-meet.hugocabel.com (using NX_HUGOMEET_SS_ENDPOINT)
• Environment variables are located at the root of the monorepo
• Ensure environment variables work properly with Vite (note: Vite uses VITE_ prefix by default, so either:
  • Update env var names to use VITE_ prefix, OR
  • Configure Vite to use the existing NX_ prefix via envPrefix option
  • Choose whichever approach is more suited for NX monorepo conventions)

3. Update NX Configuration

• Update all NX rules/targets in project.json files to work with Vite
• Use appropriate target names and patterns that fit Vite conventions (e.g., dev, build, preview)
• Ensure serve, build, and any other relevant targets are properly configured
• Feel free to rename targets to more suited names if it fits better with Vite patterns

4. Dependencies

• Add necessary Vite-related dependencies to package.json (e.g., vite, @vitejs/plugin-react if React, @nx/vite, etc.)

Notes

• This is a monorepo using pnpm and NX
• The apps are located in apps/hugomeet and apps/portfolio
• Maintain compatibility with the existing monorepo structure

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: ```

port 3000

NX_HUGOMEET_ENDPOINT=https://meet.hugocabel.com

port 8042

NX_HUGOMEET_SS_ENDPOINT=wss://signalling-meet.hugocabel.com

port 4200

NX_PORTFOLIO_ENDPOINT=https://hugocabel.com

port 4900

NX_CACHING_API_ENDPOINT=https://api-projects.hugocabel.com

port 4800

NX_TELEMETRY_API_ENDPOINT=https://api-telemetry.hugocabel.com

pnpm nx serve hugomeet                           

> nx run hugomeet:serve:development

 NX   Could not find vite config at provided path "/home/debian/hcabel-monorepo/apps/hugomeet/vite.config.mts".

Convert hugomeet and my portfolio to vite
Hugomeet should be able to connect through meet.hugocabel.com and connect to the signallign server at wss://signalling-meet.hugocabel.com
Of course those will be pass via env variable, nake sure this still work of find an more suited alternative
Since its a mono repo those variable are located at the root of the monorepo
update all the nx rule to work with vite, your free to use more suited names and patterns if it fit



Assistant: We're waiting for your confirmation to start the coding agent that will create a pull request with the Vite migration changes.

This pull request was created from Copilot chat.