Frontend Setup - Sistema de Ventas

This guide covers the setup and deployment of the Angular 18 frontend application for Sistema de Ventas.

Frontend Architecture

The frontend is built with:

Angular 18.2.0
Angular Material 18.2.14 for UI components
Chart.js 4.5.0 for dashboards and analytics
jsPDF 2.5.1 for PDF report generation

Prerequisites

Before starting, ensure:

Installation

Step 1: Navigate to Frontend Directory

cd sistema-ventas-frontend

Step 2: Install Dependencies

npm install

Installation may take 2-5 minutes depending on your internet connection.

Step 3: Verify Installation

# Check Angular version
ng version

# Verify dependencies
npm list --depth=0

Dependencies Overview

Core Dependencies

package.json

{
  "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/cdk": "^18.2.14",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/material": "^18.2.14",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "chart.js": "^4.5.0",
    "ng2-charts": "^5.0.0",
    "jspdf": "^2.5.1",
    "pdfmake": "^0.2.20",
    "rxjs": "~7.8.0",
    "zone.js": "~0.14.10"
  }
}

UI Components

Angular Material

Material Design components for forms, tables, dialogs, and navigation

Chart.js

Interactive charts for sales analytics and dashboards

jsPDF

Client-side PDF generation for invoices and reports

PDFMake

Advanced PDF document creation with custom layouts

Configuration

Step 4: Configure API Endpoints

Update environment files to point to your backend:

Development
Production

src/environments/environment.development.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8085',  // API Gateway
  apiEndpoints: {
    auth: 'http://localhost:8085/auth',
    usuario: 'http://localhost:8085/usuario',
    categoria: 'http://localhost:8085/categoria',
    producto: 'http://localhost:8085/producto',
    cliente: 'http://localhost:8085/cliente',
    venta: 'http://localhost:8085/venta',
    compra: 'http://localhost:8085/compra',
    pedido: 'http://localhost:8085/pedido',
    pago: 'http://localhost:8085/pagos',
    proveedor: 'http://localhost:8085/proveedor'
  }
};

src/environments/environment.ts

export const environment = {
  production: true,
  apiUrl: 'https://api.yourdomain.com',
  apiEndpoints: {
    auth: 'https://api.yourdomain.com/auth',
    usuario: 'https://api.yourdomain.com/usuario',
    categoria: 'https://api.yourdomain.com/categoria',
    producto: 'https://api.yourdomain.com/producto',
    cliente: 'https://api.yourdomain.com/cliente',
    venta: 'https://api.yourdomain.com/venta',
    compra: 'https://api.yourdomain.com/compra',
    pedido: 'https://api.yourdomain.com/pedido',
    pago: 'https://api.yourdomain.com/pagos',
    proveedor: 'https://api.yourdomain.com/proveedor'
  }
};

Gateway CORS Configuration

Ensure the API Gateway allows requests from your frontend:

config-data/jea-gateway-service.yml

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: "http://localhost:4200"  # Frontend URL
            allowedHeaders: "*"
            allowedMethods:
              - GET
              - POST
              - PUT
              - DELETE

For production, replace http://localhost:4200 with your production domain.

Development Server

Step 5: Start Development Server

npm start
# or
ng serve

The application will be available at:

URL: http://localhost:4200
Hot Reload: Enabled (auto-refresh on file changes)

First compilation may take 30-60 seconds. Subsequent changes compile faster.

Step 6: Verify Frontend Connection

Open Application

Navigate to http://localhost:4200

Test Login

Use sample credentials:

Username: admin
Password: admin123

Other test users:

vendedor / admin123
compras / admin123

Check Browser Console

Open Developer Tools (F12) and verify:

No CORS errors
API calls succeed (Network tab)
JWT token stored in localStorage/sessionStorage

Build for Production

Step 7: Create Production Build

ng build

Build output location: dist/sistema-ventas-frontend/

Build Optimization

Production builds include:

AOT Compilation

Ahead-of-Time compilation for faster runtime performance

Tree Shaking

Removes unused code to reduce bundle size

Minification

Compresses JavaScript, CSS, and HTML files

Source Maps

Generated separately for debugging (optional)

Build Output

dist/sistema-ventas-frontend/
├── browser/
│   ├── index.html
│   ├── main.[hash].js
│   ├── polyfills.[hash].js
│   ├── runtime.[hash].js
│   ├── styles.[hash].css
│   └── assets/
└── server/
    └── server.mjs (for SSR)

Deployment Options

Option 1: Static Web Server

Nginx
Apache
Node.js + Express

nginx.conf

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/sistema-ventas/browser;
    index index.html;

    # Redirect all requests to index.html for Angular routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Proxy API requests to backend
    location /api/ {
        proxy_pass http://localhost:8085/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Deploy:

# Copy build to server
scp -r dist/sistema-ventas-frontend/browser/* user@server:/var/www/sistema-ventas/

# Reload Nginx
sudo nginx -t
sudo systemctl reload nginx

.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Deploy:

# Copy to Apache directory
cp -r dist/sistema-ventas-frontend/browser/* /var/www/html/

# Ensure .htaccess is enabled
sudo a2enmod rewrite
sudo systemctl restart apache2

server.js

const express = require('express');
const path = require('path');
const app = express();

// Serve static files
app.use(express.static(path.join(__dirname, 'dist/sistema-ventas-frontend/browser')));

// Redirect all routes to index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/sistema-ventas-frontend/browser/index.html'));
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Frontend server running on port ${PORT}`);
});

Run:

node server.js

Option 2: Docker Container

Dockerfile

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --configuration production

FROM nginx:alpine
COPY --from=build /app/dist/sistema-ventas-frontend/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Build image
docker build -t sistema-ventas-frontend .

# Run container
docker run -d -p 80:80 sistema-ventas-frontend

Option 3: Cloud Platforms

Netlify
Vercel
AWS S3 + CloudFront

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy
netlify deploy --prod --dir=dist/sistema-ventas-frontend/browser

netlify.toml:

[build]
  command = "ng build --configuration production"
  publish = "dist/sistema-ventas-frontend/browser"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy
vercel --prod

vercel.json:

{
  "buildCommand": "ng build --configuration production",
  "outputDirectory": "dist/sistema-ventas-frontend/browser",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

# Build
ng build --configuration production

# Upload to S3
aws s3 sync dist/sistema-ventas-frontend/browser/ s3://your-bucket-name/ \
  --delete \
  --cache-control "max-age=31536000"

# Invalidate CloudFront cache
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

Development Tools

Angular DevTools

Install Angular DevTools browser extension for debugging:

Chrome: Angular DevTools
Firefox: Angular DevTools

Useful Commands

ng test

Troubleshooting

CORS Error: Request blocked

Issue: Access to XMLHttpRequest blocked by CORS policySolutions:

Verify Gateway CORS configuration allows your origin
Check allowedOrigins in jea-gateway-service.yml
Restart Gateway after config changes
Use browser DevTools to check request headers

401 Unauthorized on API calls

Issue: All API calls return 401 statusSolutions:

Verify JWT token is stored after login
Check token is included in Authorization header
Ensure Auth service is running
Verify token hasn’t expired

Module not found errors

Issue: Cannot find module '@angular/...'Solutions:

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear npm cache
npm cache clean --force
npm install

Build fails with memory error

Issue: JavaScript heap out of memorySolutions:

# Increase Node.js memory limit
export NODE_OPTIONS="--max-old-space-size=4096"
ng build --configuration production

# Or use package.json script
"scripts": {
  "build:prod": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng build --configuration production"
}

Routing not working after refresh

Issue: 404 error when refreshing non-root routesSolutions:

Configure server to redirect all routes to index.html
For Nginx, use try_files $uri $uri/ /index.html;
For Apache, ensure .htaccess has RewriteRule
For Node.js, add catch-all route: app.get('*', ...)

Performance Optimization

Lazy Loading

Implement lazy loading for feature modules:

app-routing.module.ts

const routes: Routes = [
  {
    path: 'ventas',
    loadChildren: () => import('./ventas/ventas.module').then(m => m.VentasModule)
  },
  {
    path: 'compras',
    loadChildren: () => import('./compras/compras.module').then(m => m.ComprasModule)
  }
];

Service Workers (PWA)

Enable Progressive Web App features:

ng add @angular/pwa
ng build --configuration production

Bundle Analysis

npm install -g webpack-bundle-analyzer
ng build --configuration production --stats-json
webpack-bundle-analyzer dist/sistema-ventas-frontend/browser/stats.json

Security Checklist

Use HTTPS in production
Implement JWT token refresh
Set secure HttpOnly cookies
Enable Content Security Policy (CSP)
Sanitize user input
Implement rate limiting on API calls
Use environment variables for sensitive config
Enable Angular production mode

Get Started

Core Features

Deployment

​Frontend Architecture

​Prerequisites

​Installation

​Step 1: Navigate to Frontend Directory

​Step 2: Install Dependencies

​Step 3: Verify Installation

​Dependencies Overview

​Core Dependencies

​UI Components

Angular Material

Chart.js

jsPDF

PDFMake

​Configuration

​Step 4: Configure API Endpoints

​Gateway CORS Configuration

​Development Server

​Step 5: Start Development Server

​Step 6: Verify Frontend Connection

​Build for Production

​Step 7: Create Production Build

​Build Optimization

​Build Output

​Deployment Options

​Option 1: Static Web Server

​Option 2: Docker Container

​Option 3: Cloud Platforms

​Development Tools

​Angular DevTools

​Useful Commands

​Troubleshooting

​Performance Optimization

​Lazy Loading

​Service Workers (PWA)

​Bundle Analysis

​Security Checklist

​Next Steps

Docker Deployment

API Reference

Build docs developers (and LLMs) love

Frontend Architecture

Prerequisites

Installation

Step 1: Navigate to Frontend Directory

Step 2: Install Dependencies

Step 3: Verify Installation

Dependencies Overview

Core Dependencies

UI Components

Configuration

Step 4: Configure API Endpoints

Gateway CORS Configuration

Development Server

Step 5: Start Development Server

Step 6: Verify Frontend Connection

Build for Production

Step 7: Create Production Build

Build Optimization

Build Output

Deployment Options

Option 1: Static Web Server

Option 2: Docker Container

Option 3: Cloud Platforms

Development Tools

Angular DevTools

Useful Commands

Troubleshooting

Performance Optimization

Lazy Loading

Service Workers (PWA)

Bundle Analysis

Security Checklist

Next Steps