Frontend Deployment

Overview

This guide covers deploying the Sistema Venta Angular application to various production environments, including static hosting, web servers, and cloud platforms.

Pre-Deployment Checklist

Update Production Environment

Configure your production API endpoint in src/environments/environment.prod.ts:

src/environments/environment.prod.ts

export const environment = {
  production: true,
  endpoint: "https://your-api-domain.com/api/"
};

Ensure the endpoint URL ends with a trailing slash and uses HTTPS in production.

Review Build Budgets

Check that your bundle sizes are within limits:

angular.json

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  }
]

Run a test build to verify:

ng build --configuration production

Test Production Build Locally

Install a static server and test the production build:

npm install -g http-server
ng build --configuration production
cd dist/app-sistema-venta
http-server -p 8080

Visit http://localhost:8080 to verify everything works.

Verify API Connectivity

Ensure your production API is:

Accessible from the deployment environment
Configured with CORS for your frontend domain
Using HTTPS (required for production)

Production Build

Build Command

Create an optimized production build:

npm run build

Build Output

The production build generates optimized files in dist/app-sistema-venta/:

dist/app-sistema-venta/
├── index.html              # Entry point
├── main.[hash].js          # Application code
├── polyfills.[hash].js     # Browser polyfills
├── runtime.[hash].js       # Webpack runtime
├── styles.[hash].css       # Compiled styles
├── assets/                 # Static assets
├── favicon.ico
└── 3rdpartylicenses.txt    # Third-party licenses

File names include content hashes for cache busting. The hash changes when file contents change.

Build Optimizations

Production builds include:

AOT Compilation: Ahead-of-Time compilation for faster rendering
Minification: Compressed JavaScript and CSS
Tree Shaking: Removes unused code
Dead Code Elimination: Removes unreachable code
Bundle Optimization: Optimized chunk splitting
Output Hashing: Cache busting with content hashes

Deployment Options

Option 1: IIS (Internet Information Services)

Build the Application

ng build --configuration production

Configure web.config

Create a web.config file in dist/app-sistema-venta/ for URL rewriting:

dist/app-sistema-venta/web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

Deploy to IIS

Open IIS Manager
Create a new website or application
Set physical path to dist/app-sistema-venta/
Configure application pool (use .NET CLR version: No Managed Code)
Set permissions for IIS_IUSRS
Start the website

Option 2: Apache Web Server

Build the Application

ng build --configuration production

Create .htaccess

Create a .htaccess file in dist/app-sistema-venta/:

dist/app-sistema-venta/.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 to Apache

# Copy files to web root
sudo cp -r dist/app-sistema-venta/* /var/www/html/

# Set permissions
sudo chown -R www-data:www-data /var/www/html/
sudo chmod -R 755 /var/www/html/

# Ensure mod_rewrite is enabled
sudo a2enmod rewrite
sudo systemctl restart apache2

Option 3: Nginx

Build the Application

ng build --configuration production

Configure Nginx

Create an Nginx configuration:

/etc/nginx/sites-available/sistema-venta

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/sistema-venta;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

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

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # Gzip compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/javascript application/json;
}

Deploy to Nginx

# Copy files
sudo mkdir -p /var/www/sistema-venta
sudo cp -r dist/app-sistema-venta/* /var/www/sistema-venta/

# Enable site
sudo ln -s /etc/nginx/sites-available/sistema-venta /etc/nginx/sites-enabled/

# Test and reload
sudo nginx -t
sudo systemctl reload nginx

Option 4: Cloud Platforms

Netlify
Vercel
AWS S3 + CloudFront
Azure Static Web Apps

Create netlify.toml

netlify.toml

[build]
  command = "npm run build"
  publish = "dist/app-sistema-venta"

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

Deploy

# Install Netlify CLI
npm install -g netlify-cli

# Build and deploy
ng build --configuration production
netlify deploy --prod --dir=dist/app-sistema-venta

Create vercel.json

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist/app-sistema-venta"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Add Build Script

Update package.json:

package.json

{
  "scripts": {
    "vercel-build": "ng build --configuration production"
  }
}

Deploy

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

Build Application

ng build --configuration production

Create S3 Bucket

aws s3 mb s3://sistema-venta-frontend
aws s3 website s3://sistema-venta-frontend \
  --index-document index.html \
  --error-document index.html

Upload Files

aws s3 sync dist/app-sistema-venta/ s3://sistema-venta-frontend \
  --delete \
  --cache-control "public, max-age=31536000, immutable" \
  --exclude "index.html"

# Upload index.html separately with no-cache
aws s3 cp dist/app-sistema-venta/index.html s3://sistema-venta-frontend/ \
  --cache-control "no-cache, no-store, must-revalidate"

Configure CloudFront

Create a CloudFront distribution pointing to your S3 bucket with:

Custom error response: 404 → /index.html (200)
HTTPS certificate
Compression enabled

Create Configuration

staticwebapp.config.json

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/assets/*", "/*.{css,scss,js,png,gif,ico,jpg,svg}"]
  },
  "responseOverrides": {
    "404": {
      "rewrite": "/index.html",
      "statusCode": 200
    }
  }
}

Deploy via CLI

# Install Azure Static Web Apps CLI
npm install -g @azure/static-web-apps-cli

# Build
ng build --configuration production

# Deploy
swa deploy dist/app-sistema-venta --deployment-token <token>

Docker Deployment

Create Dockerfile

# Stage 1: Build
FROM node:14-alpine AS build

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build -- --configuration production

# Stage 2: Serve with Nginx
FROM nginx:alpine

COPY --from=build /app/dist/app-sistema-venta /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Build and Run Docker Container

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

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

# View logs
docker logs sistema-venta

Docker Compose

docker-compose.yml

version: '3.8'

services:
  frontend:
    build: .
    ports:
      - "80:80"
    restart: unless-stopped
    environment:
      - NODE_ENV=production

SSL/HTTPS Configuration

Always use HTTPS in production for security. The Material Design API and modern browsers require HTTPS for many features.

Using Let’s Encrypt with Certbot

Install Certbot

sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

Obtain Certificate

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

Auto-renewal

Certbot automatically adds a renewal cron job. Test it:

sudo certbot renew --dry-run

Performance Optimization

Enable Compression

Ensure your web server serves compressed files:

Nginx
Apache

gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
  text/plain
  text/css
  text/xml
  text/javascript
  application/json
  application/javascript
  application/xml+rss
  application/atom+xml
  image/svg+xml;

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE application/xml application/xml+rss
</IfModule>

Cache Headers

Set appropriate cache headers:

# Immutable files (with hashes)
location ~* \.[0-9a-f]{20}\.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# index.html - never cache
location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

# Other static assets
location ~* \.(jpg|jpeg|png|gif|ico|svg|woff|woff2)$ {
    expires 6M;
    add_header Cache-Control "public";
}

Monitoring and Troubleshooting

Health Check Endpoint

The index.html serves as a basic health check:

curl -I https://your-domain.com/
# Should return: HTTP/1.1 200 OK

Common Issues

404 on Page Refresh

Problem: Direct navigation to routes returns 404.Solution: Configure server URL rewriting to always serve index.html for non-file requests. See deployment-specific configurations above.

API CORS Errors

Problem: API calls fail with CORS errors in production.Solution: Configure your backend API to allow requests from your frontend domain:

Program.cs (Backend)

builder.Services.AddCors(options => {
    options.AddPolicy("AllowFrontend", policy => {
        policy.WithOrigins("https://your-domain.com")
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

Environment Variables Not Working

Problem: Production environment settings not applied.Solution: Ensure you’re building with --configuration production and verify file replacement in angular.json.

Large Bundle Sizes

Problem: Build exceeds bundle size budgets.Solutions:

Enable lazy loading for feature modules
Analyze bundle with: ng build --configuration production --stats-json
Use webpack-bundle-analyzer: npx webpack-bundle-analyzer dist/app-sistema-venta/stats.json
Remove unused dependencies

Logging and Analytics

Consider adding:

Application Insights (Azure) or CloudWatch (AWS) for monitoring
Sentry or similar for error tracking
Google Analytics for user analytics

app.component.ts

// Example: Add error tracking
import * as Sentry from '@sentry/angular';

Sentry.init({
  dsn: 'your-sentry-dsn',
  environment: environment.production ? 'production' : 'development'
});

Continuous Deployment

GitHub Actions Example

.github/workflows/deploy.yml

name: Deploy Frontend

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
      working-directory: ./AppSistemaVenta
    
    - name: Build
      run: npm run build
      working-directory: ./AppSistemaVenta
    
    - name: Deploy to S3
      uses: jakejarvis/s3-sync-action@master
      with:
        args: --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        SOURCE_DIR: './AppSistemaVenta/dist/app-sistema-venta'

Post-Deployment Verification

Verify Application Loads

Navigate to your production URL
Check that the login page displays correctly
Verify all assets load (check browser console)

Test Core Functionality

Login with test credentials
Navigate to each main page
Test API connectivity
Verify data displays correctly

Check Performance

Run Lighthouse audit in Chrome DevTools
Verify load times are acceptable
Check bundle sizes in Network tab

Monitor Logs

Check server access logs
Monitor application errors
Verify API calls are successful

Next Steps

Configuration

Review configuration options and customize settings

Development

Return to development guide for updates and enhancements

Get Started

Backend Setup

Frontend Setup

Core Features

Overview

Pre-Deployment Checklist

Production Build

Build Command

Build Output

Build Optimizations

Deployment Options

Option 1: IIS (Internet Information Services)

Option 2: Apache Web Server

Option 3: Nginx

Option 4: Cloud Platforms

Docker Deployment

Create Dockerfile

Build and Run Docker Container

Docker Compose

SSL/HTTPS Configuration

Using Let’s Encrypt with Certbot

Performance Optimization

Enable Compression

Cache Headers

Monitoring and Troubleshooting

Health Check Endpoint

Common Issues

Logging and Analytics

Continuous Deployment

GitHub Actions Example

Post-Deployment Verification

Next Steps

Configuration

Development

Build docs developers (and LLMs) love

Get Started

Backend Setup

Frontend Setup

Core Features

​Overview

​Pre-Deployment Checklist

​Production Build

​Build Command

​Build Output

​Build Optimizations

​Deployment Options

​Option 1: IIS (Internet Information Services)

​Option 2: Apache Web Server

​Option 3: Nginx

​Option 4: Cloud Platforms

​Docker Deployment

​Create Dockerfile

​Build and Run Docker Container

​Docker Compose

​SSL/HTTPS Configuration

​Using Let’s Encrypt with Certbot

​Performance Optimization

​Enable Compression

​Cache Headers

​Monitoring and Troubleshooting

​Health Check Endpoint

​Common Issues

​Logging and Analytics

​Continuous Deployment

​GitHub Actions Example

​Post-Deployment Verification

​Next Steps

Configuration

Development

Build docs developers (and LLMs) love

Overview

Pre-Deployment Checklist

Production Build

Build Command

Build Output

Build Optimizations

Deployment Options

Option 1: IIS (Internet Information Services)

Option 2: Apache Web Server

Option 3: Nginx

Option 4: Cloud Platforms

Docker Deployment

Create Dockerfile

Build and Run Docker Container

Docker Compose

SSL/HTTPS Configuration

Using Let’s Encrypt with Certbot

Performance Optimization

Enable Compression

Cache Headers

Monitoring and Troubleshooting

Health Check Endpoint

Common Issues

Logging and Analytics

Continuous Deployment

GitHub Actions Example

Post-Deployment Verification

Next Steps