Display network address - tone down Webpack output

packages/cli/src/get-network-address.ts

@@ -0,0 +1,13 @@
+import {networkInterfaces} from 'os';
+
+export const getNetworkAddress = (): string | undefined => {
+	for (const interfaceDetails of Object.values(networkInterfaces())) {
+		if (!interfaceDetails) continue;
+
+		for (const details of interfaceDetails) {
+			const {address, family, internal} = details;
+
+			if (family === 'IPv4' && !internal) return address;
+		}
+	}
+};

packages/cli/src/preview-server/dev-middleware/setup-hooks.ts

@@ -1,5 +1,6 @@
 import type {webpack} from '@remotion/bundler';
 import {Log} from '../../log';
+import {truthy} from '../../truthy';
 import {isColorSupported} from './is-color-supported';
 import type {DevMiddlewareContext} from './types';
 
@@ -25,16 +26,28 @@ export function setupHooks(context: DevMiddlewareContext) {
 
 			logger.log('Compilation finished');
 
-			const statsOptions = {
-				preset: 'normal',
+			const statsOptions: webpack.Configuration['stats'] = {
+				preset: 'errors-warnings',
 				colors: isColorSupported,
 			};
 
 			const printedStats = stats.toString(statsOptions);
 
-			// Avoid extra empty line when `stats: 'none'`
-			if (printedStats) {
-				Log.info(printedStats);
+			const lines = printedStats
+				.split('\n')
+				.map((a) => a.trimEnd())
+				.filter(truthy)
+				.map((a) => {
+					if (a.startsWith('webpack compiled')) {
+						return `Built in ${stats.endTime - stats.startTime}ms`;
+					}
+
+					return a;
+				})
+				.join('\n');
+
+			if (lines) {
+				Log.info(lines);
 			}
 
 			context.callbacks = [];

packages/cli/src/preview-server/hot-middleware/index.tsx

@@ -8,13 +8,8 @@ import type {webpack} from '@remotion/bundler';
 import type {IncomingMessage, ServerResponse} from 'http';
 import {parse} from 'url';
 import {Log} from '../../log';
-import type {
-	HotMiddlewareMessage,
-	ModuleMap,
-	WebpackStats} from './types';
-import {
-	hotMiddlewareOptions
-} from './types';
+import type {HotMiddlewareMessage, ModuleMap, WebpackStats} from './types';
+import {hotMiddlewareOptions} from './types';
 
 const pathMatch = function (url: string, path: string) {
 	try {
@@ -35,7 +30,7 @@ export const webpackHotMiddleware = (compiler: webpack.Compiler) => {
 
 	function onInvalid() {
 		latestStats = null;
-		Log.info('webpack building...');
+		Log.info('Building...');
 		eventStream?.publish({
 			action: 'building',
 		});
@@ -143,8 +138,6 @@ function publishStats(
 			name = statsResult.compilation.name || '';
 		}
 
-		Log.info(`webpack built in ${_stats.time}ms`);
-
 		eventStream?.publish({
 			name,
 			action,

packages/cli/src/preview.ts

@@ -1,8 +1,10 @@
 import betterOpn from 'better-opn';
 import path from 'path';
+import {chalk} from './chalk';
 import {ConfigInternals} from './config';
 import {getEnvironmentVariables} from './get-env';
 import {getInputProps} from './get-input-props';
+import {getNetworkAddress} from './get-network-address';
 import {Log} from './log';
 import {parsedCli} from './parse-command-line';
 import type {LiveEventsServer} from './preview-server/live-events';
@@ -83,7 +85,17 @@ export const previewCommand = async (remotionRoot: string) => {
 	);
 
 	setLiveEventsListener(liveEventsServer);
-	Log.info(`Server running on http://localhost:${port}`);
+	const networkAddress = getNetworkAddress();
+	if (networkAddress) {
+		Log.info(
+			`Server ready - Local: ${chalk.underline(
+				`http://localhost:${port}`
+			)}, Network: ${chalk.underline(`http://${networkAddress}:${port}`)}`
+		);
+	} else {
+		Log.info(`Running on http://localhost:${port}`);
+	}
+
 	betterOpn(`http://localhost:${port}`);
 	await new Promise(noop);
 };