Aller à l'article
Aniq-UI

E-CommerceLancer la boutique en local

Lancer la boutique en local

Lancez votre pack sur votre ordinateur, avec Docker.

Pour le pack Full Stack

DockerRecommandéInstallation manuelle

Avant de commencer : installez et ouvrez Docker Desktop, ou Docker Engine avec Compose.

Voir la configuration requise

  1. Téléchargez votre template

    Ouvrez Mes templates et téléchargez le ZIP correspondant à votre pack.

    Résultat attendu: Un fichier nommé comme e-commerce-1-main-….zip se trouve dans vos téléchargements.

  2. Décompressez et ouvrez le dossier

    Extrayez le ZIP et ouvrez un terminal dans le dossier e-commerce-1. Sous Windows, extrayez-le dans l'Explorateur de fichiers, puis ouvrez un terminal dans le dossier.

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

    Résultat attendu: Le dossier contient admin-dashboard, back-end, storefront et docker-compose.yml.

    Un problème ?

  3. Démarrez les applications

    Construisez et démarrez l'API, la boutique et le tableau de bord admin. Rien n'est à configurer au préalable. Le premier démarrage construit trois images et remplit la base de données avec la boutique de démonstration, ce qui prend quelques minutes ; les démarrages suivants ne prennent que quelques secondes.

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

    Un port est déjà utilisé ?

    Si le démarrage s'arrête sur ports are not available ... address already in use, un autre programme utilise 3030, 3031 ou 8000. Arrêtez-le, ou créez un fichier nommé .env dans le dossier e-commerce-1 avec le port voulu, par exemple ADMIN_PORT=3041 (SITE_PORT pour la boutique, API_PORT pour l'API). Relancez docker compose up --build et ouvrez l'application sur son nouveau port.

    Un port est déjà utilisé

    Résultat attendu: Les trois services restent actifs et le journal cesse de défiler. Laissez ce terminal ouvert.

    Un problème ?

  4. Ouvrez la boutique

    Ouvrez localhost:3030Local. Pour vous connecter en tant que client de démonstration, utilisez john.doe@example.com avec le mot de passe password123. L'arabe se trouve sous /ar.

    Résultat attendu: La boutique s'ouvre sur sa page d'accueil avec le catalogue de démonstration.

    Un problème ?

  5. Connectez-vous au tableau de bord admin

    Ouvrez localhost:3031Local. Le formulaire est prérempli avec le Super Admin, admin@example.com avec le mot de passe Admin@123. Changez-le après votre première connexion.

    Résultat attendu: Le tableau de bord admin s'ouvre sur sa vue d'ensemble.

    Un problème ?

Faites le tour

Voici à quoi ressemble la boutique de démonstration une fois que tout tourne.

CompteSe connecte surE-mailMot de passe
Super AdminTableau de bord adminadmin@example.comAdmin@123
Personnel, rôle Viewer en lecture seuleTableau de bord adminjohn.smith@admin.comadmin123
ClientBoutiquejohn.doe@example.compassword123

Dix autres comptes du personnel existent en @admin.com avec le mot de passe admin123, et quatorze autres clients en @example.com avec password123. Ce sont uniquement des comptes de démonstration en local.

Arrêter et redémarrer

Appuyez sur Ctrl+C dans le terminal pour arrêter les applications, ou exécutez cette commande depuis le dossier e-commerce-1. Vos données sont conservées dans le volume ecommerce-data.

Terminaldans e-commerce-1
docker compose down

Redémarrez avec la même commande qu'à l'étape 3. Sans --build, elle réutilise les images déjà construites.

Terminaldans e-commerce-1
docker compose up

Conserver vos données

docker compose down -v supprime aussi le volume de la base de données. Le démarrage suivant recrée une copie neuve de la boutique de démonstration, et tout ce que vous avez créé est perdu.

Lancer la boutique

Ce pack contient uniquement la boutique. Il fonctionne sur une boutique d'exemple intégrée jusqu'à ce que vous le connectiez à l'API du template. L'API est un pack séparé et ne fait pas partie de ce téléchargement.

  1. Téléchargez votre template

    Ouvrez Mes templates et téléchargez le ZIP Boutique.

  2. Décompressez et ouvrez le dossier

    Terminal
    unzip storefront-*.zip
cd storefront

    Résultat attendu: Le dossier contient un Dockerfile et un package.json.

    Un problème ?

  3. Construisez l'image

    Les valeurs NEXT_PUBLIC_* sont compilées dans le JavaScript chargé par le navigateur : ce sont donc des arguments de build. Omettez-les pour fonctionner sur la boutique d'exemple ; pour utiliser votre propre API, indiquez son adresse.

    Terminaldans storefront
    docker build -t ecommerce-storefront .

    Avec votre propre API :

    Terminaldans 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 .
    Un problème ?

  4. Démarrez l'application

    Si le port 3030 est occupé, changez le nombre à gauche de -p, par exemple -p 3041:3030, et ouvrez ce port à la place.

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

    Résultat attendu: localhost:3030Local ouvre la boutique. Sans API, une mention « Sample data » l'indique, et n'importe quel e-mail et mot de passe vous connectent en tant que client d'exemple.

    Un problème ?

Lancer le tableau de bord admin

Ce pack contient uniquement le tableau de bord admin. Sans API, il fonctionne sur une boutique d'exemple intégrée, dans le navigateur : vous pouvez vous connecter, créer des produits, faire avancer des commandes et changer des permissions, et vos modifications sont conservées dans le navigateur. L'API est un pack séparé et ne fait pas partie de ce téléchargement.

  1. Téléchargez votre template

    Ouvrez Mes templates et téléchargez le ZIP Tableau de bord admin.

  2. Décompressez et ouvrez le dossier

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

    Résultat attendu: Le dossier contient un Dockerfile et un package.json.

    Un problème ?

  3. Construisez l'image

    Sans arguments de build, le tableau de bord utilise sa boutique d'exemple. Pour utiliser votre propre API, indiquez son adresse, son adresse WebSocket (le même serveur sans /api) et l'adresse de la boutique.

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

    Avec votre propre API :

    Terminaldans 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 .
    Un problème ?

  4. Démarrez-le et connectez-vous

    Si le port 3031 est occupé, changez le nombre à gauche de -p, par exemple -p 3041:3031, et ouvrez ce port à la place.

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

    Résultat attendu: localhost:3031Local ouvre le formulaire de connexion, prérempli avec admin@example.com et Admin@123. Avec la boutique d'exemple, n'importe quel e-mail valide avec un mot de passe d'au moins 6 caractères vous connecte en tant que Super Admin.

    Un problème ?

Lancer l'API

Ce pack contient uniquement l'API NestJS, sur un fichier SQLite conservé dans un volume Docker. La boutique et le tableau de bord admin sont des packs séparés et ne font pas partie de ce téléchargement.

  1. Téléchargez votre template

    Ouvrez Mes templates et téléchargez le ZIP API backend.

  2. Décompressez et créez le fichier d'environnement

    .env.example fonctionne tel quel pour une exécution en local. La copie .env est l'endroit où vous placerez plus tard vos propres clés.

    Terminal
    unzip back-end-*.zip
cd back-end
cp .env.example .env
    Un problème ?

  3. Construisez l'image

    Terminaldans back-end
    docker build -t ecommerce-api .
    Un problème ?

  4. Démarrez-la avec la boutique de démonstration

    Une nouvelle base démarre avec des tables vides, sauf si vous demandez la boutique de démo. Le volume conserve la base d'un lancement à l'autre. Si le port 8000 est occupé, changez le nombre à gauche de -p, par exemple -p 8010:8000, et utilisez cette adresse : vos frontends doivent alors pointer vers http://localhost:8010/api.

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

    Résultat attendu: localhost:8000/api/healthLocal répond {"status":"ok"}.

    Un problème ?

Le conteneur ne lit votre .env que si vous ajoutez --env-file .env à docker run ; c'est ainsi que vos clés Stripe, R2 et IA lui parviennent. Sans JWT_SECRET propre, ou avec celui de l'exemple, le conteneur génère un secret et le conserve dans le volume.

L'image n'inclut pas le modèle de suppression d'arrière-plan, sauf si vous le demandez. Pour l'inclure, construisez avec :

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

Étapes suivantes

Bloqué sur une étape ?

Trouvez une solution avant de tout recommencer.

Dépannage

Préférences des Cookies

Nous utilisons des cookies pour améliorer votre expérience de navigation, analyser le trafic du site et personnaliser le contenu. En cliquant sur "Accepter Tout", vous consentez à notre utilisation des cookies pour l'analyse et la publicité personnalisée.