HTTPS Development Server Configuration

Problem Statement

Create a Stencil configuration that enables HTTPS for the development server with support for custom SSL certificates. The configuration should allow developers to provide their own certificate files or automatically use self-signed certificates.

Requirements

1. Create a stencil.config.ts configuration file that:

   • Enables the development server
   • Configures HTTPS support with optional custom certificates
   • Reads certificate file path from CERT_PATH environment variable (when set)
   • Reads key file path from KEY_PATH environment variable (when set)
   • Serves content from a www output directory
   • Runs on port 3333

2. Create a stencil.config.test.ts test file that validates:

   • HTTPS is enabled in the configuration
   • Custom certificate paths are correctly included when environment variables are set
   • The configuration remains valid when environment variables are not set

Constraints

• Use TypeScript for all files
• The configuration must be compatible with the build system
• Certificate paths should be optional
• When certificate paths are not provided, the system should handle it gracefully

Test Cases { .test-cases }

Test 1: HTTPS enabled { @test }

Input: Configuration with HTTPS enabled

Expected Output: The devServer configuration should have https property set to true or to an object with certificate configuration

Test 2: Custom certificate paths { @test }

Input: Environment variables CERT_PATH=/path/to/cert.pem and KEY_PATH=/path/to/key.pem

Expected Output: The devServer configuration should include these paths in its HTTPS configuration

Test 3: No custom certificates { @test }

Input: No certificate environment variables set

Expected Output: The configuration should still be valid and enable HTTPS (for self-signed certificate generation)

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides the web component compiler and development toolchain including the development server with HTTPS support.