vite (start|start-ssr): opening default browser on start and start-ssr command (#1223)

Co-authored-by: Dan Drory <[email protected]>
Co-authored-by: Adam Skoufis <[email protected]>

Author: 3 people

.changeset/dark-plums-play.md

@@ -0,0 +1,5 @@
+---
+'sku': minor
+---
+
+`vite (start|start-ssr)`: Open default browser on server start

fixtures/vite-test-app/src/client.tsx

@@ -9,7 +9,7 @@ export default ({ site }: { site: string }) => {
     document.getElementById('root')!,
     <StrictMode>
       <BrowserRouter>
-        <App site={site} />
+        <App site={site || 'au'} />
       </BrowserRouter>
     </StrictMode>,
   );

fixtures/vite-test-app/src/server.tsx

@@ -18,7 +18,7 @@ export default {
       <StrictMode>
         <LoadableProvider value={loadableCollector!}>
           <StaticRouter location={url || '/'}>
-            <App site={appSite || ''} />
+            <App site={appSite || 'au'} />
           </StaticRouter>
         </LoadableProvider>
       </StrictMode>,

packages/sku/src/openBrowser/index.ts

@@ -21,7 +21,7 @@ const supportedChromiumBrowsers = [
   'Arc',
 ];
 
-export default async (url: string) => {
+export const openBrowser = async (url: string) => {
   if (process.env.OPEN_TAB !== 'false' && !isCI) {
     let defaultBrowser = ''; // Has to be set to string otherwise it may be undefined on line 47.
     try {

packages/sku/src/program/commands/serve/serve.action.ts

@@ -10,7 +10,7 @@ import {
   withHostile,
 } from '@/utils/contextUtils/hosts.js';
 import allocatePort from '@/utils/allocatePort.js';
-import openBrowser from '@/openBrowser/index.js';
+import { openBrowser } from '@/openBrowser/index.js';
 import getSiteForHost from '@/utils/contextUtils/getSiteForHost.js';
 import { resolveEnvironment } from '@/utils/contextUtils/resolveEnvironment.js';
 import provider from '@/services/telemetry/index.js';

packages/sku/src/program/commands/start-ssr/webpack-start-ssr-handler.ts

@@ -20,7 +20,7 @@ import {
 import makeWebpackConfig from '@/services/webpack/config/webpack.config.ssr.js';
 import getStatsConfig from '@/services/webpack/config/statsConfig.js';
 import allocatePort from '@/utils/allocatePort.js';
-import openBrowser from '@/openBrowser/index.js';
+import { openBrowser } from '@/openBrowser/index.js';
 import createServerManager from '@/services/serverManager.js';
 
 import { watchVocabCompile } from '@/services/vocab/runVocab.js';

packages/sku/src/program/commands/start/webpack-start-handler.ts

@@ -4,7 +4,7 @@ import chalk from 'chalk';
 import exceptionFormatter from 'exception-formatter';
 import type { RequestHandler } from 'express';
 
-import openBrowser from '@/openBrowser/index.js';
+import { openBrowser } from '@/openBrowser/index.js';
 import getCertificate from '@/utils/certificate.js';
 
 import getStatsConfig from '@/services/webpack/config/statsConfig.js';

packages/sku/src/services/vite/helpers/server/createViteServerSsr.ts

@@ -1,9 +1,8 @@
 import path from 'node:path';
 import { Transform } from 'node:stream';
-import express, { type RequestHandler } from 'express';
+import express, { type RequestHandler, type Express } from 'express';
 import type { Manifest, ViteDevServer } from 'vite';
 import crypto from 'node:crypto';
-import { createServer as createHttpServer } from 'node:http';
 import { readFile } from 'node:fs/promises';
 
 import { createViteConfig } from '@/services/vite/helpers/createConfig.js';
@@ -22,11 +21,11 @@ type CreateServerOptions = {
 
 export const createViteServerSsr = async ({
   skuContext,
-}: CreateServerOptions) => {
+}: CreateServerOptions): Promise<Express> => {
   const isProduction = process.env.NODE_ENV === 'production';
   try {
     const app = express();
-    const server = createHttpServer(app);
+
     const manifest = isProduction
       ? JSON.parse(
           await readFile(resolve('./dist/.vite/manifest.json'), 'utf-8'),
@@ -63,10 +62,10 @@ export const createViteServerSsr = async ({
 
     app.use('*', createRequestHandler({ skuContext, vite, manifest }));
 
-    return server;
+    return app;
   } catch (e: any) {
     console.error(e);
-    return createHttpServer();
+    return express();
   }
 };
 

packages/sku/src/services/vite/index.ts

@@ -6,6 +6,8 @@ import { createViteServerSsr } from './helpers/server/createViteServerSsr.js';
 import { createViteConfig } from './helpers/createConfig.js';
 import { prerenderRoutes } from './helpers/prerenderRoutes.js';
 import { cleanTargetDirectory } from '@/utils/buildFileUtils.js';
+import { openBrowser } from '@/openBrowser/index.js';
+import { getAppHosts } from '@/utils/contextUtils/hosts.js';
 
 export const viteService = {
   build: async (skuContext: SkuContext) => {
@@ -24,10 +26,15 @@ export const viteService = {
     const server = await createViteServer(skuContext);
     await server.listen(skuContext.port.client);
 
+    const hosts = getAppHosts(skuContext);
+    const proto = skuContext.httpsDevServer ? 'https' : 'http';
+    const url = `${proto}://${hosts[0]}:${skuContext.port.client}${skuContext.initialPath}`;
+    openBrowser(url);
+
     if (skuContext.sites.length > 1) {
       skuContext.sites.forEach((site) => {
         console.log(
-          `Running ${site.name} on 'http://${site.host}:${skuContext.port.client}'`,
+          `Running ${site.name} on '${proto}://${site.host ?? 'localhost'}:${skuContext.port.client}'`,
         );
       });
     } else {
@@ -43,10 +50,15 @@ export const viteService = {
     });
     server.listen(skuContext.port.server);
 
+    const hosts = getAppHosts(skuContext);
+    const proto = skuContext.httpsDevServer ? 'https' : 'http';
+    const url = `${proto}://${hosts[0]}:${skuContext.port.server}${skuContext.initialPath}`;
+    openBrowser(url);
+
     if (skuContext.sites.length > 1) {
       skuContext.sites.forEach((site) => {
         console.log(
-          `Running ${site.name} on 'http://${site.host}:${skuContext.port.server}'`,
+          `Running ${site.name} on '${proto}://${site.host ?? 'localhost'}:${skuContext.port.server}'`,
         );
       });
     } else {