wp-now: Recognize when running in WebContainers environment and use the correct URL

package.json

@@ -36,6 +36,7 @@
 		"@php-wasm/universal": "0.5.4",
 		"@php-wasm/web": "0.5.4",
 		"@uiw/react-codemirror": "^4.21.20",
+		"@webcontainer/env": "1.1.0",
 		"@wp-playground/blueprints": "0.5.4",
 		"@wp-playground/client": "0.5.4",
 		"classnames": "^2.3.2",

packages/wp-now/src/config.ts

@@ -12,6 +12,7 @@ import { portFinder } from './port-finder';
 import { isValidWordPressVersion } from './wp-playground-wordpress';
 import getWpNowPath from './get-wp-now-path';
 import { DEFAULT_PHP_VERSION, DEFAULT_WORDPRESS_VERSION } from './constants';
+import { isWebContainer, HostURL } from '@webcontainer/env';
 
 export interface CliOptions {
 	php?: string;
@@ -75,6 +76,15 @@ async function getAbsoluteURL() {
 	if (isGitHubCodespace) {
 		return getCodeSpaceURL(port);
 	}
+	if (isWebContainer()) {
+		return (
+			HostURL.parse('http://localhost:' + port)
+				.toString()
+				// Correct the bug in HostURL.parse – it should return https://
+				// instead of http://
+				.replace('http://', 'https://')
+		);
+	}
 
 	if (absoluteUrlFromBlueprint) {
 		return absoluteUrlFromBlueprint;

packages/wp-now/src/start-server.ts

@@ -7,6 +7,7 @@ import compressible from 'compressible';
 import fileUpload from 'express-fileupload';
 import { portFinder } from './port-finder';
 import { NodePHP } from '@php-wasm/node';
+import { isWebContainer } from '@webcontainer/env';
 import startWPNow from './wp-now';
 import { output } from './output';
 import { addTrailingSlash } from './add-trailing-slash';
@@ -103,6 +104,17 @@ export async function startServer(
 				),
 				body: body as string,
 			};
+
+			if (isWebContainer()) {
+				// Unlike a typical Nginx or reverse proxy setup, WebContainers
+				// overwrite the Host header sent by the browser with a localhost
+				// URL. However, WordPress detects when the Host header is different
+				// from the stored site URL and redirects back to the site URL.
+				// For WordPress to work, we need to make sure the host and origin
+				// headers contain  the public-facing site URL.
+				data.headers['host'] = new URL(options.absoluteUrl).hostname;
+				data.headers['origin'] = options.absoluteUrl;
+			}
 			const resp = await php.request(data);
 			res.statusCode = resp.httpStatusCode;
 			Object.keys(resp.headers).forEach((key) => {