Aurelia+TypeScript+Webpack开发环境配置HTTPS问题

Great question! When setting up HTTPS for your Aurelia + TypeScript + Webpack project (especially for Facebook login testing), there are a few key steps to ensure the https: true config actually takes effect. Let's walk through them:

1. Verify Your Webpack Dev Server Configuration Placement #

First, double-check that you've added the https setting in the correct section of your webpack.config.js. For the standard Aurelia Webpack skeleton, your devServer block should live directly in the root module.exports object, like this:

module.exports = {
  // ... other core configs (entry, output, module rules, etc.)
  devServer: {
    https: true,
    port: 8080,
    historyApiFallback: true, // Common for Aurelia SPAs to handle routing
    open: true // Optional: auto-opens the browser on start
  }
};

If your project uses environment-specific configs (e.g., separate webpack.dev.js), make sure you're modifying the development config file, not production.

2. Use a Trusted SSL Certificate (Avoid Browser Warnings) #

Webpack Dev Server uses a default self-signed certificate, but browsers (and Facebook's auth system) may flag this as untrusted. To fix this, generate your own local SSL certificate and configure Webpack to use it:

Step 2.1: Generate a Certificate #

Run this openssl command in your project root to create a self-signed certificate valid for 365 days:

openssl req -x509 -newkey rsa:4096 -nodes -keyout localhost-key.pem -out localhost.pem -days 365 -subj "/CN=localhost"

This creates two files: localhost-key.pem (private key) and localhost.pem (certificate). Store them in a dedicated folder (e.g., ./ssl) to keep your project organized.

Step 2.2: Update Webpack Config to Use the Certificate #

Modify your devServer block to reference the certificate files:

const fs = require('fs');

module.exports = {
  // ... other configs
  devServer: {
    https: {
      key: fs.readFileSync('./ssl/localhost-key.pem'),
      cert: fs.readFileSync('./ssl/localhost.pem'),
    },
    port: 8080,
    historyApiFallback: true
  }
};

3. Ensure Aurelia App Code Doesn't Hardcode HTTP #

Aurelia itself doesn't require special HTTPS configuration, but check your app code for any hardcoded HTTP URLs (e.g., API calls, auth redirects). Use relative paths or environment variables to dynamically switch between HTTP/HTTPS based on the environment.

For example, instead of:

const apiUrl = "http://localhost:3000/api";

Use:

const apiUrl = window.location.origin + "/api";

4. Clean Cache and Restart the Dev Server #

Webpack Dev Server sometimes caches old configs. Stop your running au run command, clear the Webpack cache (delete the node_modules/.cache folder if needed), then restart the server with au run.

5. Verify HTTPS is Working #

Once the server starts, navigate to https://localhost:8080. You should see your Aurelia app load (you might get a browser warning about the self-signed certificate—you can safely bypass this for local development). If the address bar shows a secure lock (even with a warning), HTTPS is active and ready for Facebook login testing.

内容的提问来源于stack exchange，提问作者clouddreams