Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/GuillermoNavarro/Proyecto_comunidades/llms.txt

Use this file to discover all available pages before exploring further.

The Comunidades Vecinos frontend is a single-page application built with React 19 and Vite 8. It uses Bootstrap 5 for layout and components, Axios for HTTP requests, react-router-dom v7 for client-side routing, and jwt-decode to read JWT claims on the client. In development, Vite’s built-in proxy transparently forwards all /api requests to the Spring Boot backend so you never have to worry about CORS.

​
Requirements

  • Node.js 18+
  • npm (bundled with Node.js)

​
Installation and Development Server

1

Install dependencies

From the project root, navigate to the frontend/ directory and install all npm packages:
cd frontend
npm install
2

Start the development server

npm run dev
Vite starts a local development server on http://localhost:5173 with hot module replacement (HMR) enabled. Any change to a source file is reflected in the browser instantly without a full page reload.
3

Make sure the backend is running

The frontend expects the Spring Boot API to be reachable at http://localhost:8081. Start the backend first (see Backend Configuration), then open http://localhost:5173 in your browser.

​
Vite Proxy Configuration

In development, Vite intercepts every request whose path starts with /api and forwards it to the backend at http://localhost:8081. This means the browser always talks to localhost:5173 — no CORS configuration is needed on the backend during development. The proxy is configured in frontend/vite.config.js: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        secure: false,
      }
    }
  }
})
The changeOrigin: true option rewrites the Host header of the proxied request to match the target, which is required for Spring Boot to accept the request. The secure: false option disables TLS certificate verification — safe for a local backend over plain HTTP.

​
Authentication and Token Storage

After a successful login, the backend returns a signed JWT. The frontend stores this token in localStorage under the key token: 
localStorage.setItem('token', responseData.token);
On every subsequent API request, Axios reads the token from localStorage and attaches it as a Bearer token in the Authorization header. The jwt-decode library is used to extract claims such as idUsuario, idComunidad, and rol from the token payload on the client side — without making an additional network request.
localStorage is accessible to any JavaScript running on the same origin. For higher-security deployments, consider storing the token in an HttpOnly cookie instead.

​
Building for Production

npm run build
Vite compiles and bundles the application into the frontend/dist/ directory. The output consists of static HTML, JavaScript, and CSS files that can be served by any web server.
The base: './' option in vite.config.js ensures that all asset paths in the built output are relative, which makes the dist/ folder portable and deployable to any URL prefix.
You can preview the production build locally before deploying: 
npm run preview
This starts a local static file server at http://localhost:4173 serving the contents of dist/.

​
Nginx Production Reverse Proxy

In production, Nginx serves the static dist/ files and forwards /api traffic to the Spring Boot backend. The following example configuration covers both responsibilities. 
server {
    listen 80;
    server_name example.com;

    root /var/www/comunidades/dist;
    index index.html;

    # Serve the React SPA — fall back to index.html for all routes
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxy API calls to the Spring Boot backend
    location /api/ {
        proxy_pass http://localhost:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
The try_files $uri $uri/ /index.html directive is essential for React Router’s client-side routing to work correctly. Without it, navigating directly to a URL such as https://example.com/comunidad/dashboard would return a 404 from Nginx instead of loading the SPA and letting React Router handle the route.
For HTTPS, add a second server block that listens on port 443 with your TLS certificate, or use Certbot to generate and auto-renew a free Let’s Encrypt certificate. Redirect all HTTP traffic to HTTPS with a return 301 https://$host$request_uri; directive in the port-80 block.

​
Key Dependencies

The following table lists the main runtime packages installed by npm install. All versions are sourced directly from frontend/package.json.
PackageVersionPurpose
react^19.2.4Core UI library.
react-dom^19.2.4React renderer for the browser DOM.
react-router-dom^7.13.1Client-side routing for the SPA.
axios^1.13.6HTTP client used for all API calls.
bootstrap^5.3.2CSS framework imported globally in main.jsx.
bootstrap-icons^1.13.1Icon font used throughout the UI.
jwt-decode^4.0.0Decodes JWT payload claims on the client without verification.

Build docs developers (and LLMs) love

Get started for freeTalk to us