---
title: "Configurar el servicio AppSail"
url: https://docs.catalyst.zoho.com/es/tutorials/photo-store-app/nodejs/config-appsail/
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: "Catalyst AppSail"
    url: /es/serverless/help/appsail/introduction/
  - name: "Catalyst Pipelines"
    url: /es/pipelines/help/pipelines/introduction/
  - name: "Servir recursos"
    url: /es/cli/v1/serve-resources/introduction/
  - name: "Desplegar recursos"
    url: /es/cli/v1/deploy-resources/introduction/
---

# Configurar el servicio AppSail

Antes de desplegar su servicio [AppSail](https://docs.catalyst.zoho.com/es/serverless/help/appsail/introduction/) en la consola, necesita agregar los siguientes archivos y código al directorio de su proyecto:

- Cree una carpeta llamada `server` en el directorio raíz de su proyecto y cree los siguientes archivos en ella:
    - `index.js`: Este archivo actuará como el servidor proxy para servir sus archivos React compilados.
- Cree una carpeta llamada `scripts` y agregue los siguientes archivos:
    - `filesHelper.js`: Este archivo se usará para copiar los archivos de los directorios `server` y `photo-store-app` a la ruta de compilación de AppSail.
- Cree una carpeta llamada `build` en el directorio raíz de su proyecto. Esta carpeta contendrá los archivos React compilados de su cliente. Debe apuntar esta carpeta como su ruta de compilación para iniciar su aplicación. Cree las siguientes carpetas en el directorio build.
    - `server`
    - `photo-store-app`

El directorio de la aplicación debería verse ahora de la siguiente manera:
![catalyst_tutorials_photostore_stratus_second_dir_struct](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_second_dir_struct.webp)

A continuación, navegue al directorio `PhotoStoreApp/server/` y realice los siguientes pasos:

1. Ejecute el siguiente comando de la CLI desde su terminal:

```sh
npm init
```

![catalyst_tutorials_photostore_stratus_npm_start_appsail_npm_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_npm_init.webp)

2. Ejecute el siguiente comando para instalar el paquete *Express* para manejar solicitudes y respuestas HTTP.

```sh
npm install express --save
```

![catalyst_tutorials_photostore_stratus_express_install](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_express_install.webp)

Esto también creará una carpeta `node_modules` en el directorio `PhotoStoreApp/server`.

3. Agregue el siguiente código a su archivo `index.js` presente en el directorio `PhotoStoreApp/server/`.

**index.js**

```js
'use strict';
const express = require('express');
const path = require('path');
const app = express();
const appDir = path.join(__dirname, '../photo-store-app');
const port = process.env.X_ZOHO_CATALYST_LISTEN_PORT || 9000;
app.get('/', function (req, res) {
	res.sendFile(path.join(appDir));
});
app.use(express.static(appDir));
app.listen(port, () => {
	console.log(`Example app listening on port ${port}`);
});

```

![catalyst_tutorials_photostore_stratus_express_install](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_express_install.webp)

> **Nota:** Necesita usar la variable de entorno '`X_ZOHO_CATALYST_LISTEN_PORT`' para escuchar en el puerto configurado por Catalyst.

4. A continuación, navegue a la carpeta `scripts` presente en el directorio `PhotoStoreApp/scripts` y ejecute el siguiente comando:

```sh
npm init
```

Asegúrese de ingresar los valores predeterminados, y este comando creará un archivo `package.json`.
![catalyst_tutorials_photostore_stratus_npm_start_appsail_scripts_npminit](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_scripts_npminit.webp)

5. Ejecute el siguiente comando en su carpeta `scripts` para instalar los paquetes requeridos:

```sh
npm install path util fs
```

![catalyst_tutorials_photostore_stratus_npm_start_appsail_scripts_npm_packs](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_scripts_npm_packs.webp)

Este comando instalará los siguientes paquetes:
- `path`: Este paquete se usará para manejar rutas de archivos y directorios.
- `util`: Este paquete es necesario para usar utilidades como `promisify`, `inherits`, etc.
- `fs`: Este paquete es necesario para implementar operaciones del sistema de archivos.

6. Copie el siguiente código y péguelo en el archivo `filesHelper.js` presente en el directorio `PhotoStoreApp/scripts`.

**filesHelper.js**

```js
const Path = require('path');
const { promisify } = require('util');
const Fs = require('fs');
const readdir = promisify(Fs.readdir);
const stat = promisify(Fs.stat);
const copyFile = promisify(Fs.copyFile);
const mkdir = promisify(Fs.mkdir);
const unlink = promisify(Fs.unlink);
const rmdir = promisify(Fs.rmdir);
if (process.argv.length < 4) {
	console.error('Usage: node copyAndDelete.js [-c|-d] <sourcePath> <destinationPath>');
	process.exit(1);
}
const operation = process.argv[2];
if (operation !== '-c' && operation !== '-d') {
	console.error('Invalid operation. Use -c for copy or -d for delete.');
	process.exit(1);
}
if (operation === '-c') {
	const sourcePath = Path.resolve(process.argv[3]);
	const destinationPath = Path.resolve(process.argv[4]);
	copyFolders(sourcePath, destinationPath)
		.then(() => {
			console.log('Copy completed successfully.');
		})
		.catch((err) => {
			console.error(`Error: ${err}`);
		});
} else if (operation === '-d') {
	const sourcePath = Path.resolve(process.argv[3]);
	deleteFolder(sourcePath)
		.then(() => {
			console.log('Delete completed successfully.');
		})
		.catch((err) => {
			console.error(`Error: ${err}`);
		});
}
async function copyFolders(source, destination) {
	try {
		await mkdir(destination, { recursive: true });
		const files = await readdir(source);
		for (const file of files) {
			const sourceFilePath = Path.join(source, file);
			const destFilePath = Path.join(destination, file);
			const fileStat = await stat(sourceFilePath);
			if (fileStat.isDirectory()) {
				await copyFolders(sourceFilePath, destFilePath);
			} else {
				await copyFile(sourceFilePath, destFilePath);
			}
		}
	} catch (err) {
		throw err;
	}
}
async function deleteFolder(destinationPath) {
	try {
		const files = await readdir(destinationPath);
		for (const file of files) {
			const filePath = Path.join(destinationPath, file);
			const fileStat = await stat(filePath);
			if (fileStat.isDirectory()) {
				await deleteFolder(filePath);
			} else {
				await unlink(filePath);
			}
		}
		await rmdir(destinationPath);
	} catch (err) {
		throw err;
	}
}

```

Ahora, navegue al archivo `app-config.json` presente en el directorio del proyecto `PhotoStoreApp/app-config.json` y pegue el siguiente código.

**app-config.json**

```json
{
  "command": "node ./server/index.js",
  "build_path": "./build",
  "stack": "node20",
  "env_variables": {},
  "memory": 256,
  "scripts": {
    "preserve": "cd photo-store-app && npm run build && cd .. && cd server && npm install && cd .. && cd scripts && npm install && cd .. && node ./scripts/filesHelper.js -c ./server/ ./build/server/ && node ./scripts/filesHelper.js -c ./photo-store-app/build/ ./build/photo-store-app/",
    "postserve": "node ./scripts/filesHelper.js -d ./build/server && node ./scripts/filesHelper.js -d ./build/photo-store-app",
    "predeploy": "cd photo-store-app && npm run build && cd .. && node ./scripts/filesHelper.js -c ./server/ ./build/server/ && node ./scripts/filesHelper.js -c ./photo-store-app/build/ ./build/photo-store-app/",
    "postdeploy": "node ./scripts/filesHelper.js -d ./build/server && node ./scripts/filesHelper.js -d ./build/photo-store-app"
  },
  "raw": {},
  "catalyst_auth": true,
  "login_redirect": "/index.html"
}

```

> **Nota**: Necesita incluir los siguientes pares clave-valor en el archivo `app-config.json`:

* El valor de la clave `catalyst_auth` debe establecerse como true, para habilitar [Catalyst Authentication](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/introduction/) para el servicio AppSail.

* Necesita establecer el valor de la clave `login_redirect` como `index.html` para asegurar la redirección correcta después del proceso de autenticación.

### Probar y desplegar el servicio AppSail

A continuación, navegue al directorio raíz de su proyecto. Para verificar que todos los pasos completados hasta ahora estén libres de errores, vamos a servir la aplicación desde la CLI usando el siguiente comando de la CLI de Catalyst:

```sh
catalyst serve
```

![catalyst_tutorials_photostore_stratus_pipelines_serve_cli_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_serve_cli_1.webp)

Este comando servirá la aplicación en su localhost. Se mostrarán las URLs de los endpoints locales de los componentes.
![catalyst_tutorials_photostore_stratus_catalyst_serve_init_2](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_catalyst_serve_init_2.webp)

Si la aplicación está libre de errores, el servicio AppSail se compilará y servirá exitosamente, típicamente en `localhost:3001`.

> **Info:** Cada vez que acceda a la página principal o a cualquiera de las subpáginas de su cliente o función, la CLI mostrará un registro en vivo de la URL accedida, junto con el método de solicitud HTTP.

Una vez que se asegure de que la aplicación se ejecuta sin errores, puede [desplegar la aplicación](https://docs.catalyst.zoho.com/es/cli/v1/deploy-resources/introduction/) en la consola de Catalyst usando el siguiente comando de la CLI de Catalyst:

```sh
catalyst deploy
```

![catalyst_tutorials_photostore_stratus_catalyst_deploy](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_catalyst_deploy.webp)

La aplicación ahora estará desplegada en la consola de Catalyst.

Puede acceder al servicio AppSail en la consola navegando al componente **AppSail** presente en la sección de *Catalyst Serverless*.
![catalyst_tutorials_photostore_stratus_pipelines_icons](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/app-sail-navigation-photostore-app.webp)

Puede encontrar más detalles sobre el servicio *AppSail* haciendo clic en el servicio requerido.
![catalyst_tutorials_photostore_stratus_catalyst_appsail_service_url_first_dep](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_catalyst_appsail_service_url_first_dep.webp)

El servicio AppSail ha sido configurado para su aplicación.

### Habilitar Bucket CORS

Una vez que el servicio AppSail esté desplegado en la consola de Catalyst, tendremos la URL de la aplicación. Dado que los dominios del bucket y del AppService son diferentes, necesitamos habilitar la política de Cross-Origin Resource Sharing (CORS) para autenticar y permitir una interacción fluida entre el servicio AppSail y el Bucket.

> **Info:** [Conozca más sobre Bucket CORS](https://docs.catalyst.zoho.com/es/cloud-scale/help/stratus/stratus-config/bucket-cors/)

Para habilitar Bucket CORS:

1. Navegue a su Bucket presente en Stratus.
	![catalyst_tutorials-photostore-app-stratus-cors-start](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-start.webp)

2. Navegue a la sección **Bucket CORS** presente en la pestaña **Configurations** y haga clic en **Add Domain**.
	![catalyst_tutorials-photostore-app-stratus-cors-config-domain](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-config-domain.webp)

3. Seleccione todos los **Request Methods** proporcionados en el menú desplegable y pegue la URL del servicio AppSail generada en el paso anterior.
	![catalyst_tutorials-photostore-app-stratus-cors-domain-adding](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-domain-adding.webp)

4. Haga clic en **Add**, y CORS estará habilitado para el servicio AppSail, asegurando un acceso seguro.
	![catalyst_tutorials-photostore-app-stratus-cors-domain-added](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-domain-added.webp)

### Configurar GitHub

Con la aplicación desplegada en la consola de Catalyst, necesita asegurarse de haber subido los archivos de la aplicación a su cuenta de GitHub.
![catalyst_tutorials_photostore_stratus_github_first_deploy](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_github_first_deploy.webp)

> **Nota:** En adelante, vamos a implementar el servicio [Pipelines](https://docs.catalyst.zoho.com/es/pipelines/help/pipelines/introduction/) para desplegar la aplicación y sincronizar el proyecto de GitHub con la consola de Catalyst.