Ir al artículo
Aniq-UI

Food StudioEjecuta el restaurante en local

Ejecuta el restaurante 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 food-studio-full-stack-main-….zip.

  2. Descomprime y abre la carpeta

    Extrae el ZIP y abre una terminal en la carpeta food-studio-full-stack. En Windows, extráelo en el Explorador de archivos y luego abre una terminal en la carpeta.

    Terminal
    unzip food-studio-full-stack-*.zip
cd food-studio-full-stack

    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, el sitio web de pedidos y el panel del personal. No hay que configurar nada antes. El primer inicio construye tres imágenes y llena la base de datos con el restaurante de demostración, lo que tarda unos minutos; los siguientes inicios tardan segundos.

    Terminalen food-studio-full-stack
    docker compose up --build

    ¿Un puerto ya está en uso?

    Si el inicio se detiene con address already in use o port is already allocated, otro programa usa el 3030, el 3031 o el 8000. Detenlo, o crea un archivo llamado .env en la carpeta food-studio-full-stack, junto a docker-compose.yml, con el puerto que necesites, por ejemplo ADMIN_PORT=3041 (SITE_PORT para el sitio web, API_PORT para la API). Vuelve a ejecutar 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 el sitio web de pedidos

    Abre localhost:3030Local. Para iniciar sesión como el cliente de demostración, usa sam@foodstudio.example con la contraseña FoodDemo2026!. El árabe está en /ar.

    Resultado esperado: El sitio web se abre en su página de inicio con el menú de demostración y sus imágenes.

    ¿Tienes problemas?

  5. Inicia sesión en el panel del personal

    Abre localhost:3031Local. Inicia sesión con owner@foodstudio.example y la contraseña FoodDemo2026!. Para el gerente o la cocina, escribe manager@foodstudio.example o kitchen@foodstudio.example con la misma contraseña. Cambia estas contraseñas antes de que el restaurante sea accesible desde internet.

    Resultado esperado: El panel se abre en su resumen, con los pedidos de hoy y la cola de la cocina.

    ¿Tienes problemas?

Haz un recorrido

Así se ve el restaurante de demostración cuando todo está en marcha.

CuentaInicia sesión enCorreo electrónicoContraseña
Propietario: todo, incluidos el equipo y los rolesPanel del personalowner@foodstudio.exampleFoodDemo2026!
Gerente: todo excepto el equipo y los rolesPanel del personalmanager@foodstudio.exampleFoodDemo2026!
Cocina: los pedidos de la cocina Central, sin preciosPanel del personalkitchen@foodstudio.exampleFoodDemo2026!
Cliente, con puntos de recompensa de pedidos anterioresSitio web de pedidossam@foodstudio.exampleFoodDemo2026!

La carga de datos también añade dos gerentes más (rami.manager@foodstudio.example y nina.manager@foodstudio.example) y una cuenta de cocina para cada una de las otras tres cocinas (riverside.kitchen@, uptown.kitchen@ y harbor.kitchen@, todas en foodstudio.example), con la misma contraseña. Son solo cuentas de demostración en local.

Detén e inicia de nuevo

Pulsa Ctrl+C en la terminal para detener las aplicaciones, o ejecuta esto desde la carpeta food-studio-full-stack. Tus datos, la base de datos y los archivos subidos, se conservan en el volumen food-studio-data.

Terminalen food-studio-full-stack
docker compose down

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

Terminalen food-studio-full-stack
docker compose up

Conserva tus datos

docker compose down -v también elimina el volumen de datos. El siguiente inicio carga una copia nueva del restaurante de demostración, y todo lo que creaste desaparece.

Ejecuta el sitio web de pedidos

Este paquete es el sitio web de pedidos por sí solo. Lo lee todo de la API de la plantilla, así que inicia primero la API. Salvo que lo construyas con otra dirección, el sitio web espera la API en http://localhost:8000. La API es un paquete aparte y no está en esta descarga.

  1. Descarga tu plantilla

    Abre Mis plantillas y descarga el ZIP de Sitio web de pedidos.

  2. Descomprime y abre la carpeta

    Terminal
    unzip food-studio-website-*.zip
cd food-studio-website

    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, así que son argumentos de construcción. Sin ninguno, el sitio web usa la API en http://localhost:8000/api. Para una API en otro lugar, pasa su dirección.

    Terminalen food-studio-website
    docker build -t foodstudio-site .

    Con tu propia API:

    Terminalen food-studio-website
    docker build -t foodstudio-site --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api --build-arg NEXT_PUBLIC_MEDIA_HOSTNAME=media.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, abre ese puerto en su lugar y añade la nueva dirección a CORS_ORIGIN de la API.

    Terminalen food-studio-website
    docker run -p 3030:3030 foodstudio-site

    Resultado esperado: localhost:3030Local abre el sitio web con el menú de tu API. El inglés está en /en y el árabe en /ar.

    ¿Tienes problemas?

Ejecuta el panel del personal

Este paquete es el panel del personal por sí solo. Cada pantalla lee la API de la plantilla, así que inicia primero la API. Salvo que lo construyas con otra dirección, el panel espera la API en http://localhost:8000. 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 del personal.

  2. Descomprime y abre la carpeta

    Terminal
    unzip food-studio-staff-dashboard-*.zip
cd food-studio-staff-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 la API en http://localhost:8000/api. Para una API en otro lugar, pasa su dirección, su dirección sin /api para las notificaciones en directo, y la dirección del sitio web para el enlace "View storefront".

    Terminalen food-studio-staff-dashboard
    docker build -t foodstudio-admin .

    Con tu propia API:

    Terminalen food-studio-staff-dashboard
    docker build -t foodstudio-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://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, abre ese puerto en su lugar y añade la nueva dirección a CORS_ORIGIN de la API.

    Terminalen food-studio-staff-dashboard
    docker run -p 3031:3031 foodstudio-admin

    Resultado esperado: localhost:3031Local abre el formulario de inicio de sesión. Inicia sesión con la cuenta del propietario owner@foodstudio.example y la contraseña FoodDemo2026!, que acepta una API con los datos de demostración cargados.

    ¿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 junto con los archivos subidos. El sitio web de pedidos y el panel del personal 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 abre la carpeta

    Terminal
    unzip food-studio-backend-*.zip
cd food-studio-backend

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

    ¿Tienes problemas?

  3. Construye la imagen

    Terminalen food-studio-backend
    docker build -t foodstudio-api .
    ¿Tienes problemas?

  4. Inícialo con el restaurante de demostración

    Un volumen nuevo recibe tablas vacías y ninguna cuenta salvo que pidas el restaurante de demostración, así que mantén -e SEED_DEMO_DATA=true en el primer inicio. El volumen conserva la base de datos y los archivos subidos entre ejecuciones. Si el puerto 8000 está ocupado, cambia el número a la izquierda de -p, por ejemplo -p 8010:8000, y añade -e PUBLIC_MEDIA_URL=http://localhost:8010/media para que las direcciones de las imágenes también lo usen. Tus frontends deben apuntar entonces a http://localhost:8010/api.

    Terminalen food-studio-backend
    docker run -p 8000:8000 -v foodstudio-data:/data -e SEED_DEMO_DATA=true foodstudio-api

    Resultado esperado: localhost:8000/api/healthLocal responde {"success":true,"data":{"status":"ok","database":"up"},"message":""}.

    ¿Tienes problemas?

El contenedor acepta el sitio web en http://localhost:3030 y el panel en http://localhost:3031. Para otras direcciones, configura CORS_ORIGIN, FRONTEND_URL y STOREFRONT_URL con -e.

Para darle al contenedor tus propias claves (pagos, correo, R2, IA), crea .env a partir de .env.example con cp .env.example .env, rellénalo y añade --env-file .env a docker run. Sin un JWT_SECRET propio, o con el del 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 food-studio-backend
docker build --build-arg FETCH_BG_MODEL=true -t foodstudio-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.