Ir al artículo
Aniq-UI

E-CommerceEjecuta la tienda en local

Ejecuta la tienda en local

Pon en marcha tu paquete en tu equipo, con Docker.

Para el paquete Full Stack

DockerRecomendadoInstalación manual

Antes de empezar: instala y abre Docker Desktop, o Docker Engine con Compose.

Ver los requisitos

  1. Descarga tu plantilla

    Abre Mis plantillas y descarga el ZIP de tu paquete.

    Resultado esperado: Tienes en tus descargas un archivo con un nombre como e-commerce-1-main-….zip.

  2. Descomprime y abre la carpeta

    Extrae el ZIP y abre una terminal en la carpeta e-commerce-1. En Windows, extráelo en el Explorador de archivos y luego abre una terminal en la carpeta.

    Terminal
    unzip e-commerce-1-*.zip
cd e-commerce-1

    Resultado esperado: La carpeta contiene admin-dashboard, back-end, storefront y docker-compose.yml.

    ¿Tienes problemas?

  3. Inicia las aplicaciones

    Construye e inicia la API, la tienda y el panel de administración. No hay que configurar nada antes. El primer inicio construye tres imágenes y llena la base de datos con la tienda de demostración, lo que tarda unos minutos; los siguientes inicios tardan segundos.

    Terminalen e-commerce-1
    docker compose up --build

    ¿Un puerto ya está en uso?

    Si el arranque se detiene con ports are not available ... address already in use, otro programa usa el 3030, el 3031 o el 8000. Detenlo, o crea un archivo llamado .env en la carpeta e-commerce-1 con el puerto que necesitas, por ejemplo ADMIN_PORT=3041 (SITE_PORT para la tienda, API_PORT para la API). Ejecuta de nuevo docker compose up --build y abre la aplicación en su nuevo puerto.

    Un puerto ya está en uso

    Resultado esperado: Los tres servicios siguen en ejecución y el registro deja de desplazarse. Deja esta terminal abierta.

    ¿Tienes problemas?

  4. Abre la tienda

    Abre localhost:3030Local. Para iniciar sesión como cliente de demostración, usa john.doe@example.com con la contraseña password123. El árabe está en /ar.

    Resultado esperado: La tienda se abre en su página de inicio con el catálogo de demostración.

    ¿Tienes problemas?

  5. Inicia sesión en el panel de administración

    Abre localhost:3031Local. El formulario viene rellenado con el Super Admin, admin@example.com con la contraseña Admin@123. Cámbiala después de tu primer inicio de sesión.

    Resultado esperado: El panel de administración se abre en su vista general.

    ¿Tienes problemas?

Haz un recorrido

Así se ve la tienda de demostración cuando todo está en marcha.

CuentaInicia sesión enCorreo electrónicoContraseña
Super AdminPanel de administraciónadmin@example.comAdmin@123
Personal, rol Viewer de solo lecturaPanel de administraciónjohn.smith@admin.comadmin123
ClienteTiendajohn.doe@example.compassword123

Existen diez cuentas de personal más en @admin.com con la contraseña admin123, y catorce clientes más en @example.com con password123. Son solo cuentas de demostración locales.

Detén e inicia de nuevo

Pulsa Ctrl+C en la terminal para detener las aplicaciones, o ejecuta esto desde la carpeta e-commerce-1. Tus datos se conservan en el volumen ecommerce-data.

Terminalen e-commerce-1
docker compose down

Vuelve a iniciar con el mismo comando del paso 3. Sin --build, reutiliza las imágenes que ya construiste.

Terminalen e-commerce-1
docker compose up

Conserva tus datos

docker compose down -v también elimina el volumen de la base de datos. El siguiente inicio carga una copia nueva de la tienda de demostración y todo lo que creaste se pierde.

Ejecuta la tienda

Este paquete es la tienda por sí sola. Funciona con una tienda de ejemplo integrada hasta que la conectes a la API de la plantilla. La API es un paquete aparte y no está en esta descarga.

  1. Descarga tu plantilla

    Abre Mis plantillas y descarga el ZIP de Tienda.

  2. Descomprime y abre la carpeta

    Terminal
    unzip storefront-*.zip
cd storefront

    Resultado esperado: La carpeta tiene un Dockerfile y un package.json.

    ¿Tienes problemas?

  3. Construye la imagen

    Los valores NEXT_PUBLIC_* se compilan en el JavaScript que carga el navegador, por lo que son argumentos de construcción. Omítelos para usar la tienda de ejemplo; para usar tu propia API, pasa su dirección.

    Terminalen storefront
    docker build -t ecommerce-storefront .

    Con tu propia API:

    Terminalen storefront
    docker build -t ecommerce-storefront --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api --build-arg NEXT_PUBLIC_SITE_URL=https://shop.your-domain.com .
    ¿Tienes problemas?

  4. Inícialo

    Si el puerto 3030 está ocupado, cambia el número a la izquierda de -p, por ejemplo -p 3041:3030, y abre ese puerto.

    Terminalen storefront
    docker run -p 3030:3030 ecommerce-storefront

    Resultado esperado: localhost:3030Local abre la tienda. Sin API, un aviso "Sample data" lo indica, y cualquier correo y contraseña te inician sesión como el comprador de ejemplo.

    ¿Tienes problemas?

Ejecuta el panel de administración

Este paquete es el panel de administración por sí solo. Sin API funciona con una tienda de ejemplo integrada en el navegador: puedes iniciar sesión, crear productos, mover pedidos y cambiar permisos, y tus cambios se guardan en el navegador. La API es un paquete aparte y no está en esta descarga.

  1. Descarga tu plantilla

    Abre Mis plantillas y descarga el ZIP de Panel de administración.

  2. Descomprime y abre la carpeta

    Terminal
    unzip admin-dashboard-*.zip
cd admin-dashboard

    Resultado esperado: La carpeta tiene un Dockerfile y un package.json.

    ¿Tienes problemas?

  3. Construye la imagen

    Sin argumentos de construcción, el panel usa su tienda de ejemplo. Para usar tu propia API, pasa su dirección, su dirección WebSocket (el mismo servidor sin /api) y la dirección de la tienda.

    Terminalen admin-dashboard
    docker build -t ecommerce-admin .

    Con tu propia API:

    Terminalen admin-dashboard
    docker build -t ecommerce-admin --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api --build-arg NEXT_PUBLIC_WEBSOCKET_BASE_URL=https://api.your-domain.com --build-arg NEXT_PUBLIC_STOREFRONT_URL=https://shop.your-domain.com .
    ¿Tienes problemas?

  4. Inícialo e inicia sesión

    Si el puerto 3031 está ocupado, cambia el número a la izquierda de -p, por ejemplo -p 3041:3031, y abre ese puerto.

    Terminalen admin-dashboard
    docker run -p 3031:3031 ecommerce-admin

    Resultado esperado: localhost:3031Local abre el formulario de inicio de sesión, rellenado con admin@example.com y Admin@123. Con la tienda de ejemplo, cualquier correo válido con una contraseña de al menos 6 caracteres te inicia sesión como Super Admin.

    ¿Tienes problemas?

Ejecuta la API

Este paquete es la API de NestJS por sí sola, con un archivo SQLite guardado en un volumen de Docker. La tienda y el panel de administración son paquetes aparte y no están en esta descarga.

  1. Descarga tu plantilla

    Abre Mis plantillas y descarga el ZIP de API Backend.

  2. Descomprime y crea el archivo de entorno

    .env.example funciona tal cual para una ejecución local. La copia .env es donde irán más adelante tus propias claves.

    Terminal
    unzip back-end-*.zip
cd back-end
cp .env.example .env
    ¿Tienes problemas?

  3. Construye la imagen

    Terminalen back-end
    docker build -t ecommerce-api .
    ¿Tienes problemas?

  4. Iníciala con la tienda de demostración

    Una base nueva arranca con tablas vacías salvo que pidas la tienda de demostración. El volumen conserva la base entre ejecuciones. Si el puerto 8000 está ocupado, cambia el número a la izquierda de -p, por ejemplo -p 8010:8000, y usa esa dirección: tus frontends deben apuntar entonces a http://localhost:8010/api.

    Terminalen back-end
    docker run -p 8000:8000 -v ecommerce-data:/data -e SEED_DEMO_DATA=true ecommerce-api

    Resultado esperado: localhost:8000/api/healthLocal responde {"status":"ok"}.

    ¿Tienes problemas?

El contenedor lee tu .env solo cuando añades --env-file .env a docker run; así llegan a él tus claves de Stripe, R2 e IA. Sin un JWT_SECRET propio, o con el de ejemplo, el contenedor genera un secreto y lo guarda en el volumen.

La imagen no incluye el modelo de eliminación de fondo salvo que lo pidas. Para incluirlo, construye con:

Terminalen back-end
docker build --build-arg FETCH_BG_MODEL=true -t ecommerce-api .

Siguiente

¿Te atascaste en un paso?

Busca una solución antes de empezar de nuevo.

Solución de problemas

Preferencias de Cookies

Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies para análisis y publicidad personalizada.