jhipster sample app

jhipsterAplicación de muestra

Esta aplicación se generó con JHipster 8.7.3; puede encontrar documentación y ayuda en https://www.jhipster.tech/documentation-archive/v8.7.3.

Estructura del proyecto

El nodo es necesario para la generación y recomendado para el desarrollo. package.json siempre se genera para una mejor experiencia de desarrollo con ganchos de confirmación, scripts, etc. más bonitos.

En la raíz del proyecto, JHipster genera archivos de configuración para herramientas como git, prettier, eslint, husky y otras que son muy conocidas y puedes encontrar referencias en la web.

La estructura /src/* sigue la estructura Java predeterminada.

• .yo-rc.json : archivo de configuración de Yeoman La configuración de JHipster se almacena en este archivo en la clave generator-jhipster . Puede encontrar generator-jhipster-* para la configuración de planos específicos.

• .yo-resolve (opcional): resolución de conflictos de Yeoman Permite utilizar una acción específica cuando se encuentran conflictos omitiendo solicitudes de archivos que coinciden con un patrón. Cada línea debe coincidir con [pattern] [action] con un patrón Minimatch y una acción de omisión (predeterminada si se omite) o forzar. Las líneas que comienzan con # se consideran comentarios y se ignoran.

• .jhipster/*.json - Archivos de configuración de entidades JHipster

• npmw : contenedor para usar npm instalado localmente. JHipster instala Node y npm localmente usando la herramienta de compilación de forma predeterminada. Este contenedor se asegura de que npm esté instalado localmente y lo utilice evitando algunas diferencias que pueden causar las diferentes versiones. Al utilizar ./npmw en lugar del npm tradicional, puede configurar un entorno sin nodos para desarrollar o probar su aplicación.

• /src/main/docker : configuraciones de Docker para la aplicación y los servicios de los que depende la aplicación.

Desarrollo

El sistema de compilación instalará automáticamente la versión recomendada de Node y npm.

Proporcionamos un contenedor para lanzar npm. Solo necesitará ejecutar este comando cuando las dependencias cambien en package.json.

 ./npmw install

Usamos scripts npm y Angular CLI con Webpack como nuestro sistema de compilación.

Ejecute los siguientes comandos en dos terminales independientes para crear una maravillosa experiencia de desarrollo en la que su navegador se actualiza automáticamente cuando los archivos cambian en su disco duro.

 ./mvnw
./npmw start

Npm también se utiliza para gestionar las dependencias de CSS y JavaScript utilizadas en esta aplicación. Puede actualizar las dependencias especificando una versión más nueva en package.json. También puede ejecutar ./npmw update y ./npmw install para administrar las dependencias. Agregue la bandera help en cualquier comando para ver cómo puede usarlo. Por ejemplo, ./npmw help update .

El comando ./npmw run enumerará todos los scripts disponibles para ejecutar para este proyecto.

Soporte para PWA

JHipster viene con soporte para PWA (Progressive Web App) y está desactivado de forma predeterminada. Uno de los componentes principales de una PWA es un trabajador de servicios.

El código de inicialización del trabajador del servicio está deshabilitado de forma predeterminada. Para habilitarlo, descomente el siguiente código en src/main/webapp/app/app.config.ts :

 ServiceWorkerModule . register ( 'ngsw-worker.js' , { enabled : false } ) ,

Gestionar dependencias

Por ejemplo, para agregar la biblioteca Leaflet como una dependencia de tiempo de ejecución de su aplicación, ejecutaría el siguiente comando:

 ./npmw install --save --save-exact leaflet

Para beneficiarse de las definiciones de tipos de TypeScript del repositorio DefinitelyTyped en desarrollo, debe ejecutar el siguiente comando:

 ./npmw install --save-dev --save-exact @types/leaflet

Luego, importará los archivos JS y CSS especificados en las instrucciones de instalación de la biblioteca para que Webpack los conozca: Edite el archivo src/main/webapp/app/app.config.ts:

 import 'leaflet/dist/leaflet.js';

Edite el archivo src/main/webapp/content/scss/vendor.scss:

 @import 'leaflet/dist/leaflet.css';

Nota: Todavía quedan algunas cosas por hacer para Leaflet que no detallaremos aquí.

Para obtener más instrucciones sobre cómo desarrollar con JHipster, consulte Uso de JHipster en desarrollo.

Usando CLI angular

También puede utilizar Angular CLI para generar algún código de cliente personalizado.

Por ejemplo, el siguiente comando:

 ng generate component my-component

generará algunos archivos:

 create src/main/webapp/app/my-component/my-component.component.html
create src/main/webapp/app/my-component/my-component.component.ts
update src/main/webapp/app/app.config.ts

Edificio para producción

Embalaje como tarro

Para construir el jar final y optimizar la aplicación jhipsterSampleApplication para producción, ejecute:

 ./mvnw -Pprod clean verify

Esto concatenará y minimizará los archivos CSS y JavaScript del cliente. También modificará index.html para que haga referencia a estos nuevos archivos. Para asegurarse de que todo funcionó, ejecute:

 java -jar target/*.jar

Luego navegue hasta http://localhost:8080 en su navegador.

Consulte Uso de JHipster en producción para obtener más detalles.

El embalaje como guerra

Para empaquetar su aplicación como una guerra para implementarla en un servidor de aplicaciones, ejecute:

 ./mvnw -Pprod,war clean verify

Centro de control JHipster

JHipster Control Center puede ayudarlo a administrar y controlar sus aplicaciones. Puede iniciar un servidor del centro de control local (accesible en http://localhost:7419) con:

 docker compose -f src/main/docker/jhipster-control-center.yml up

Pruebas

Pruebas de arranque de primavera

Para iniciar las pruebas de su aplicación, ejecute:

 ./mvnw verify

gatito

Gatling ejecuta las pruebas de rendimiento y las escribe en Scala. Están ubicados en src/test/java/gatling/simulations.

Puede ejecutar todas las pruebas de Gatling con

 ./mvnw gatling:test

Pruebas de cliente

Las pruebas unitarias las ejecuta Jest. Están ubicados en src/test/javascript/ y se pueden ejecutar con:

 ./npmw test

Las pruebas de interfaz de usuario de un extremo a otro funcionan con Cypress. Están ubicados en src/test/javascript/cypress y se pueden ejecutar iniciando Spring Boot en una terminal ( ./mvnw spring-boot:run ) y ejecutando las pruebas ( ./npmw run e2e ) en una segunda.

Auditorías de faro

Puede ejecutar auditorías automatizadas de Lighthouse con cypress-audit ejecutando ./npmw run e2e:cypress:audits . Sólo debe ejecutar las auditorías cuando su aplicación esté empaquetada con el perfil de producción. El informe faro se crea en target/cypress/lhreport.html

Otros

Calidad del código usando Sonar

Sonar se utiliza para analizar la calidad del código. Puede iniciar un servidor Sonar local (accesible en http://localhost:9001) con:

 docker compose -f src/main/docker/sonar.yml up -d

Nota: hemos desactivado la redirección de autenticación forzada para la interfaz de usuario en src/main/docker/sonar.yml para una experiencia inmediata al probar SonarQube; para casos de uso reales, vuelva a activarla.

Puede ejecutar un análisis de sonda utilizando el escáner de sonda o el complemento maven.

Luego, ejecute un análisis de sonda:

 ./mvnw -Pprod clean verify sonar:sonar -Dsonar.login=admin -Dsonar.password=admin

Si necesita volver a ejecutar la fase Sonar, asegúrese de especificar al menos la fase initialize , ya que las propiedades de Sonar se cargan desde el archivo sonar-project.properties.

 ./mvnw initialize sonar:sonar -Dsonar.login=admin -Dsonar.password=admin

Además, en lugar de pasar sonar.password y sonar.login como argumentos CLI, estos parámetros se pueden configurar desde sonar-project.properties como se muestra a continuación:

 sonar.login=admin
sonar.password=admin

Para obtener más información, consulte la página Calidad del código.

Compatibilidad con Docker Compose

JHipster genera una serie de archivos de configuración de Docker Compose en la carpeta src/main/docker/ para iniciar los servicios de terceros necesarios.

Por ejemplo, para iniciar los servicios necesarios en contenedores Docker, ejecute:

 docker compose -f src/main/docker/services.yml up -d

Para detener y retirar los contenedores, ejecute:

 docker compose -f src/main/docker/services.yml down

La integración de Spring Docker Compose está habilitada de forma predeterminada. Es posible desactivarlo en application.yml:

 spring :
  ...
  docker :
    compose :
      enabled : false

También puede acoplar completamente su aplicación y todos los servicios de los que depende. Para lograr esto, primero cree una imagen Docker de su aplicación ejecutando:

npm run java:docker

O cree una imagen de Docker arm64 cuando utilice un sistema operativo con procesador arm64 como MacOS con la familia de procesadores M1 ejecutándose:

npm run java:docker:arm64

Luego ejecuta:

docker compose -f src/main/docker/app.yml up -d

Para obtener más información, consulte Uso de Docker y Docker-Compose. Esta página también contiene información sobre el subgenerador de Docker Compose ( jhipster docker-compose ), que puede generar configuraciones de Docker para una o varias aplicaciones JHipster.

Integración continua (opcional)

Para configurar CI para su proyecto, ejecute el subgenerador ci-cd ( jhipster ci-cd ), esto le permitirá generar archivos de configuración para varios sistemas de integración continua. Consulte la página Configuración de integración continua para obtener más información.