v6.0.1: Fix URL the browser opens when the Dev Server is being proxied

package.json

@@ -2,7 +2,7 @@
     "name": "projext-plugin-webpack",
     "description": "Allows projext to use webpack as a build engine.",
     "homepage": "https://homer0.github.io/projext-plugin-webpack/",
-    "version": "6.0.0",
+    "version": "6.0.1",
     "repository": "homer0/projext-plugin-webpack",
     "author": "Leonardo Apiwan (@homer0) <me@homer0.com>",
     "license": "MIT",

src/services/configurations/browserDevelopmentConfiguration.js

@@ -186,10 +186,13 @@ class WebpackBrowserDevelopmentConfiguration extends ConfigurationFile {
         ]);
       }
       // Push the plugin that logs the dev server statuses and opens the browser.
-      config.plugins.push(new ProjextWebpackOpenDevServer(devServerConfig.url, {
-        logger: this.appLogger,
-        openBrowser: devServerConfig.open,
-      }));
+      config.plugins.push(new ProjextWebpackOpenDevServer(
+        (devServerConfig.proxied ? devServerConfig.proxied.url : devServerConfig.url),
+        {
+          logger: this.appLogger,
+          openBrowser: devServerConfig.open,
+        }
+      ));
     } else if (target.hot) {
       /**
        * If the target requires HMR but is not running with the dev server, it means that there's
@@ -264,23 +267,44 @@ class WebpackBrowserDevelopmentConfiguration extends ConfigurationFile {
     if (!hasASSLFile) {
       delete config.ssl;
     }
+    /**
+     * Define whether to build a proxied URL for the plugin that opens the browser or not. The
+     * reason for this is that when the server is proxied but the host is not defined, it will use
+     * the dev server host, and in that case, it should include the port too, something that
+     * wouldn't be necessary when the proxied host is specified.
+     */
+    let buildProxiedURL = true;
     // If the server is being proxied...
     if (config.proxied.enabled) {
       // ...if no `host` was specified, use the one defined for the server.
       if (config.proxied.host === null) {
         config.proxied.host = config.host;
+        buildProxiedURL = false;
       }
       // If no `https` option was specified, set it to `true` if at least one SSL file was sent.
       if (config.proxied.https === null) {
         config.proxied.https = hasASSLFile;
       }
+      // If a custom proxied host was specified, build the new URL.
+      if (buildProxiedURL) {
+        // Build the proxied URL.
+        const proxiedProtocol = config.proxied.https ? 'https' : 'http';
+        config.proxied.url = `${proxiedProtocol}://${config.proxied.host}`;
+      }
     } else {
       // ...otherwise, just remove the setting.
       delete config.proxied;
     }
 
     const protocol = config.ssl ? 'https' : 'http';
     config.url = `${protocol}://${config.host}:${config.port}`;
+    /**
+     * If the server is proxied, but without a custom host, copy the dev server URL into the
+     * proxied settings.
+     */
+    if (config.proxied && !buildProxiedURL) {
+      config.proxied.url = config.url;
+    }
 
     return config;
   }

src/typedef.js

@@ -220,6 +220,8 @@
  * The host used to proxy the dev server.
  * @property {boolean} https
  * Whether or not the proxied host uses `https`.
+ * @property {string} url
+ * The complete URL being used to proxy the dev server.
  */
 
 /**

tests/services/configurations/browserDevelopmentConfiguration.test.js

@@ -1264,7 +1264,7 @@ describe('services/configurations:browserDevelopmentConfiguration', () => {
         ssl: {},
         proxied: {
           enabled: true,
-          host: 'my-proxied-host',
+          host: 'my-proxied-host.com',
           https: false,
         },
       },
@@ -1306,6 +1306,7 @@ describe('services/configurations:browserDevelopmentConfiguration', () => {
       copy,
     };
     const expectedURL = `http://${target.devServer.host}:${target.devServer.port}`;
+    const expectedProxiedURL = `http://${target.devServer.proxied.host}`;
     const expectedConfig = {
       devServer: {
         port: target.devServer.port,
@@ -1381,7 +1382,157 @@ describe('services/configurations:browserDevelopmentConfiguration', () => {
     expect(targetsHTML.getFilepath).toHaveBeenCalledTimes(1);
     expect(targetsHTML.getFilepath).toHaveBeenCalledWith(target);
     expect(ProjextWebpackOpenDevServer).toHaveBeenCalledTimes(1);
-    expect(ProjextWebpackOpenDevServer).toHaveBeenCalledWith(expectedURL, {
+    expect(ProjextWebpackOpenDevServer).toHaveBeenCalledWith(expectedProxiedURL, {
+      logger: appLogger,
+      openBrowser: target.devServer.open,
+    });
+  });
+
+  it('should create a configuration for running the dev server proxied with a SSL host', () => {
+    // Given
+    const appLogger = 'appLogger';
+    const events = {
+      reduce: jest.fn((eventName, loaders) => loaders),
+    };
+    const pathUtils = {
+      join: jest.fn((rest) => rest),
+    };
+    const targetsHTML = {
+      getFilepath: jest.fn((targetInfo) => targetInfo.html.template),
+    };
+    const webpackBaseConfiguration = 'webpackBaseConfiguration';
+    const webpackPluginInfo = {
+      name: 'my-plugin',
+    };
+    const target = {
+      name: 'targetName',
+      runOnDevelopment: true,
+      devServer: {
+        port: 2509,
+        host: 'localhost',
+        open: true,
+        ssl: {},
+        proxied: {
+          enabled: true,
+          host: 'my-secured-proxied-host.com',
+          https: true,
+        },
+      },
+      folders: {
+        build: 'build-folder',
+      },
+      paths: {
+        source: 'source-path',
+      },
+      html: {
+        template: 'index.html',
+      },
+      sourceMap: {},
+      css: {},
+      hot: true,
+      watch: {
+        development: false,
+      },
+    };
+    const definitions = 'definitions';
+    const babelPolyfillEntry = 'babel-polyfill';
+    const targetEntry = 'index.js';
+    const entry = {
+      [target.name]: [
+        babelPolyfillEntry,
+        targetEntry,
+      ],
+    };
+    const output = {
+      js: 'statics/js/build.js',
+      css: 'statics/css/build.css',
+    };
+    const copy = ['file-to-copy'];
+    const params = {
+      target,
+      definitions,
+      entry,
+      output,
+      copy,
+    };
+    const expectedURL = `http://${target.devServer.host}:${target.devServer.port}`;
+    const expectedProxiedURL = `https://${target.devServer.proxied.host}`;
+    const expectedConfig = {
+      devServer: {
+        port: target.devServer.port,
+        inline: false,
+        open: false,
+        hot: true,
+        publicPath: '/',
+        public: target.devServer.proxied.host,
+      },
+      entry: {
+        [target.name]: [
+          babelPolyfillEntry,
+          `webpack-dev-server/client?${expectedURL}`,
+          'webpack/hot/only-dev-server',
+          targetEntry,
+        ],
+      },
+      output: {
+        path: `./${target.folders.build}`,
+        filename: output.js,
+        publicPath: '/',
+      },
+      mode: 'development',
+      plugins: expect.any(Array),
+    };
+    let sut = null;
+    let result = null;
+    // When
+    sut = new WebpackBrowserDevelopmentConfiguration(
+      appLogger,
+      events,
+      pathUtils,
+      targetsHTML,
+      webpackBaseConfiguration,
+      webpackPluginInfo
+    );
+    result = sut.getConfig(params);
+    // Then
+    expect(result).toEqual(expectedConfig);
+    expect(MiniCssExtractPluginMock.mocks.constructor).toHaveBeenCalledTimes(1);
+    expect(MiniCssExtractPluginMock.mocks.constructor).toHaveBeenCalledWith({
+      filename: output.css,
+    });
+    expect(HtmlWebpackPlugin).toHaveBeenCalledTimes(1);
+    expect(HtmlWebpackPlugin).toHaveBeenCalledWith(Object.assign(
+      target.html,
+      {
+        template: target.html.template,
+        inject: 'body',
+      }
+    ));
+    expect(ScriptExtHtmlWebpackPlugin).toHaveBeenCalledTimes(1);
+    expect(ScriptExtHtmlWebpackPlugin).toHaveBeenCalledWith({
+      defaultAttribute: 'async',
+    });
+    expect(webpackMock.HotModuleReplacementPluginMock).toHaveBeenCalledTimes(1);
+    expect(webpackMock.NamedModulesPluginMock).toHaveBeenCalledTimes(1);
+    expect(webpackMock.NoEmitOnErrorsPluginMock).toHaveBeenCalledTimes(1);
+    expect(webpackMock.DefinePluginMock).toHaveBeenCalledTimes(1);
+    expect(webpackMock.DefinePluginMock).toHaveBeenCalledWith(definitions);
+    expect(OptimizeCssAssetsPlugin).toHaveBeenCalledTimes(1);
+    expect(CopyWebpackPlugin).toHaveBeenCalledTimes(1);
+    expect(CopyWebpackPlugin).toHaveBeenCalledWith(copy);
+    expect(events.reduce).toHaveBeenCalledTimes(1);
+    expect(events.reduce).toHaveBeenCalledWith(
+      [
+        'webpack-browser-development-configuration',
+        'webpack-browser-configuration',
+      ],
+      expectedConfig,
+      params
+    );
+    expect(targetsHTML.getFilepath).toHaveBeenCalledTimes(1);
+    expect(targetsHTML.getFilepath).toHaveBeenCalledWith(target);
+    expect(ProjextWebpackOpenDevServer).toHaveBeenCalledTimes(1);
+    expect(ProjextWebpackOpenDevServer).toHaveBeenCalledWith(expectedProxiedURL, {
       logger: appLogger,
       openBrowser: target.devServer.open,
     });