diff --git a/packages/playwright-ct-core/src/vitePlugin.ts b/packages/playwright-ct-core/src/vitePlugin.ts
index 3fd8d13211..abf4c9dc22 100644
--- a/packages/playwright-ct-core/src/vitePlugin.ts
+++ b/packages/playwright-ct-core/src/vitePlugin.ts
@@ -69,8 +69,7 @@ export function createPlugin(
       // - frameworks overrides (frameworkOverrides);
 
       const use = config.projects[0].use as CtConfig;
-      const port = use.ctPort || 3100;
-      const host = use.baseURL || 'localhost';
+      const baseURL = new URL(use.baseURL || 'http://localhost');
       const relativeTemplateDir = use.ctTemplateDir || 'playwright';
 
       // FIXME: use build plugin to determine html location to resolve this.
@@ -79,7 +78,7 @@ export function createPlugin(
       const templateDir = path.join(configDir, relativeTemplateDir);
 
       // Compose base config from the playwright config only.
-      const baseConfig = {
+      const baseConfig: InlineConfig = {
         root: configDir,
         configFile: false,
         define: {
@@ -92,8 +91,9 @@ export function createPlugin(
           outDir: use.ctCacheDir ? path.resolve(configDir, use.ctCacheDir) : path.resolve(templateDir, '.cache')
         },
         preview: {
-          port,
-          host,
+          https: baseURL.protocol.startsWith('https:'),
+          host: baseURL.hostname,
+          port: use.ctPort || Number(baseURL.port) || 3100
         },
         // Vite preview server will otherwise always return the index.html with 200.
         appType: 'custom',
diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts
index 4be0a43925..4eb6821007 100644
--- a/tests/playwright-test/playwright.ct-react.spec.ts
+++ b/tests/playwright-test/playwright.ct-react.spec.ts
@@ -377,7 +377,7 @@ test('should handle the baseUrl config', async ({ runInlineTest }) => {
   const result = await runInlineTest({
     'playwright.config.ts': `
       import { defineConfig } from '@playwright/experimental-ct-react';
-      export default defineConfig({ use: { baseURL: '127.0.0.1' } });
+      export default defineConfig({ use: { baseURL: 'http://127.0.0.1:8080' } });
     `,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': ``,
@@ -392,7 +392,7 @@ test('should handle the baseUrl config', async ({ runInlineTest }) => {
 
       test('pass component', async ({ page, mount }) => {
         const component = await mount(<Component />);
-        await expect(page).toHaveURL('http://127.0.0.1:3100/');
+        await expect(page).toHaveURL('http://127.0.0.1:8080/');
       });
     `,
   }, { workers: 1 });
@@ -435,7 +435,7 @@ test('should prioritize the vite host config over the baseUrl config', async ({
       import { defineConfig } from '@playwright/experimental-ct-react';
       export default defineConfig({
         use: {
-          baseURL: 'localhost',
+          baseURL: 'http://localhost:8080',
           ctViteConfig: { preview: { host: '127.0.0.1' } }
         },
       });
@@ -453,7 +453,7 @@ test('should prioritize the vite host config over the baseUrl config', async ({
 
       test('pass component', async ({ page, mount }) => {
         const component = await mount(<Component />);
-        await expect(page).toHaveURL('http://127.0.0.1:3100/');
+        await expect(page).toHaveURL('http://127.0.0.1:8080/');
       });
     `,
   }, { workers: 1 });