Saltar a contenido

architecture-it/front-cli

Acerca

librería de npm que contiene herramientas de cli para generar componentes y archivos de configuraciones de aplicaciones React.

Prerequisitos

  1. Instalar Node LTS
  2. Configuración paquetes internos github packages
  3. Para equipos web instalar pnpm y para equipos mobile instalar yarn

Warning

Si aún no has configurado npm para traer paquetes internos de andreani por favor volver a configuración

Instalación

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

Info

Es importante que se instale global para tenerlo disponible por consola sin importar el proyecto

Generadores:

Component:

Generador de componentes que reconoce cuando está instalado TS, Storybook, y/o prop-types (standard y buena practica en aplicaciones de React).

Pide cierta información:

  • Nombre del componente (automaticamente lo genera como PascalCase)

commandname

  • Stylesheets format (reconoce si tenes sass instalado y te da ambas opciones, si no asume generarlo con css).

    como buena practica está bueno usar siempre CSS modules

commandstyles

  • La ruta donde se va a generar el componente (por default esta opcion ignora ciertas ubicaciones).

commanddir

  • Una confirmación en el caso de que quieras exportar el componente desde la carpeta donde esté la estructura.

commandconfirm

ESLint:

Genera archivos necesarios e instala la dependencia dónde están las configuraciones y añade los scripts correspondientes en el package.json.

Scripts

  • "eslint": "eslint --ext .js,.jsx,.ts,.tsx src"
  • "eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix"

Warning

Para evitar inconvenientes en el caso que tengas eslintConfig en el package.json recomendamos quitarlo, al igual que todas las dependencias relacionadas con eslint del proyecto (en el caso de tenerlo) antes de ejecutar el comando (que se instale en limpio)

eslint-command

Tip

Detecta si tenes instalado typescript, nextjs o no y hace las configuraciones correpsondientes

detect-command

StyleLint:

Genera el archivo de configuración para Stylelint (linter para CSS). Añade tambien scripts utiles.

Scripts

  • "stylelint": "stylelint **/*.css"
  • "stylelint:fix": "stylelint **/*.css --fix"

Tip

Detecta si tenes instalado sass o no

detect-command

Dockerfile:

Genera Dockerfile y un .dockerignore generico para las aplicaciones react.

Sigue las recomendaciones de la sección de Arquitectura

Tip

Detecta si tenes instalado nextjs.

detect-command

Github Actions:

Genera .github/workflows/react-ci.yml con las acciones genericas para las aplicaciones react.

Sigue las recomendaciones de la sección de Arquitectura

Tip

Detecta si tenes instalado @architecture-it/stylesystem y/o @fortawesome (FontAwesome con licencia) y lo configura en el yml.

github-actions-command

Npm configuration:

Genera las configuraciones necesarias para npm a nivel usuario.

Configura los registros de la empresa que contienen paquetes de npm @customer-experience, @operations-innovation y @architecture-it y de FontAwesome Pago @fortawesome (dependencia del stylesystem).

Warning

Sigue siendo necesario el paso de configurar el Personal access token y @architecture-it. Ver más en la sección de Paquetes de NPM

npm-config-command

Create:

Genera el scafolding inicial con Azure b2C y el layout más basico de la compañía.

Warning

Sigue siendo necesario el paso de configurar el Personal access token y @architecture-it. Ver más en la sección de Paquetes de NPM

npm-config-command

Uso

Warning

Es necesario ejecutarlo en el root de un proyecto ( que package.json esté disponible)

Solo necesitas instalarlo globalmente y podrás acceder a cada uno de los comandos desde el menú inicial o especificamente a uno.

  • Se puede acceder solo llamando al cli: general-command

  • O directamente al generador especifico commandmenu

Excepciones

Para asegurar el flujo de la aplicacion ( y verificar si tienes instalada las dependencias que automatizan el proceso). El cli no va a ejecutarse si no encuentra el package.json

error-pacakge