Este codelab está planeado para mostrar una forma de depurar un proyecto JHipster en VScode (VisualStudio Code).

Debido a que un proyecto de JHipster es tanto un proyecto spring-boot como un proyecto node, la forma de ejecutarlo y depurarlo en VScode es mediante los métodos que éste proveé para interactuar con spring-boot y node.

Los proyectos de CONACyT suelen estar previamente preconfigurados para reducir los problemas de compilación y ejecución. Sin embargo, si el proyecto fue creado por medio del generador de JHipster (para alguna prueba) y usa H2 como base de datos en desarrollo, será necesario hacer una configuración previa en el proyecto.

Dentro del archivo pom.xml se debe modificar el profile eclipse, agregando la dependencia para H2:

<dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
</dependency>

Esto evitará que, al momento de ejecutar el proyecto, se muestre la siguiente excepción:

org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is java.lang.RuntimeException: java.lang.RuntimeException: Failed to load and initialize org.h2.server.web.WebServlet
...
Caused by: java.lang.ClassNotFoundException: org.h2.server.web.WebServlet

Debido a que VScode es un IDE multipropósito, es necesario se configure para ejecutar el proyecto de forma adecuada.

Como parte de esta configuración, se requiere tener instaladas las siguientes extensiones:

• pivotal.vscode-spring-boot
• vscjava.vscode-spring-boot-dashboard
• pivotal.vscode-boot-dev-pack
• vscjava.vscode-java-pack
• vscjava.vscode-maven
• redhat.java
• octref.vetur
• msjsdiag.debugger-for-chrome
• firefox-devtools.vscode-firefox-debug

Una vez instaladas las extensiones, es necesario reiniciar el IDE para que las extensiones se activen de forma correcta.

Como se menciona con anterioridad, VScode es un un IDE multipropósito y se requiere agregar una configuración para que el proyecto spring-boot se ejecute como tal.

La forma más simple de generar la configuración por medio de la extensión Spring Boot Dashboard, esta habilita el panel de Spring Boot Dashboard dentro del panel Explorer. En esta sección se debe dar clic en el botón start o debug de la aplicación que se quiere configurar/depurar.

Después de que se de clic en el botón de start o debug de la aplicación, se abrirá la ventana Debug console y dentro de esta se deberá mostrar el log de la aplicación. Una vez que termine de arrancarse la aplicación se mostrará un mensaje que indica que la aplicación está ejecutándose en el puerto 8080 (o el puerto que esté usando la aplicación).

Aunado a lo anterior, la extensión de Spring Boot Dashboard agrega la configuración del proyecto spring-boot al archivo de configuración para ejecución del proyecto (.vscode/launch.json).

El contenido del archivo de configuración para ejecución del proyecto es similar al siguiente:

{
    "configurations": [
        {
            "type": "java",
            "name": "Spring Boot-OpenapiApp<openapi>",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "mainClass": "mx.conacyt.crip.ejemplos.openapi.OpenapiApp",
            "projectName": "openapi",
            "args": "",
            "envFile": "${workspaceFolder}/.env"
        }
    ]
}

Es recomendable editar la configuración generada y agregar un parámetro para el profile dev:

{
    "configurations": [
        {
            "type": "java",
            "name": "Spring Boot-OpenapiApp<openapi>",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "mainClass": "mx.conacyt.crip.ejemplos.openapi.OpenapiApp",
            "projectName": "openapi",
            "args": "--spring.profiles.active=dev",
            "envFile": "${workspaceFolder}/.env"
        }
    ]
}

Si se requiere agregar manualmente la configuración de ejecución del proyecto, es necesario usar el submenú Add configuration... que se encuentra dentro del menú Run. Al dar clic en Add configuration... se desplegará una lista con las configuraciones soportadas y se deberá seleccionar Java.

Después de seleccionar la opción de Java, VScode generará el archivo de configuración para ejecución del proyecto (.vscode/launch.json) (en caso de no existir uno previo):

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Launch Current File",
            "request": "launch",
            "mainClass": "${file}"
        }
    ]
}

Es necesario que se modifique el contenido de la configuración generada por VScode para que se parezca a la configuración que la extensión de Spring Boot Dashboard hubiese generado:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Spring Boot-PruebApp<prueba>",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "mainClass": "mx.conacyt.crip.ejemplos.prueba.PruebaApp",
            "projectName": "prueba",
            "args": "--spring.profiles.active=dev",
            "envFile": "${workspaceFolder}/.env"
        }
    ]
}

De la configuración, lo más importante es:

• cwd : Indicamos el directorio de trabajo
• mainClass : Indicamos la clase principal del proyecto spring-boot
• console : Indicamos la consola usada para mostrar los logs del proyecto (puede ser importante si se pasan argumentos por medio de la llave args)
• args : Indica el profile de spring usado durante la ejecución
• envFile : Especifica que el archivo .evn se encuentra en la raíz del proyecto

Una vez guardada la configuración, se puede ejecutar el proyecto de diferentes formas:

• Desde el Dashboard de Spring Boot (mostrado en los pasos anteriores)
• Desde el menú de comandos
• Desde el panel de Run and Debug

Ejecución desde menú de comandos

Por medio del menú de comandos (control + shift + p en Linux y Windows o command + shift + p en MacOs) se pueden ejecutar diversas operaciones, algunas de ellas están relacionadas con la ejecución y depuración de los proyectos.

• Si se escribe el comando Debug: Start Without Debugging se ejecuta el proyecto de forma normal (sin depuración).
• Si se escribe el comando: Debug: Start Debugging se ejecuta el proyecto en modo de depuración.

Ejecución desde el panel Run and Debug

Otra forma de ejecutar el proyecto es desde el panel de Run and Debug. Dentro de ese panel se debe dar clic en el botón de Start Debugging (el triángulo de play) esto ejecutará el proyecto modo de depuración:

Consola de log del proyecto

Sin importar el método usado para ejecutar el proyecto, el log del mismo se mostrará en la ventana de Debug Console (esto por el atributo console: internalConsole la configuración guardada).

En los pasos anteriores solo se ha contemplado el proyecto spring-boot del proyecto JHipster (la parte del back), es necesario ejecutar a la par el proyecto node (la parte del front) si se desea ejecutar la aplicación web completa.

Para poder ejecutar el proyecto node es necesario instalar las dependencias por medio del comando npm. Esto lo podemos hacer dentro de una terminal interna de VScode (menú Terminal y seleccionar el submenú New termial):

npm install

Una vez instaladas las dependencias es posible ejecutar el proyecto (en la misma terminal), con el siguiente comando:

npm start

Una vez que el proyecto termine de arrancar, se debería mostrar algo como lo siguiente:

 ----------------------------------------
       Local: http://localhost:9000
    External: http://1.1.1.1:9000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------

En el siguiente paso se podrá agregar una configuración para ejecutar el proyecto node en VScode.

Configuración

Para poder ejecutar el proyecto node dentro del VScode, es necesario usar el submenú Add configuration... que se encuentra dentro del menú Run. Al dar clic en Add configuration... se desplegará, una vez más, una lista con las configuraciones soportadas y se deberá seleccionar Node.js: Launch via npm.

Después de seleccionar la opción, se agregará al archivo de configuraciones (.vscode/launch.json) una entrada como la siguiente:

    {
        "name": "Launch via NPM",
        "request": "launch",
        "runtimeArgs": [
            "run-script",
            "debug"
        ],
        "runtimeExecutable": "npm",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "type": "pwa-node"
    }

Es necesario modificar la configuración para sea compatible con el proyecto node, en particular es necesario cambiar la llave runtimeArgs y dejarla como se muestra a continuación:

    {
        "name": "Launch via NPM",
        "request": "launch",
        "runtimeArgs": [
            "start"
        ],
        "runtimeExecutable": "npm",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "type": "pwa-node"
    }

Nota: Antes de ejecutar el proyecto es necesario instalar las dependencias del mismo con el comando npm install.

Ejecución

Para ejecutar el proyecto es necesario que ir al panel Run and debug y ahí seleccionar de la lista de configuraciones disponibles la opción Launch via NPM.

Una vez seleccionada la configuración deseada, se debe dar clic al botón Start Debugging (el triángulo de play).

Esto ejecutará el proyecto y en la ventana de Debug console deberá se mostrará el log de ejecución, al final se debe mostrar algo como lo siguiente:

Debido a que el proyecto node es un proyecto Vue (un proyecto web), la depuración requiere el uso de un navegador.

Se tienen dos opciones para la depuración:

• Chrome
• Firefox

Como sucedió con spring-boot, se requiere crear una configuración para poder depurar el proyecto node.

Dentro del menú Run se debe dar clic al submenú Add configuration..., esto desplegará una lista de opciones de configuración disponibles y de las cuales se deberá seleccionar Chrome: Launch

Al seleccionar la opción indicada, se generará una entrada como la siguiente:

    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    },

Esa configuración se deberá modificar de la siguiente forma:

        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:9000",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
          }

Para más opciones sobre esta configuración, revisar el sitio de la extensión de debugger for chrome.

Dentro del menú Run se debe dar clic al submenú Add configuration..., esto desplegará una lista de opciones de configuración disponibles y de las cuales se deberá seleccionar Firefox: Launch (server)

Al seleccionar la opción indicada, se generará una entrada como la siguiente:

        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Launch localhost",
            "url": "http://localhost/index.html",
            "webRoot": "${workspaceFolder}"
        }

Esa configuración se deberá modificar de la siguiente forma:

        {
            "type": "firefox",
            "request": "launch",
            "name": "vuejs: firefox",
            "url": "http://localhost:9000",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }

Para más opciones sobre esta configuración, revisar el sitio de la extensión de Debugger for Firefox.

Una vez creada la configuración, se podrá seleccionar en el panel Run and Debug (en el ejemplo se ha seleccionado la configuración para firefox)

Una vez seleccionada la opción de configuración deseada, se debe dar clic el botón Start Debugging (el triángulo de play).

Esto abrirá un navegador con las siguientes características:

• La consola del navegador se mostrará en la pantalla Debug console
• El navegador estará en modo debug
• Si se detiene el modo debug, se cerrará el navegador
• De igual manera; si se cierra el navegador, se parará el modo debug.

Para los proyectos de CONACyT, será necesario agregar parámetros a las configuraciones de ejecución de proyecto (por ejemplo para la url de la base de datos).

Revisar el codelab de Cómo agregar parámetros para ejecutar el proyecto.