--- title: "Inicializar el proyecto" url: https://docs.catalyst.zoho.com/es/tutorials/photo-store-app/nodejs/init-app/ description: "Cree una aplicación de galería React para cargar imágenes en un bucket en Stratus y compartir estas imágenes con otros usuarios registrados. Aloje la aplicación en AppSail, sincronícela con GitHub y despliéguela usando Pipelines." last_updated: 2026-08-17T12:16:04Z service: All Services type: tutorial related_links: - name: "Catalyst Stratus" url: /es/cloud-scale/help/stratus/introduction/ - name: "Documentación de ayuda de la CLI" url: /es/cli/v1/cli-command-reference/ - name: "Inicializar recursos desde la CLI" url: /es/cli/v1/initialize-resources/introduction/ - name: "Estructura del directorio del proyecto" url: /es/cli/v1/project-directory-structure/introduction/ - name: "Catalyst AppSail" url: /es/serverless/help/appsail/introduction/ - name: "Agregar un servicio AppSail" url: /es/cli/v1/add-appsail/ - name: "Portal multi-organización de Catalyst" url: /es/getting-started/catalyst-organizations/#access-the-multi-org-portal - name: "Herramientas de Catalyst" url: /es/catalyst-extensions/vs-code-extension/introduction/ --- # Inicializar el proyecto Ahora puede comenzar a trabajar en su proyecto de Catalyst desde la CLI. El primer paso es inicializar el proyecto en un directorio vacío. Este será el directorio principal de su proyecto y todos los archivos del proyecto se guardarán en él. Puede obtener más información sobre esto en la [página de ayuda de la estructura del directorio del proyecto](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/introduction/). Puede conocer en detalle cómo inicializar un proyecto en la [documentación de ayuda de la CLI](https://docs.catalyst.zoho.com/es/cli/v1/cli-command-reference/). Para esta aplicación, solo inicializaremos el proyecto. No inicializaremos ningún componente de función o cliente. 1. Cree una carpeta para el proyecto en su máquina local y navegue hasta ella desde la terminal. 2. Inicialice un proyecto ejecutando el siguiente comando desde ese directorio: ```sh catalyst init ``` Navegue usando las **teclas de flecha** y seleccione su portal preferido y presione **Enter**. Si no tiene otras organizaciones asociadas a la cuenta, se seleccionará la predeterminada automáticamente. ![catalyst_tutorials_photostore_cli_project_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_project_init.webp) > **Info:** [Conozca más sobre la función de portal multi-organización de Catalyst](https://docs.catalyst.zoho.com/es/getting-started/catalyst-organizations/#access-the-multi-org-portal) . 3. La CLI ahora le pedirá que asocie un proyecto de Catalyst con el directorio. Asócielo con el proyecto que creamos anteriormente desde la consola. Seleccione **PhotoStoreApp** de la lista y presione **Enter**. ![catalyst_tutorials_photostore_cli_proj_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_proj_sel.webp) 4. Presione **Enter** sin realizar ninguna selección. ![catalyst_tutorials_photostore_cli_compont_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_compont_sel.webp) El proyecto será inicializado y se creará un archivo [`catalyst.json`](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/catalyst-json/). ![catalyst_tutorials_photostore_cli_init_cmpltd](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_init_cmpltd.webp) 5. Inicialice un servicio AppSail en el directorio de su proyecto ejecutando el siguiente comando de la CLI de Catalyst: ```sh catalyst appsail:add ``` > **Nota:** En este tutorial, estamos usando el comando `add` para inicializar el servicio AppSail y mostrar [comandos alternativos de la CLI de Catalyst](https://docs.catalyst.zoho.com/es/cli/v1/cli-command-reference/#commands) para inicializar el servicio AppSail. 6. La CLI le pedirá que elija entre [Catalyst-Managed Runtime](https://docs.catalyst.zoho.com/es/serverless/help/appsail/catalyst-managed-runtimes/key-concepts/) y [Docker Image](https://docs.catalyst.zoho.com/es/serverless/help/appsail/custom-runtimes/container-registry-services/). Como está creando este proyecto desde uno de los Catalyst-Managed Runtime, seleccione **Catalyst-Managed Runtime** y presione **Enter**. ![catalyst_alien_city_cli_appsail_setup_start](https://catalyst-docs-development.zohostratus.in/images/tutorials/alien-city-appsail-express/aliencity-appsail-selection.webp) 7. Ingrese "`photo-store-app`" como el nombre del servicio AppSail. ![catalyst_tutorials_photostore_cli_appsail_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_init.webp) 8. Ingrese "`.`" como la ruta de compilación y seleccione el runtime más reciente de *Node.js* como el stack de funciones para su servicio AppSail. ![catalyst_tutorials_photostore_cli_appsail_func_stack](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_func_stack.webp) El servicio AppSail será inicializado para su proyecto. ![catalyst_tutorials_photostore_cli_appsail_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_completed.webp) 9. Para inicializar el cliente como una aplicación web React, ejecute el siguiente comando: ```sh npx create-react-app photo-store-app ``` ![catalyst_tutorials_photostore_cli_react_app_start](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_react_app_start.webp) El cliente será inicializado como una aplicación web React. ![catalyst_tutorials_photostore_cli_react_app_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_react_app_completed.webp) El cliente y el backend de la aplicación han sido inicializados y están listos para ser configurados según nuestros requisitos. 10. Ejecute el siguiente comando en el directorio `PhotostoreApp/photo-store-app`. ![catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up.webp) Esto es para asegurar que el proyecto se está sirviendo en localhost sin errores. ![catalyst_tutorials_photostore_app_init_compiled_success](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_app_init_compiled_success.webp) El directorio actual de su proyecto debería aparecer de la siguiente manera: ![catalyst_tutorials_photostore_stratus_first_dir_struct_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_first_dir_struct_1.webp) El servicio AppSail ha sido inicializado para su aplicación.