Skip to the article
Aniq-UI

E-CommerceRun the store locally

Run the store locally

Get your package running on your computer, with Docker.

For the Full Stack package

DockerRecommendedManual setup

Before you start: install and open Docker Desktop, or Docker Engine with Compose.

View requirements

  1. Download your template

    Open My templates and download the ZIP for your package.

    Expected result: A file named like e-commerce-1-main-….zip is in your downloads.

  2. Unzip and open the folder

    Extract the ZIP and open a terminal in the e-commerce-1 folder. On Windows, extract it in File Explorer, then open a terminal in the folder.

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

    Expected result: The folder lists admin-dashboard, back-end, storefront and docker-compose.yml.

    Having trouble?

  3. Start the apps

    Build and start the API, the storefront and the admin dashboard. Nothing has to be configured first. The first start builds three images and fills the database with the demo store, which takes a few minutes; later starts take seconds.

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

    A port is already in use?

    If the start stops with ports are not available ... address already in use, another program uses 3030, 3031 or 8000. Either stop it, or create a file named .env in the e-commerce-1 folder with the port you need, such as ADMIN_PORT=3041 (SITE_PORT for the storefront, API_PORT for the API). Run docker compose up --build again and open the app on its new port.

    A port is already in use

    Expected result: The three services keep running and the log stops scrolling. Leave this terminal open.

    Having trouble?

  4. Open the storefront

    Open localhost:3030Local. To sign in as a demo customer, use john.doe@example.com with the password password123. Arabic is at /ar.

    Expected result: The shop opens on its home page with the demo catalogue.

    Having trouble?

  5. Sign in to the admin

    Open localhost:3031Local. The form is prefilled with the Super Admin, admin@example.com with the password Admin@123. Change it after your first sign-in.

    Expected result: The admin dashboard opens on its overview.

    Having trouble?

Take a tour

What the demo store looks like once everything runs.

AccountSigns in atEmailPassword
Super AdminAdmin dashboardadmin@example.comAdmin@123
Staff, read-only Viewer roleAdmin dashboardjohn.smith@admin.comadmin123
CustomerStorefrontjohn.doe@example.compassword123

Ten more staff accounts exist at @admin.com with the password admin123, and fourteen more customers at @example.com with password123. These are local demo accounts only.

Stop and start again

Press Ctrl+C in the terminal to stop the apps, or run this from the e-commerce-1 folder. Your data is kept in the ecommerce-data volume.

Terminalin e-commerce-1
docker compose down

Start again with the same command as step 3. Without --build it reuses the images you already built.

Terminalin e-commerce-1
docker compose up

Keep your data

docker compose down -v also deletes the database volume. The next start seeds a fresh copy of the demo store, and everything you created is gone.

Run the storefront

This package is the storefront on its own. It runs on a built-in sample store until you point it at the template's API. The API is a separate package and is not in this download.

  1. Download your template

    Open My templates and download the Storefront ZIP.

  2. Unzip and open the folder

    Terminal
    unzip storefront-*.zip
cd storefront

    Expected result: The folder has a Dockerfile and a package.json.

    Having trouble?

  3. Build the image

    The NEXT_PUBLIC_* values are compiled into the JavaScript the browser loads, so they are build arguments. Leave them out to run on the sample store; to use your own API, pass its address.

    Terminalin storefront
    docker build -t ecommerce-storefront .

    With your own API:

    Terminalin 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 .
    Having trouble?

  4. Start it

    If port 3030 is taken, change the number on the left of -p, for example -p 3041:3030, and open that port instead.

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

    Expected result: localhost:3030Local opens the shop. Without an API, a "Sample data" notice says so, and any email and password sign you in as the sample shopper.

    Having trouble?

Run the admin dashboard

This package is the admin dashboard on its own. Without an API it runs on a built-in sample store in the browser: you can sign in, create products, move orders and change permissions, and your changes are kept in the browser. The API is a separate package and is not in this download.

  1. Download your template

    Open My templates and download the Admin Dashboard ZIP.

  2. Unzip and open the folder

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

    Expected result: The folder has a Dockerfile and a package.json.

    Having trouble?

  3. Build the image

    Without build arguments the dashboard uses its sample store. To use your own API, pass its address, its WebSocket address (the same server without /api) and the storefront's address.

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

    With your own API:

    Terminalin 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 .
    Having trouble?

  4. Start it and sign in

    If port 3031 is taken, change the number on the left of -p, for example -p 3041:3031, and open that port instead.

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

    Expected result: localhost:3031Local opens the sign-in form, prefilled with admin@example.com and Admin@123. On the sample store, any valid email with a password of at least 6 characters signs you in as the Super Admin.

    Having trouble?

Run the API

This package is the NestJS API on its own, on a SQLite file kept in a Docker volume. The storefront and the admin dashboard are separate packages and are not in this download.

  1. Download your template

    Open My templates and download the Backend API ZIP.

  2. Unzip and create the environment file

    .env.example works as it is for a local run. The .env copy is where your own keys go later.

    Terminal
    unzip back-end-*.zip
cd back-end
cp .env.example .env
    Having trouble?

  3. Build the image

    Terminalin back-end
    docker build -t ecommerce-api .
    Having trouble?

  4. Start it with the demo store

    A fresh database gets empty tables unless you ask for the demo store. The volume keeps the database between runs. If port 8000 is taken, change the number on the left of -p, for example -p 8010:8000, and use that address: your frontends must then point at http://localhost:8010/api.

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

    Expected result: localhost:8000/api/healthLocal answers {"status":"ok"}.

    Having trouble?

The container reads your .env only when you add --env-file .env to docker run; that is how your Stripe, R2 and AI keys reach it. Without a JWT_SECRET of your own, or with the example one, the container generates a secret and keeps it in the volume.

The image leaves out the background-removal model unless you ask for it. To include it, build with:

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

Next

Stuck on a step?

Find a fix before you start over.

Troubleshooting

Cookie Preferences

We use cookies to enhance your browsing experience, analyze site traffic, and personalize content. By clicking "Accept All", you consent to our use of cookies for analytics and personalized advertising.