Skip to main content

​
Overview

The Production Inspection Form is built as a static Next.js application with static HTML export. This deployment guide covers building and hosting the application on various platforms.
The application exports to static HTML files with client-side JavaScript for dynamic functionality. The exported build is located in the /insp_pry/inspecciones base path.

​
Build Process

1
Clean Previous Builds
2
Remove any existing build artifacts:
3
rm -rf .next out
4
Run Production Build
5
Execute the Next.js build command to generate optimized static files:
6
npm
npm run build
yarn
yarn build
pnpm
pnpm build
7
The build process includes:
  • JavaScript bundling and minification
  • CSS optimization
  • Static HTML generation
  • Asset optimization
8
Verify Build Output
9
Check the build output directory structure:
10
ls -la out/
11
Expected structure:
12
out/
├── _next/
│   └── static/
│       ├── chunks/           # JavaScript bundles
│       ├── css/              # Compiled stylesheets
│       └── media/            # Optimized images
├── index.html                # Main form page
├── login.html                # Login page
├── 404.html                  # Error page
└── favicon.ico               # Site assets

​
Deployment Options

​
Option 1: Traditional Web Server

​
Nginx Configuration

Deploy to nginx with proper routing for the /insp_pry/inspecciones base path: 
server {
    listen 80;
    server_name your-domain.com;

    # Root directory for static files
    root /var/www/html/insp_pry/inspecciones;
    index index.html;

    # Base path location
    location /insp_pry/inspecciones {
        alias /var/www/html/insp_pry/inspecciones;
        try_files $uri $uri/ /insp_pry/inspecciones/index.html;

        # Enable caching for static assets
        location ~* ^/insp_pry/inspecciones/_next/static/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # CORS headers for API communication
    add_header Access-Control-Allow-Origin *;
}
1
1. Copy build files to server:
2
scp -r out/* user@server:/var/www/html/insp_pry/inspecciones/
3
2. Set proper permissions:
4
ssh user@server "chown -R www-data:www-data /var/www/html/insp_pry/inspecciones"
5
3. Reload nginx:
6
ssh user@server "nginx -s reload"

​
Apache Configuration

For Apache web server, use this .htaccess configuration: 
RewriteEngine On

# Handle client-side routing
RewriteBase /insp_pry/inspecciones/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /insp_pry/inspecciones/index.html [L]

# Cache static assets
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$">
    Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

​
Option 2: Docker Container

Create a containerized deployment: 
FROM nginx:alpine

# Copy build output
COPY out/ /usr/share/nginx/html/insp_pry/inspecciones/

# Copy nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
Build and run: 
# Build Docker image
docker build -t inspection-form:latest .

# Run container
docker run -d -p 80:80 --name inspection-form inspection-form:latest

​
Option 3: CDN Deployment

For CDN hosting (CloudFront, Cloudflare, etc.), upload the out/ directory contents and configure:
  • Origin Path: /insp_pry/inspecciones
  • Default Root Object: index.html
  • Error Pages: Redirect 404 to /insp_pry/inspecciones/index.html
  • Cache Behavior: Cache _next/static/* with long TTL

​
Environment-Specific Configuration

​
Base Path Configuration

The application is configured with a base path of /insp_pry/inspecciones. Ensure your deployment matches this path structure.
The base path is defined in next.config.js: 
module.exports = {
  basePath: '/insp_pry/inspecciones',
  output: 'export',
  trailingSlash: true
}

​
API Endpoint Accessibility

The application communicates with http://10.107.194.110/insp/ for authentication and data operations. Ensure network connectivity from client browsers.
Key API endpoints:
  • POST /api/login-ldap/ - LDAP authentication
  • GET /api/divisiones/ - Division data
  • GET /api/areas/ - Area data
  • GET /api/zonas/ - Zone data
  • GET /api/equipos/ - Equipment data
  • GET /api/preguntas/{category}/ - Inspection questions
  • POST /api/guardar/ - Save inspection form

​
Post-Deployment Verification

1
Test Static Assets
2
Verify that static files are accessible:
3
curl -I https://your-domain.com/insp_pry/inspecciones/_next/static/css/[hash].css
4
Test Application Routes
5
Check that the main pages load correctly:
6
# Main form
curl https://your-domain.com/insp_pry/inspecciones/

# Login page
curl https://your-domain.com/insp_pry/inspecciones/login
7
Test API Connectivity
8
From a client browser, open developer console and verify API requests succeed:
9
fetch('http://10.107.194.110/insp/api/divisiones/')
  .then(res => res.json())
  .then(console.log)
10
Test Authentication Flow
11
  • Navigate to the application URL
  • Verify redirect to /login if not authenticated
  • Test login with valid LDAP credentials
  • Confirm redirect to main form after successful login

    • ​
    Performance Optimization

    ​
    Asset Optimization

    The build process automatically optimizes:
    • JavaScript: Minified and code-split
    • CSS: Extracted and minified
    • Images: Optimized and properly formatted

    ​
    Caching Strategy

    Implement aggressive caching for static assets: 
    /_next/static/*          → Cache-Control: max-age=31536000, immutable
/*.html                  → Cache-Control: no-cache
/favicon.ico            → Cache-Control: max-age=86400

    ​
    CDN Recommendations

    For optimal performance, serve the application through a CDN with edge locations close to your users.

    ​
    Monitoring and Maintenance

    ​
    Health Checks

    Monitor these endpoints:
    • Application: https://your-domain.com/insp_pry/inspecciones/
    • API Backend: http://10.107.194.110/insp/api/divisiones/

    ​
    Update Procedures

    1
    1. Build new version:
    2
    npm run build
    3
    2. Backup current deployment:
    4
    cp -r /var/www/html/insp_pry/inspecciones /var/www/html/insp_pry/inspecciones.backup
    5
    3. Deploy updated files:
    6
    scp -r out/* user@server:/var/www/html/insp_pry/inspecciones/
    7
    4. Clear CDN cache if applicable

    ​
    Troubleshooting

    ​
    404 Errors on Refresh

    Problem: Page refreshes result in 404 errors. Solution: Configure your web server to redirect all requests to index.html for client-side routing.

    ​
    API CORS Issues

    Problem: Browser blocks API requests due to CORS policy. Solution: Ensure the API server at 10.107.194.110 includes proper CORS headers, or configure a reverse proxy.

    ​
    Static Assets Not Loading

    Problem: JavaScript/CSS files return 404. Solution: Verify the base path configuration matches your deployment path (/insp_pry/inspecciones).

    ​
    Next Steps

    • Configure application settings: Configuration
    • Set up monitoring and analytics
    • Implement backup procedures
    • Review security considerations

    Build docs developers (and LLMs) love

    Get started for freeTalk to us