fix: devServerConfig, localhost

Author: xylona.lxy

src/built-in-plugins/command-bundle/plugin/command-bundle.ts

@@ -44,7 +44,7 @@ export const commandBundle = async (opts: IOpts = {}) => {
       mode: opts.mode ?? 'development',
       outFileName: pri.sourceConfig.bundleFileName,
       devServerPort: freePort,
-      publicPath: `https://localhost:${freePort}`,
+      publicPath: `https://${pri.sourceConfig.devHost || 'localhost'}:${freePort}`,
       jsOnly: true,
       entryPath: path.join(pri.sourceRoot, path.format(componentEntry)),
       pipeConfig: async config => {
@@ -66,7 +66,9 @@ export const commandBundle = async (opts: IOpts = {}) => {
         );
 
         const dllHttpPath = urlJoin(
-          `${globalState.sourceConfig.useHttps ? 'https' : 'http'}://localhost:${freePort}`,
+          `${globalState.sourceConfig.useHttps ? 'https' : 'http'}://${
+            pri.sourceConfig.devHost || 'localhost'
+          }:${freePort}`,
           libraryStaticPath,
         );
 

src/built-in-plugins/command-dev/plugin/dashboard/client/pages/layout.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { componentEntry, pri } from '../../../../../../node';
 import * as io from 'socket.io-client';
 import { IProjectStatus } from '../../server/project-status-interface';
 import { MainComponent } from './main/main';
@@ -23,7 +24,7 @@ export const LayoutComponent = React.memo(() => {
   const socket = React.useRef<SocketIOClient.Socket>(null);
 
   React.useEffect(() => {
-    socket.current = io(`//localhost:${(window as any).serverPort}`);
+    socket.current = io(`//${pri.sourceConfig.devHost || 'localhost'}:${(window as any).serverPort}`);
 
     // Get init project status
     socket.current.emit('getProjectStatus');

src/built-in-plugins/command-dev/plugin/project-dev.ts

@@ -69,7 +69,9 @@ async function debugProject(options?: any) {
 
   const pipeConfig = async (config: webpack.Configuration) => {
     const dllHttpPath = urlJoin(
-      `${globalState.sourceConfig.useHttps ? 'https' : 'http'}://localhost:${freePort}`,
+      `${globalState.sourceConfig.useHttps ? 'https' : 'http'}://${
+        pri.sourceConfig.devHost || 'localhost'
+      }:${freePort}`,
       libraryStaticPath,
     );
 
@@ -280,7 +282,7 @@ function debugProjectPrepare(dashboardClientPort: number) {
         // Add dashboard iframe
         const dashboardIframe = document.createElement("iframe")
         dashboardIframe.id = "pri-help-iframe"
-        dashboardIframe.src = "//localhost:${dashboardClientPort}"
+        dashboardIframe.src = "//${pri.sourceConfig.devHost || 'localhost'}:${dashboardClientPort}"
         document.body.appendChild(dashboardIframe)
 
         // Add dashboard button

src/built-in-plugins/command-docs/plugin/dev-docs.ts

@@ -42,10 +42,12 @@ export async function devDocs() {
 
   await runWebpackDevServer({
     mode: 'development',
-    publicPath: `${pri.sourceConfig.useHttps ? 'https' : 'http'}://localhost:${freePort}`,
+    publicPath: `${pri.sourceConfig.useHttps ? 'https' : 'http'}://${
+      pri.sourceConfig.devHost || 'localhost'
+    }:${freePort}`,
     autoOpenBrowser: true,
     hot: pri.sourceConfig.hotReload,
-    devUrl: 'localhost',
+    devUrl: pri.sourceConfig.devHost || 'localhost',
     entryPath: docsEntryPath,
     devServerPort: freePort,
     htmlTemplatePath: path.join(__dirname, '../../../../template-project.ejs'),

src/built-in-plugins/command-preview/plugin/run-preview.ts

@@ -57,7 +57,10 @@ export const CommandPreview = async () => {
   } else {
     open(
       ensureEndWithSlash(
-        urlJoin(`${pri.sourceConfig.useHttps ? 'https' : 'http'}://localhost:${freePort}`, pri.sourceConfig.baseHref),
+        urlJoin(
+          `${pri.sourceConfig.useHttps ? 'https' : 'http'}://${pri.sourceConfig.devHost || 'localhost'}:${freePort}`,
+          pri.sourceConfig.baseHref,
+        ),
       ),
     );
   }

src/utils/webpack-dev-server.ts

@@ -16,11 +16,13 @@ import { globalState } from './global-state';
 import { tempPath } from './structor-config';
 import { logInfo } from './log';
 import { getWebpackConfig, IOptions } from './webpack-config';
+import { pri } from '../node';
 
 const smp = new SpeedMeasurePlugin();
 
 interface IExtraOptions {
   pipeConfig?: (config?: webpack.Configuration) => Promise<webpack.Configuration>;
+  pipeDevServerConfig?: (config?: WebpackDevServer.Configuration) => Promise<webpack.Configuration>;
   devServerPort: number;
   publicPath: string;
   jsOnly?: boolean;
@@ -74,8 +76,8 @@ export const runWebpackDevServer = async (opts: IOptions<IExtraOptions>) => {
     );
   }
 
-  const webpackDevServerConfig: WebpackDevServer.Configuration = {
-    host: 'localhost',
+  let webpackDevServerConfig: WebpackDevServer.Configuration = {
+    host: pri.sourceConfig.devHost || 'localhost',
     hot: opts.hot,
     hotOnly: opts.hot,
     publicPath: opts.publicPath,
@@ -113,6 +115,10 @@ export const runWebpackDevServer = async (opts: IOptions<IExtraOptions>) => {
     port: opts.devServerPort,
   } as any;
 
+  if (opts.pipeDevServerConfig) {
+    webpackDevServerConfig = await opts.pipeDevServerConfig(webpackDevServerConfig);
+  }
+
   WebpackDevServer.addDevServerEntrypoints(webpackConfig as any, webpackDevServerConfig);
 
   if (yargs.argv.measureSpeed) {
@@ -123,14 +129,16 @@ export const runWebpackDevServer = async (opts: IOptions<IExtraOptions>) => {
 
   const devServer = new WebpackDevServer(compiler as any, webpackDevServerConfig);
 
-  devServer.listen(opts.devServerPort, 'localhost', () => {
+  const host = pri.sourceConfig.devHost || webpackDevServerConfig.host || 'localhost';
+
+  devServer.listen(opts.devServerPort, host, () => {
     let devUrl: string = null;
     const localSuggestUrl = urlJoin(
-      `${opts.https || globalState.sourceConfig.useHttps ? 'https' : 'http'}://localhost:${opts.devServerPort}`,
+      `${opts.https || globalState.sourceConfig.useHttps ? 'https' : 'http'}://${host}:${opts.devServerPort}`,
       globalState.sourceConfig.baseHref,
     );
 
-    if (opts.devUrl === 'localhost') {
+    if (opts.devUrl === host) {
       devUrl = localSuggestUrl;
     } else if (opts.devUrl !== undefined) {
       ({ devUrl } = opts);