Custom Domain: Allow updating domains for existing sites.

Author: youknowriad

src/components/site-form.tsx

@@ -13,7 +13,7 @@ import { ACCEPTED_IMPORT_FILE_TYPES } from 'src/constants';
 import { useDocsLink } from 'src/hooks/use-docs-link';
 import { useOffline } from 'src/hooks/use-offline';
 import { cx } from 'src/lib/cx';
-import { generateCustomDomainFromSiteName } from 'src/lib/generate-custom-domain';
+import { generateCustomDomainFromSiteName } from 'src/lib/domains';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { useAppDispatch, useRootSelector } from 'src/stores';
 import {

src/hooks/use-add-site.ts

@@ -3,7 +3,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import { useCallback, useMemo, useState } from 'react';
 import { useImportExport } from 'src/hooks/use-import-export';
 import { useSiteDetails } from 'src/hooks/use-site-details';
-import { generateCustomDomainFromSiteName } from 'src/lib/generate-custom-domain';
+import { generateCustomDomainFromSiteName, validateDomainName } from 'src/lib/domains';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import {
 	DEFAULT_PHP_VERSION,
@@ -39,20 +39,9 @@ export function useAddSite() {
 	const handleCustomDomainChange = useCallback(
 		( value: string | null ) => {
 			setCustomDomain( value );
-			// Validate custom domain if enabled
-			const domainPattern =
-				/^(?!-)[\p{L}\p{N}][\p{L}\p{N}-]{0,61}[\p{L}\p{N}](?<!-)(?:\.(?!-)[\p{L}\p{N}-]{1,61}[\p{L}\p{N}](?<!-))+$/u;
-			if ( useCustomDomain && value && ! domainPattern.test( value ) ) {
-				setCustomDomainError( __( 'Please enter a valid domain name' ) );
-			} else if ( useCustomDomain && value && value.length > 253 ) {
-				setCustomDomainError( __( 'The domain name is too long' ) );
-			} else if ( useCustomDomain && value === '' ) {
-				setCustomDomainError( __( 'The domain name is required' ) );
-			} else {
-				setCustomDomainError( '' );
-			}
+			setCustomDomainError( validateDomainName( useCustomDomain, value ) );
 		},
-		[ __, useCustomDomain, setCustomDomain, setCustomDomainError ]
+		[ useCustomDomain, setCustomDomain, setCustomDomainError ]
 	);
 
 	const handlePathSelectorClick = useCallback( async () => {

src/ipc-handlers.ts

@@ -27,7 +27,7 @@ import { download } from 'src/lib/download';
 import { isEmptyDir, pathExists, isWordPressDirectory, sanitizeFolderName } from 'src/lib/fs-utils';
 import { getImageData } from 'src/lib/get-image-data';
 import { getSyncBackupTempPath } from 'src/lib/get-sync-backup-temp-path';
-import { addDomainToHosts } from 'src/lib/hosts-file';
+import { addDomainToHosts, replaceDomainInHosts } from 'src/lib/hosts-file';
 import { exportBackup } from 'src/lib/import-export/export/export-manager';
 import { ExportOptions } from 'src/lib/import-export/export/types';
 import { ImportExportEventData } from 'src/lib/import-export/handle-events';
@@ -220,6 +220,10 @@ export async function updateSite(
 	updatedSite: SiteDetails
 ): Promise< SiteDetails[] > {
 	const userData = await loadUserData();
+
+	const existingSite = userData.sites.find( ( site ) => site.id === updatedSite.id );
+	const oldDomain = existingSite?.customDomain;
+	const newDomain = updatedSite.customDomain;
 	const updatedSites = userData.sites.map( ( site ) =>
 		site.id === updatedSite.id ? updatedSite : site
 	);
@@ -228,6 +232,12 @@ export async function updateSite(
 	const server = SiteServer.get( updatedSite.id );
 	if ( server ) {
 		server.updateSiteDetails( updatedSite );
+
+		// Handle domain changes if the site is running (updates hosts and database)
+		if ( oldDomain !== newDomain ) {
+			replaceDomainInHosts( oldDomain, newDomain, server.details.port );
+			await updateSiteUrlToLocal( updatedSite.id );
+		}
 	}
 	await saveUserData( userData );
 	return mergeSiteDetailsWithRunningDetails( userData.sites );

src/lib/domains.ts

@@ -0,0 +1,33 @@
+import { __ } from '@wordpress/i18n';
+import { sanitizeFolderName } from './generate-site-name';
+
+/**
+ * Generates a suitable domain name from site name
+ */
+export const generateCustomDomainFromSiteName = ( siteName: string ): string => {
+	const domainBase = sanitizeFolderName( siteName );
+
+	return `${ domainBase }.wp.local`;
+};
+
+export const validateDomainName = (
+	useCustomDomain: boolean,
+	domainName: string | null
+): string => {
+	// Validate custom domain if enabled
+	const domainPattern =
+		/^(?!-)[\p{L}\p{N}][\p{L}\p{N}-]{0,61}[\p{L}\p{N}](?<!-)(?:\.(?!-)[\p{L}\p{N}-]{1,61}[\p{L}\p{N}](?<!-))+$/u;
+	if ( useCustomDomain && domainName && ! domainPattern.test( domainName ) ) {
+		return __( 'Please enter a valid domain name' );
+	}
+
+	if ( useCustomDomain && domainName && domainName.length > 253 ) {
+		return __( 'The domain name is too long' );
+	}
+
+	if ( useCustomDomain && domainName === '' ) {
+		return __( 'The domain name is required' );
+	}
+
+	return '';
+};

src/lib/generate-custom-domain.ts

@@ -127,6 +127,48 @@ export const removeDomainFromHosts = async ( domain: string ): Promise< void > =
 	}
 };
 
+export const replaceDomainInHosts = async (
+	oldDomain: string | undefined,
+	newDomain: string | undefined,
+	port: number
+): Promise< void > => {
+	if ( oldDomain === newDomain ) {
+		return;
+	}
+
+	if ( ! oldDomain && newDomain ) {
+		await addDomainToHosts( newDomain, port );
+		return;
+	}
+
+	if ( oldDomain && ! newDomain ) {
+		await removeDomainFromHosts( oldDomain );
+		return;
+	}
+
+	try {
+		const hostsContent = await readHostsFile();
+		const encodedOldDomain = domainToASCII( oldDomain as string );
+		const encodedNewDomain = domainToASCII( newDomain as string );
+		const oldPattern = createHostsEntryPattern( encodedOldDomain );
+		const newContent = updateStudioBlock( hostsContent, ( entries ) => {
+			const filtered = entries.filter( ( entry ) => ! entry.match( oldPattern ) );
+			return [ ...filtered, `127.0.0.1 ${ encodedNewDomain } # Port ${ port }` ];
+		} );
+
+		if ( newContent !== hostsContent ) {
+			await writeHostsFile( newContent );
+		}
+	} catch ( error ) {
+		Sentry.captureException( error );
+		console.error(
+			`Error replacing domain ${ oldDomain } with ${ newDomain } in hosts file:`,
+			error
+		);
+		throw error;
+	}
+};
+
 /**
  * Helper function for manipulating the "block" of entries in the hosts file
  * pertaining to WordPres Studio.

src/lib/hosts-file.ts

@@ -1,5 +1,5 @@
 import { readFile, writeFile } from 'fs';
-import { addDomainToHosts, removeDomainFromHosts } from '../hosts-file';
+import { addDomainToHosts, removeDomainFromHosts, replaceDomainInHosts } from '../hosts-file';
 
 const readFileCallbackMock = jest.fn();
 
@@ -191,4 +191,94 @@ describe( 'hosts-file', () => {
 			await expect( removeDomainFromHosts( 'test.wp.cloud' ) ).rejects.toThrow( 'Read error' );
 		} );
 	} );
+
+	// Generate a few unit tests for the replaceDomainInHosts function
+	describe( 'replaceDomainInHosts', () => {
+		it( 'should replace an existing domain with a new domain', async () => {
+			readFileCallbackMock.mockResolvedValueOnce( sampleHostsContent );
+
+			await replaceDomainInHosts( 'foo.wp.cloud', 'new-domain.wp.cloud', 8002 );
+
+			expect( readFile ).toHaveBeenCalled();
+			expect( writeFile ).toHaveBeenCalled();
+
+			const newContent = ( writeFile as unknown as jest.Mock ).mock.calls[ 0 ][ 1 ];
+
+			expect( newContent ).toEqual(
+				`127.0.0.1 localhost
+::1 localhost
+
+# Some comment
+
+# BEGIN WordPress Studio
+127.0.0.1 bar.wp.cloud # Port 8001
+127.0.0.1 new-domain.wp.cloud # Port 8002
+# END WordPress Studio
+
+# Other entries
+192.168.1.1 router`
+			);
+		} );
+
+		it( 'should add a new domain if old domain is undefined', async () => {
+			readFileCallbackMock.mockResolvedValueOnce( sampleHostsContent );
+
+			await replaceDomainInHosts( undefined, 'new-domain.wp.cloud', 8002 );
+
+			expect( readFile ).toHaveBeenCalled();
+			expect( writeFile ).toHaveBeenCalled();
+
+			const newContent = ( writeFile as unknown as jest.Mock ).mock.calls[ 0 ][ 1 ];
+
+			expect( newContent ).toEqual(
+				`127.0.0.1 localhost
+::1 localhost
+
+# Some comment
+
+# BEGIN WordPress Studio
+127.0.0.1 foo.wp.cloud # Port 8000
+127.0.0.1 bar.wp.cloud # Port 8001
+127.0.0.1 new-domain.wp.cloud # Port 8002
+# END WordPress Studio
+
+# Other entries
+192.168.1.1 router`
+			);
+		} );
+
+		it( 'should remove the old domain if new domain is undefined', async () => {
+			readFileCallbackMock.mockResolvedValueOnce( sampleHostsContent );
+
+			await replaceDomainInHosts( 'foo.wp.cloud', undefined, 8000 );
+
+			expect( readFile ).toHaveBeenCalled();
+			expect( writeFile ).toHaveBeenCalled();
+
+			const newContent = ( writeFile as unknown as jest.Mock ).mock.calls[ 0 ][ 1 ];
+
+			expect( newContent ).toEqual(
+				`127.0.0.1 localhost
+::1 localhost
+
+# Some comment
+
+# BEGIN WordPress Studio
+127.0.0.1 bar.wp.cloud # Port 8001
+# END WordPress Studio
+
+# Other entries
+192.168.1.1 router`
+			);
+		} );
+
+		it( 'should not modify the hosts file if old and new domains are the same', async () => {
+			readFileCallbackMock.mockResolvedValueOnce( sampleHostsContent );
+
+			await replaceDomainInHosts( 'foo.wp.cloud', 'foo.wp.cloud', 8000 );
+
+			expect( readFile ).not.toHaveBeenCalled();
+			expect( writeFile ).not.toHaveBeenCalled();
+		} );
+	} );
 } );

src/lib/tests/hosts-file.test.ts

@@ -12,12 +12,15 @@ export const updateSiteUrlToLocal = async ( siteId: string ) => {
 	} );
 
 	if ( ! currentSiteUrl ) {
-		console.error( 'Failed to fetch site URL after import' );
+		console.error( 'Failed to fetch site URL' );
 		return;
 	}
 
 	const studioUrl = getSiteUrl( server.details );
 	const oldUrl = currentSiteUrl.trim();
+	if ( studioUrl === oldUrl ) {
+		return;
+	}
 	const urlWithoutProtocol = oldUrl.replace( /^https?:\/\//, '' );
 
 	const oldUrlVariants = [