Quickstart

front-cli CLI (One CLI to rule them all)

La interfaz de la línea de comandos (CLI) de Front es una cadena de herramientas para crear repositorios y proyectos Frontend (CRA, Microfronteds).

Prerequisitos

1. Instalar Node LTS
2. Instalar Visual Studio Code
3. Configurar github packages

Instalacion

Se debe ejecutar el siguiente commando para instalar la CLI de manera global

npm i -g @architecture-it/front-cli

---

Registro de FontAwesome

Por definición de diseño se utiliza fontawesome, para configurarlo correctamente debemos ejecutar el siguiente comando:

front-cli npm config

El comando configura y registra el registro de npm github a todos los scopes de andreani, así como tambien las configuraciones pertinentes para fontawesome.

---

Una vez realizado los pasos siguientes, podremos:

• Crear un proyecto para React (simple).
• Crear un proyecto para React Microfrontend (appshell/container).
• Crear un proyecto para React Microfrontend (modulo).

Crear un Proyecto

Como se menciono anteriormente, existen 3 tipos de aplicaciones, React app Base y microfrontend en sus dos casos de uso actuales. Procederemos a crear una aplicación ejecutando el siguiente comando.

front-cli create

El comando nos pedira una serie de datos, como el nombre del proyecto, y te dará las opciones para seleccionar el template. Una vez creado el proyecto, se creará la solucion con el mismo nombre que se le fue asignado anteriormente introduciendo los proyectos del template elegido.

Actualizacion

En caso de tener instalada la herramienta y querer actualizar a la version mas reciente, ejecutaremos el siguiente comando:

npm i -g @architecture-it/front-cli@latest

---

Manejo de dependencias

En todo nuestro flujo de CICD utilizamos para instalar lo que contenga el archivo lockfile (yarn.lock, package-lock.json o pnpm-lock.yaml), por lo que se aconseja que se utilicé npm ci cada vez que se haga pull si hay varios desarrolladores sobre un mismo proyecto.

La utilización de npm ci, que lee el lockfile garantiza la estabilidad entre ambientes de las dependencias temporarias e internas de cada uno de los paquetes

Por otro lado npm install debe utilizarse cuando se agreguen dependencias, conflictos u otra razon se necesite actualizar el package-lock.json.

---

Warning

Una vez creado el proyecto para el caso del module hay que tener en cuenta que las librerias core que utilizan deben tener la misma version que el shell para evitar errores de compilacion por ejemplo con la libreria microfontend-utils tanto en el shell como en el module se requiere que esten la misma version asi como la version de React. Para entender la conexion entre el module y el shell recomendamos revisar esta seccion Research

Extensiones Recomendadas VSCode

Se recomiendan las siguientes extensiones

{
    "recommendations": [
        "redhat.vscode-yaml",
        "stylelint.vscode-stylelint",
        "mhutchie.git-graph",
        "eamodio.gitlens",
        "dbaeumer.vscode-eslint",
        "vunguyentuan.vscode-css-variables",
        "clinyong.vscode-css-modules",
        "ritwickdey.LiveServer"
    ]
}

CSS Extensions