client: adjust devServerPort

generators/angular/templates/webpack/webpack.custom.js.ejs

@@ -69,7 +69,7 @@ module.exports = async (config, options, targetOptions) => {
       new BrowserSyncPlugin(
         {
           host: 'localhost',
-          port: 9000,
+          port: <%- devServerPortProxy %>,
           https: tls,
           proxy: {
             target: `http${tls ? 's' : ''}://localhost:${targetOptions.target === 'serve' ? '<%= devServerPort %>' : '<%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>'}`,
@@ -80,7 +80,7 @@ module.exports = async (config, options, targetOptions) => {
             proxyReq: [
               function (proxyReq) {
                 // URI that will be retrieved by the ForwardedHeaderFilter on the server side
-                proxyReq.setHeader('X-Forwarded-Host', 'localhost:9000');
+                proxyReq.setHeader('X-Forwarded-Host', 'localhost:<%- devServerPortProxy %>');
                 proxyReq.setHeader('X-Forwarded-Proto', 'https');
               },
             ],

generators/app/__snapshots__/generator.spec.ts.snap

@@ -326,6 +326,7 @@ exports[`generator - app with default config should match snapshot 1`] = `
   "devLiquibaseUrl": "jdbc:postgresql://localhost:5432/jhipster",
   "devR2dbcUrl": undefined,
   "devServerPort": 4200,
+  "devServerPortProxy": 9000,
   "dockerContainers": {
     "apachepulsar/pulsar": "apachepulsar-pulsar-placeholder",
     "cassandra": "cassandra-placeholder",
@@ -991,6 +992,7 @@ exports[`generator - app with gateway should match snapshot 1`] = `
   "devLiquibaseUrl": "jdbc:postgresql://localhost:5432/jhipster",
   "devR2dbcUrl": "r2dbc:postgresql://localhost:5432/jhipster",
   "devServerPort": 4200,
+  "devServerPortProxy": 9000,
   "dockerContainers": {
     "apachepulsar/pulsar": "apachepulsar-pulsar-placeholder",
     "cassandra": "cassandra-placeholder",
@@ -1651,6 +1653,7 @@ exports[`generator - app with microservice should match snapshot 1`] = `
   "devLiquibaseUrl": "jdbc:postgresql://localhost:5432/jhipster",
   "devR2dbcUrl": undefined,
   "devServerPort": undefined,
+  "devServerPortProxy": undefined,
   "dockerContainers": {
     "apachepulsar/pulsar": "apachepulsar-pulsar-placeholder",
     "cassandra": "cassandra-placeholder",

generators/client/command.ts

@@ -85,6 +85,20 @@ const command = {
       choices: ['webpack', 'vite'],
       scope: 'storage',
     },
+    devServerPort: {
+      cli: {
+        type: Number,
+        hide: true,
+      },
+      scope: 'storage',
+    },
+    devServerPortProxy: {
+      cli: {
+        type: Number,
+        hide: true,
+      },
+      scope: 'storage',
+    },
     microfrontend: {
       description: 'Enable microfrontend support',
       cli: {

generators/client/generator.ts

@@ -83,19 +83,10 @@ export default class JHipsterClientGenerator extends BaseApplicationGenerator {
       },
 
       configureDevServerPort() {
-        if (this.jhipsterConfig.devServerPort !== undefined) return;
+        if (this.jhipsterConfig.devServerPort !== undefined || this.jhipsterConfig.applicationIndex === undefined) return;
 
-        const { clientFramework, applicationIndex } = this.jhipsterConfigWithDefaults;
-        const devServerBasePort = clientFramework === ANGULAR ? 4200 : 9060;
-        let devServerPort;
-
-        if (applicationIndex !== undefined) {
-          devServerPort = devServerBasePort + applicationIndex;
-        } else if (!devServerPort) {
-          devServerPort = devServerBasePort;
-        }
-
-        this.jhipsterConfig.devServerPort = devServerPort;
+        const { applicationIndex, devServerPort } = this.jhipsterConfigWithDefaults;
+        this.jhipsterConfig.devServerPort = devServerPort + applicationIndex;
       },
     });
   }

generators/docker-compose/generator.ts

@@ -196,6 +196,9 @@ export default class DockerComposeGenerator extends BaseWorkspacesGenerator {
             if (appConfig.devServerPort !== undefined) {
               deployment.keycloakRedirectUris += `"http://localhost:${appConfig.devServerPort}/*", `;
             }
+            if (appConfig.devServerPortProxy !== undefined) {
+              deployment.keycloakRedirectUris += `"http://localhost:${appConfig.devServerPortProxy}/*", `;
+            }
             // Split ports by ":" and take last 2 elements to skip the hostname/IP if present
             const ports = yamlConfig.ports[0].split(':').slice(-2);
             ports[0] = appConfig.composePort;

generators/docker-compose/templates/realm-config/jhipster-realm.json.ejs

@@ -1074,14 +1074,12 @@
         <%- keycloakRedirectUris %>
         "http://localhost:8100/*",
         "http://127.0.0.1:8761/*",
-        "http://localhost:9000/*",
         "dev.localhost.ionic:*"
       ],
       "webOrigins": [
         <%- keycloakRedirectUris.replace(/\/\*/g, "") %>
         "http://localhost:8100",
-        "http://127.0.0.1:8761",
-        "http://localhost:9000"
+        "http://127.0.0.1:8761"
       ],
       "notBefore": 0,
       "bearerOnly": false,

generators/java/generators/server/generator.ts

@@ -98,6 +98,7 @@ export default class ServerGenerator extends BaseApplicationGenerator {
         });
       },
       packageJsonE2eScripts({ application }) {
+        const { devServerPort, devServerPortProxy: devServerPortE2e = devServerPort } = application;
         const scriptsStorage = this.packageJson.createStorage('scripts');
         const buildCmd = application.buildToolGradle ? 'gradlew' : 'mvnw -ntp';
 
@@ -117,7 +118,7 @@ export default class ServerGenerator extends BaseApplicationGenerator {
             'ci:e2e:run': 'concurrently -k -s first -n application,e2e -c red,blue npm:ci:e2e:server:start npm:e2e:headless',
             'ci:e2e:dev': `concurrently -k -s first -n application,e2e -c red,blue "./${buildCmd}" npm:e2e:headless`,
             'e2e:dev': `concurrently -k -s first -n application,e2e -c red,blue "./${buildCmd}" npm:e2e`,
-            'e2e:devserver': `concurrently -k -s first -n backend,frontend,e2e -c red,yellow,blue npm:backend:start npm:start "wait-on -t ${WAIT_TIMEOUT} http-get://127.0.0.1:9000 && npm run e2e:headless -- -c baseUrl=http://localhost:9000"`,
+            'e2e:devserver': `concurrently -k -s first -n backend,frontend,e2e -c red,yellow,blue npm:backend:start npm:start "wait-on -t ${WAIT_TIMEOUT} http-get://127.0.0.1:${devServerPortE2e} && npm run e2e:headless -- -c baseUrl=http://localhost:${devServerPortE2e}"`,
           });
         }
       },

generators/react/templates/webpack/webpack.dev.js.ejs

@@ -115,7 +115,7 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
       {
         https: options.tls,
         host: 'localhost',
-        port: 9000,
+        port: <%- devServerPortProxy %>,
         proxy: {
           target: `http${options.tls ? 's' : ''}://localhost:${options.watch ? '<%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>' : '<%= devServerPort %>'}`,
           ws: true,

generators/spring-boot/templates/src/main/resources/config/application-dev.yml.ejs

@@ -302,7 +302,7 @@ jhipster:
   <%_ if (microfrontend) { _%>
     # Ports <%= devServerPort + 1 %>-<%= devServerPort + 9 %> are allowed for microfrontend development
   <%_ } _%>
-    allowed-origins: "http://localhost:8100,https://localhost:8100,http://localhost:9000,https://localhost:9000<%_ if (!skipClient) { _%>,http://localhost:<%= devServerPort %>,https://localhost:<%= devServerPort %><%_ if (microfrontend) { for (let port = 1; port < 10; port++) { _%>,http://localhost:<%= devServerPort + port %>,https://localhost:<%= devServerPort + port %><%_ } _%><%_ } } _%>"
+    allowed-origins: "http://localhost:8100,https://localhost:8100<%_ if (devServerPortProxy) { _%>,http://localhost:<%= devServerPortProxy %>,https://localhost:<%= devServerPortProxy %><%_ } _%><%_ if (!skipClient) { _%>,http://localhost:<%= devServerPort %>,https://localhost:<%= devServerPort %><%_ if (microfrontend) { for (let port = 1; port < 10; port++) { _%>,http://localhost:<%= devServerPort + port %>,https://localhost:<%= devServerPort + port %><%_ } _%><%_ } } _%>"
     # Enable CORS when running in GitHub Codespaces
     allowed-origin-patterns: 'https://*.githubpreview.dev'
     allowed-methods: "*"

generators/vue/generator.ts

@@ -52,6 +52,23 @@ export default class VueGenerator extends BaseApplicationGenerator {
     }
   }
 
+  get configuring() {
+    return this.asConfiguringTaskGroup({
+      configureDevServerPort() {
+        if (this.jhipsterConfig.devServerPort === undefined) return;
+        if (this.isJhipsterVersionLessThan('8.7.4')) {
+          // Migrate old devServerPort with new one
+          const { applicationIndex = 0 } = this.jhipsterConfigWithDefaults;
+          this.jhipsterConfig.devServerPort = 9000 + applicationIndex;
+        }
+      },
+    });
+  }
+
+  get [BaseApplicationGenerator.CONFIGURING]() {
+    return this.delegateTasksToBlueprint(() => this.configuring);
+  }
+
   get loading() {
     return this.asLoadingTaskGroup({
       loadPackageJson({ application }) {

generators/vue/templates/vite.config.mts.ejs

@@ -81,7 +81,7 @@ let config = defineConfig({
   },
   server: {
     host: true,
-    port: 9000,
+    port: <%- devServerPort %>,
     proxy: Object.fromEntries(
       [
         '/api',

generators/vue/templates/webpack/webpack.dev.js.ejs

@@ -43,7 +43,7 @@ module.exports = (env, options) => {
     new BrowserSyncPlugin(
       {
         host: 'localhost',
-        port: 9000,
+        port: <%- devServerPortProxy %>,
         proxy: {
           target: `http://localhost:${options.watch ? '<%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>' : '<%= devServerPort %>'}`,
           ws: true,

lib/jhipster/default-application-options.ts

@@ -119,12 +119,19 @@ export function getConfigForClientApplication(options: ApplicationDefaults = {})
     options[CLIENT_THEME_VARIANT] = 'primary';
   }
   if (clientFramework === 'vue') {
-    options.clientBundler = options.microfrontend || options.applicationType === 'microservice' ? 'webpack' : 'vite';
+    options.clientBundler ??= options.microfrontend || options.applicationType === 'microservice' ? 'webpack' : 'vite';
+    options.devServerPort ??= options.clientBundler === 'webpack' ? 9060 : 9000;
   } else if (clientFramework === 'react') {
-    options.clientBundler = 'webpack';
+    options.clientBundler ??= 'webpack';
+    options.devServerPort ??= 9060;
   } else if (clientFramework === 'angular') {
-    options.clientBundler = 'webpack';
+    options.clientBundler ??= 'webpack';
+    options.devServerPort ??= 4200;
+  } else {
+    options.devServerPort ??= 9060;
   }
+  options.devServerPortProxy ??= options.clientBundler === 'webpack' ? 9000 : undefined;
+
   return options;
 }