Inicializar el Client

Introducción

Catalyst te permite desarrollar tres tipos de aplicaciones Client nativas que se pueden alojar en Web Client Hosting:

• Aplicaciones Angular
• Aplicaciones React
• Aplicaciones Client básicas

Catalyst proporciona plantillas listas para usar para aplicaciones Client Angular y React. Cuando inicializas estas aplicaciones, Catalyst manejará todo el procedimiento de configuración y te solicitará instalar las dependencias requeridas. Las aplicaciones Angular y React se crearán en el directorio de tu proyecto en su estructura boilerplate.

La aplicación Client básica es una versión simple del Client de Catalyst que se creará en su propia estructura estándar. Los procedimientos de instalación diferirán para los tres tipos de aplicaciones Client.

Si inicializas el directorio del Client para tu proyecto, Catalyst iniciará su proceso de configuración después de la inicialización de Functions.

Selecciona uno de los tipos de Client para inicializar para tu proyecto de las opciones, luego presiona Enter.

Aplicaciones Angular

Angular es un framework de diseño de aplicaciones frontend y plataforma de desarrollo para crear aplicaciones de página única eficientes y sofisticadas. Angular sigue una arquitectura basada en componentes donde la aplicación se desacopla en entidades funcionales y lógicas individuales y reutilizables. Los bloques de construcción de Angular como los componentes, plantillas, directivas e inyecciones de dependencia se combinan en módulos, que juntos forman una aplicación Angular. Puedes aprender más en la documentación oficial de Angular .

Se recomienda que tengas Angular CLI instalado en tu máquina local para desarrollar aplicaciones Client Angular. Este CLI maneja la instalación y configuración de las dependencias requeridas automáticamente, y permite un desarrollo y prueba fácil de aplicaciones Client. Catalyst iniciará automáticamente su instalación durante el proceso de inicialización del Client.

Catalyst también proporciona un plugin para la aplicación Angular, zcatalyst-cli-plugin-angular , que se instala cuando se inicializa la aplicación Angular. Este plugin, compatible con la última versión LTS de Angular, maneja internamente varias operaciones involucradas en el desarrollo y prueba de la aplicación Angular. Esto facilita y agiliza tu tarea de construcción de aplicaciones, y te permite enfocarte en la funcionalidad de la aplicación en lugar de su configuración y mantenimiento.

Si seleccionas Angular Web App de las opciones mientras inicializas el Client, Catalyst iniciará el procedimiento de configuración estándar para aplicaciones Angular. La aplicación se creará en la última versión LTS.

1. El CLI te solicitará que proporciones un nombre para el componente Client de tu proyecto. Proporciona un nombre para el Client y presiona Enter .
   

2. Si Angular CLI no está ya instalado en tu sistema, Catalyst iniciará automáticamente una instalación temporal de su versión LTS. También instalará un paquete de schematics específico de Catalyst que es necesario para generar una aplicación Angular.
   
   Ingresa “Y” para confirmar la instalación de los paquetes requeridos cuando se te solicite, luego presiona Enter .
   

Si los paquetes requeridos ya existen en tu sistema local, la configuración saltará al siguiente paso.

3. Puedes habilitar el enrutamiento de Angular para manejar la navegación entre las diferentes vistas que crees. Ingresa “Y”, luego presiona Enter cuando se te solicite.
   

4. Puedes dar estilo a los componentes Angular con cualquiera de los formatos de hoja de estilos soportados como se muestra a continuación. Selecciona un formato de hoja de estilos para tu aplicación, luego presiona Enter .
   

Las solicitudes de enrutamiento y hoja de estilos caen bajo los procedimientos de configuración predeterminados de las aplicaciones Angular.

Catalyst luego iniciará la instalación de los archivos de aplicación Angular, archivos de configuración y dependencias en sus estructuras boilerplate. Los módulos de Node requeridos para el desarrollo de la aplicación también se instalan a través de NPM.

El directorio del Client Angular está ahora configurado con los archivos de aplicación estándar, archivos de entorno, el archivo del plugin, hojas de estilo, index.html y clases TypeScript como se muestra a continuación. Los módulos de Node requeridos, archivos de configuración JSON y dependencias, incluyendo client-package.json específico de Catalyst, también estarán presentes en el directorio.

Después de que estos paquetes se instalen, el archivo de configuración catalyst.json se actualizará con los detalles del paquete del Client, incluyendo la ruta al archivo del plugin especificado anteriormente. Puedes aprender más sobre los archivos de configuración de Catalyst y el directorio del Client en la página de ayuda de Estructura del Directorio del Proyecto .

Puedes aprender sobre probar y desplegar una aplicación Angular desde el Catalyst CLI en las páginas de ayuda de Servir Recursos y Desplegar Recursos.

Aplicaciones React

React es una biblioteca JavaScript frontend que te permite construir aplicaciones interactivas e interfaces de usuario. Su arquitectura basada en componentes gestiona y renderiza eficientemente los estados en tu aplicación durante la construcción. React proporciona facilidad y flexibilidad en el desarrollo de aplicaciones Client de página única, y ofrece reutilización de sus componentes. Puedes aprender más en la documentación oficial de React .

Catalyst proporciona un plugin para la aplicación React, zcatalyst-cli-plugin-react , que se instala cuando se inicializa la aplicación React. Este plugin contiene ciertos módulos de Node y archivos de biblioteca que manejan internamente varias operaciones involucradas en el desarrollo y prueba de la aplicación React. Esto permite un proceso de construcción de aplicaciones más rápido y eficiente.

Cuando inicializas una aplicación React, Catalyst facilitará automáticamente su creación y configuración a través del gestor de paquetes Yarn por defecto. Si no tienes Yarn instalado en tu máquina local, la aplicación React se configurará usando NPM. Catalyst permite el manejo de todas las tareas de configuración como vincular y resolver paquetes, e instalar dependencias, a través del gestor de paquetes automáticamente.

Si seleccionas React Web App de las opciones mientras inicializas el Client, Catalyst iniciará el procedimiento de configuración estándar para aplicaciones React.

1. Puedes crear la aplicación React con la plantilla estándar de JavaScript o una plantilla de TypeScript. TypeScript es un superconjunto tipado de JavaScript que se transpila a JavaScript plano durante la compilación. Catalyst te proporciona estas opciones durante la inicialización para hacer el procedimiento de configuración más fácil y rápido.
   
   Selecciona JavaScript o TypeScript de las opciones.
   

2. El CLI te solicitará que proporciones un nombre para el componente Client de tu proyecto. Proporciona un nombre para el Client y presiona Enter.

Esto iniciará la instalación de los paquetes React necesarios como react , react-dom y react-scripts a través de una plantilla CRA específica de Catalyst. Esta plantilla base ejecutará el comando create-react-app.

El gestor de paquetes luego inicializará un repositorio git para la aplicación React e instalará las dependencias de la plantilla.

Después de que la inicialización se complete, puedes encontrar los archivos de la aplicación React creados en sus estructuras boilerplate en el directorio de tu proyecto.

La estructura del directorio de la aplicación React contendrá los archivos fuente de la aplicación, archivos públicos, archivos de configuración, módulos de Node y otras dependencias incluyendo client-package.json específico de Catalyst como se muestra a continuación.

Después de que estos paquetes se instalen, el archivo de configuración catalyst.json se actualizará con los detalles del paquete del Client, incluyendo la ruta al archivo del plugin especificado anteriormente. Puedes aprender más sobre los archivos de configuración de Catalyst y el directorio del Client en la página de ayuda de Estructura del Directorio del Proyecto .

Cuando sirvas o despliegues la aplicación React, se creará una carpeta build en este directorio que contendrá todos los archivos compilados según los estándares de React.js.

Aplicaciones Client básicas

La aplicación Client básica es una versión simple del Client de Catalyst que se crea sin ningún framework o biblioteca externa. Puedes crear aplicaciones web Client simples y funcionales eligiendo la opción Basic Web App durante la inicialización del Client.

El CLI te solicitará que proporciones un nombre para el componente Client de tu proyecto. Proporciona un nombre para el Client y presiona Enter .

El directorio del Client se creará ahora en el directorio del proyecto y el archivo catalyst.json se actualizará con su información.

El directorio del Client básico se configurará con el archivo principal index.html, main.css, main.js y la configuración client-package.json. Puedes aprender sobre la estructura del directorio del Client en detalle en la página de ayuda de Estructura del Directorio del Proyecto.

Puedes servir el Client a través de un localhost para probarlo, y luego desplegarlo a la nube, o alojarlo desde la consola directamente.