From 5bf445e350ce6bf2b5ec7f2a7e2686c9734b90f1 Mon Sep 17 00:00:00 2001 From: Marcelo Shima Date: Wed, 27 Nov 2024 09:06:13 -0300 Subject: [PATCH] client: adjust devServerPort --- .../templates/webpack/webpack.custom.js.ejs | 4 ++-- .../app/__snapshots__/generator.spec.ts.snap | 3 +++ generators/client/command.ts | 14 ++++++++++++++ generators/client/generator.ts | 15 +++------------ generators/docker-compose/generator.ts | 3 +++ .../realm-config/jhipster-realm.json.ejs | 4 +--- generators/java/generators/server/generator.ts | 3 ++- .../react/templates/webpack/webpack.dev.js.ejs | 2 +- .../resources/config/application-dev.yml.ejs | 2 +- generators/vue/generator.ts | 17 +++++++++++++++++ generators/vue/templates/vite.config.mts.ejs | 2 +- .../vue/templates/webpack/webpack.dev.js.ejs | 2 +- lib/jhipster/default-application-options.ts | 13 ++++++++++--- 13 files changed, 59 insertions(+), 25 deletions(-) diff --git a/generators/angular/templates/webpack/webpack.custom.js.ejs b/generators/angular/templates/webpack/webpack.custom.js.ejs index cbaca4105bfd..16248724c8fb 100644 --- a/generators/angular/templates/webpack/webpack.custom.js.ejs +++ b/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'); }, ], diff --git a/generators/app/__snapshots__/generator.spec.ts.snap b/generators/app/__snapshots__/generator.spec.ts.snap index d189db17fcc5..952df2ba0376 100644 --- a/generators/app/__snapshots__/generator.spec.ts.snap +++ b/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", diff --git a/generators/client/command.ts b/generators/client/command.ts index e64ec89440f2..ed67314a088b 100644 --- a/generators/client/command.ts +++ b/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: { diff --git a/generators/client/generator.ts b/generators/client/generator.ts index 43bc90b42d61..ce98c0f86b33 100644 --- a/generators/client/generator.ts +++ b/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; }, }); } diff --git a/generators/docker-compose/generator.ts b/generators/docker-compose/generator.ts index b6b1845bf032..6276bae5672e 100644 --- a/generators/docker-compose/generator.ts +++ b/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; diff --git a/generators/docker-compose/templates/realm-config/jhipster-realm.json.ejs b/generators/docker-compose/templates/realm-config/jhipster-realm.json.ejs index 6a9b8e1939ef..bc2e0130dc86 100644 --- a/generators/docker-compose/templates/realm-config/jhipster-realm.json.ejs +++ b/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, diff --git a/generators/java/generators/server/generator.ts b/generators/java/generators/server/generator.ts index 87dd08d425fd..000d03833a4e 100644 --- a/generators/java/generators/server/generator.ts +++ b/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}"`, }); } }, diff --git a/generators/react/templates/webpack/webpack.dev.js.ejs b/generators/react/templates/webpack/webpack.dev.js.ejs index d842c2f2a121..51dd125f8cab 100644 --- a/generators/react/templates/webpack/webpack.dev.js.ejs +++ b/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, diff --git a/generators/spring-boot/templates/src/main/resources/config/application-dev.yml.ejs b/generators/spring-boot/templates/src/main/resources/config/application-dev.yml.ejs index fa5dce97ca53..93e2b3ef8026 100644 --- a/generators/spring-boot/templates/src/main/resources/config/application-dev.yml.ejs +++ b/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: "*" diff --git a/generators/vue/generator.ts b/generators/vue/generator.ts index 2ddac7709f31..c34a51f91a61 100644 --- a/generators/vue/generator.ts +++ b/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 }) { diff --git a/generators/vue/templates/vite.config.mts.ejs b/generators/vue/templates/vite.config.mts.ejs index 5b53609660c0..1feef5c7686f 100644 --- a/generators/vue/templates/vite.config.mts.ejs +++ b/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', diff --git a/generators/vue/templates/webpack/webpack.dev.js.ejs b/generators/vue/templates/webpack/webpack.dev.js.ejs index 56341dd4d9a9..98f909f157b3 100644 --- a/generators/vue/templates/webpack/webpack.dev.js.ejs +++ b/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, diff --git a/lib/jhipster/default-application-options.ts b/lib/jhipster/default-application-options.ts index dcb3564b7d24..c16b62c59bf9 100644 --- a/lib/jhipster/default-application-options.ts +++ b/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; }