---
title: "Configurar el cliente"
url: https://docs.catalyst.zoho.com/es/tutorials/catly/nodejs/configure-client/
description: "Crea un servicio acortador de URLs, Cat.ly, como una aplicación React de página única construida con el plugin React de Catalyst y varios componentes."
last_updated: 2026-11-04T10:10:44Z
service: All Services
type: tutorial
related_links:
  - name: "Client"
    url: /es/cli/v1/project-directory-structure/client-directory
---

# Configurar el cliente

Ya hemos creado una aplicación React llamada **"app"** usando el plugin React de Catalyst. Ahora agregaremos el código requerido para la app desde el repositorio descargado.

El repositorio de GitHub que descargaste contiene la siguiente estructura de directorio del cliente:

![client-dir](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/client-dir.webp)

Ahora incluyamos el código de Cat.ly en el directorio del cliente. Para facilitar esto, simplemente reemplaza el directorio **"app"** en el directorio de tu proyecto con los archivos de Cat.ly del repositorio descargado.

Asegúrate de confirmar que los siguientes archivos y directorios estén duplicados:

1. El archivo `package.json`.
2. El archivo oculto `.gitignore`.
3. La carpeta `public`.
4. La carpeta `src`

El directorio de tu proyecto ahora debería contener todos los archivos del cliente en la misma estructura que el repositorio descargado.

> **Nota**: Por favor, revisa el código en los archivos proporcionados mientras lees los puntos a continuación.

Ahora veamos los archivos en el directorio del cliente en detalle.

* El directorio raíz del cliente contiene un archivo [`client-package.json`](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory) que es un archivo de configuración que define el nombre, versión y página de inicio predeterminada del componente cliente.

* La carpeta `app` contiene dos subcarpetas según la estructura predeterminada de un proyecto React.

    - La carpeta `public` generalmente se usa para contener archivos que pueden ser accedidos abiertamente por navegadores a través de URLs públicas, como archivos de íconos de la aplicación web o `index.html`.
    - La carpeta `src` contiene los archivos fuente de la aplicación que se incluirán en la carpeta `build` cuando compilemos la aplicación React.

La carpeta `app` también contiene el archivo de dependencias [`package.json`](https://docs.npmjs.com/files/package.json), un archivo [`.gitignore`](https://git-scm.com/docs/gitignore), y un archivo [`yarn.lock`](https://legacy.yarnpkg.com/es/docs/yarn-lock/).

- La carpeta `public` incluye:

    - `index.html`: El punto de entrada predeterminado de Cat.ly
    - `manifest.json`: Contiene información sobre la aplicación web incluyendo el `start_url` que está configurado como ".". Esto permite que cada versión acortada de la URL que el usuario ingrese se origine desde la URL base [*Catalyst_web_app_URL/app/*](https://docs.catalyst.zoho.com/es/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url) cuando la app está alojada. Discutiremos esto en el paso final del tutorial.
    - `error.html`: La página a la que Cat.ly redirige al usuario si ingresa una URL inválida para acortar.

- La carpeta `src` contiene:

    - Los archivos JavaScript y CSS para el componente cliente. El `App.js` facilita el comportamiento del front end de la aplicación. Maneja los eventos de cambio y acortamiento, y publica y obtiene datos usando las tres rutas definidas anteriormente. Los otros archivos están involucrados en renderizar el DOM y definir la apariencia de la página web.

    - `input`: Esta subcarpeta contiene el código para manejar la entrada del usuario. El `Header.js` permite incrementar el conteo de URLs en uno cada vez que se acorta una nueva URL y se muestra en la página web. El `InputForm.js` maneja la barra de texto de entrada y el botón de envío. El `List.js` permite que las URLs acortadas se muestren como una lista.

    - `utils`: Esta subcarpeta contiene `constants.js` para almacenar los valores constantes de las tres rutas usadas por `App.js`.

Sigue los pasos a continuación para completar el proceso de configuración de la función:

El repositorio que descargaste no contiene la dependencia del plugin React requerida para la aplicación. Por lo tanto, debes instalar el plugin en la carpeta app.

Navega a `/app` desde tu CLI y ejecuta el siguiente comando:

```sh
npm install zcatalyst-cli-plugin-react
```

Esto instalará el plugin React de Catalyst requerido para la aplicación y actualizará los archivos de dependencias.

Ahora compilemos y probemos la aplicación React.