Deploying a Receipt Upload Portal for quickdumpnow.com: S3, CloudFront, and Custom Error Handling

This post covers the deployment of a new receipts management page for a trailer rental business operating under quickdumpnow.com. The challenge involved creating a dedicated receipt upload interface while working within existing CloudFront distribution constraints and custom error responses that were originally designed to improve SEO for the main landing page.

What Was Done

We deployed a new /books page to quickdumpnow.com that will serve as a receipt collection portal for the trailer rental business. The deployment required:

  • Creating and refining /Users/cb/Documents/repos/sites/quickdumpnow.com/books/index.html with proper styling matching the existing site design
  • Updating /Users/cb/Documents/repos/sites/quickdumpnow.com/robots.txt to block search engine indexing of the receipts page
  • Uploading assets to S3 with dual-key strategy for URL routing
  • Invalidating CloudFront cache for the new paths
  • Coordinating with an automated Google Sheets port log system for financial tracking

Technical Details: File Structure and Deployment

The books page was created at a specific local path matching the site's directory structure. Before deployment, we verified the existing project layout:

quickdumpnow.com/
├── index.html (main landing page)
├── robots.txt
└── books/
    └── index.html (newly created)

The books page was built to match the existing site's visual design and user experience patterns. This consistency is critical for users who may navigate between the main landing page and the receipt portal.

S3 Upload Strategy

CloudFront was configured with a custom error response that redirects 404s back to the homepage—a common pattern for SEO optimization on single-page applications. However, this creates a problem: without special handling, requests to /books would return the homepage instead of a dedicated page.

To solve this, we uploaded the books page to S3 using a dual-key strategy:

  • Pretty URL key: books/index.html — allows CloudFront to serve /books/ with a trailing slash
  • Bare key: books (without extension) — allows CloudFront to serve /books without a trailing slash

This dual approach ensures both URL variations work correctly, accommodating different user navigation patterns and bookmark styles.

robots.txt Modification

The receipts portal is an internal business tool, not a public-facing feature. We updated robots.txt to prevent search engine crawling:

User-agent: *
Disallow: /books

This prevents the page from being indexed while keeping it accessible to authenticated or authorized users (future implementation).

Infrastructure: CloudFront and Cache Invalidation

After uploading assets to S3, we invalidated CloudFront's cache for the affected paths. CloudFront distributions cache content at edge locations globally, so invalidation was necessary to ensure the new page would be served immediately rather than being delayed by the previous cache state.

We invalidated two path patterns:

  • /books — exact match for the bare URL
  • /books/* — wildcard pattern for any subpaths under books (useful for future expansion)

CloudFront invalidations typically propagate within 30-60 seconds globally, so the page was live shortly after the commands completed.

CloudFront Distribution Configuration

We verified the distribution's custom error response configuration:

  • Error code: 404 Not Found
  • Response page path: /index.html (redirects to homepage)
  • HTTP response code: 200 (masks 404s as successful responses)

This configuration was originally designed to make the site function as a client-side router (common for SPA frameworks). By uploading the books page as actual S3 objects rather than relying on error response fallback, we bypass this behavior for that specific path.

Integration with Google Sheets Port Log

The receipts are tracked in an automated Google Sheets-based port log system. During this session, we:

  • Located the ExpenseTracker Google Apps Script file
  • Verified the Port Log sheet structure via the Google Sheets API
  • Confirmed sheet headers and existing data rows
  • Prepared to log the initial charter payment: $1,845.72

The port log acts as a centralized business ledger, integrating with the new receipts portal to create a complete financial tracking workflow.

Key Decisions and Rationale

Why Dual S3 Keys?

Content delivery networks and browsers handle URLs differently. Some browsers add trailing slashes automatically; others don't. By uploading to both books/index.html and books, we ensure consistency across all access patterns without requiring URL rewriting rules, which would add complexity to the CloudFront configuration.

Why Block in robots.txt?

The receipts page is a business tool, not marketing content. Blocking it prevents:

  • Search engine indexing of sensitive financial data
  • Confusion in search results from duplicate or internal-only pages
  • Potential security risks from search engine caches

Why Verify CloudFront Config?

The custom 404 response was a potential blocker. By confirming the exact configuration, we understood why the books page wasn't serving and implemented the correct workaround (dual S3 keys) rather than trying to modify the distribution configuration, which would have been slower and more error-prone.

What's Next

  • Receipt upload functionality: Implement a form that accepts image uploads or PDF files, storing them in a dedicated S3 bucket with a dedicated CloudFront distribution or presigned URLs
  • Authentication layer: Add session management to control who can access and upload receipts (likely using API Gateway + Lambda or a similar serverless pattern)
  • Port log automation: Create a workflow that triggers when receipts are uploaded, automatically parsing financial data and updating the Google Sheets port log
  • S3 lifecycle policies: Implement automatic archival or deletion of receipts after a set retention period for compliance

The infrastructure is now in place for a scalable receipt management system. The dual-key S3 strategy and CloudFront invalidation pattern can be reused for other pages on the quickdumpnow.com domain.