Skip to the article
Aniq-UI

Dashboard 2Run the dashboard locally

Run the dashboard locally

Get your package running on your computer with Docker, then sign in.

For the Full Stack package

DockerRecommendedManual setup

Before you start: install and open Docker Desktop, or Docker Engine on Linux. Nothing else is needed.

View requirements

  1. Download your template

    Open My templates and download the Full Stack ZIP.

    Expected result: A file named like dashboard-2-full-stack-….zip is in your downloads.

  2. Unzip and open the folder

    Extract the ZIP and open a terminal in the dashboard-2-full-stack folder. On Windows, extract it in File Explorer, then open a terminal in the folder.

    Terminal
    unzip -q dashboard-2-full-stack-*.zip
cd dashboard-2-full-stack

    Expected result: The folder lists back-end, front-end, docker-compose.yml, README.md and QUICKSTART.md.

    Having trouble?

  3. Start the apps

    Build and start the API and the dashboard. Nothing has to be configured first. The first start builds two images and fills the database with the sample data, which takes a few minutes; later starts take seconds.

    Terminalin dashboard-2-full-stack
    docker compose up --build

    A port is already in use?

    If the start stops with ports are not available ... address already in use or port is already allocated, another program uses 3030 or 8000. Either stop it, or create a file named .env in the dashboard-2-full-stack folder, beside docker-compose.yml, with the port you need, such as DASHBOARD_PORT=3040 (API_PORT for the API). Run docker compose up --build again and open the dashboard on its new port.

    A port is already in use

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

    Having trouble?

  4. Open the dashboard and sign in

    Open localhost:3030Local. It sends you to the sign-in page. Sign in with admin@example.com and the password Admin@123. Arabic is at /ar.

    Expected result: The overview opens with the figures, the charts, the calendar and your quick tasks.

    Having trouble?

The API answers at localhost:8000/api/healthLocal once its database is ready.

Sign-in accounts

AccountEmailPassword
Super Admin: every page and every actionadmin@example.comAdmin@123
Viewer: sees every list, cannot create, edit or delete records or open the AI assistant; can change their own password and quick tasksjohn.smith@admin.comadmin123

The seed adds ten more admins with the Viewer role, all with the password admin123.

Before going live. Every seed (yarn seed, yarn seed:prod and the first Docker start) creates these sample admins with these passwords. Change their passwords or delete them, and set your own JWT_SECRET, before the dashboard is reachable by anyone else.

Take a tour

What the dashboard looks like once it runs.

Stop and start again

Press Ctrl+C in the terminal to stop the apps, or run this from the folder. Your data is kept in the dashboard-2-data volume.

Terminalin dashboard-2-full-stack
docker compose down

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

Terminalin dashboard-2-full-stack
docker compose up

Keep your data

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

Run the dashboard

This package is the dashboard on its own. Built with no arguments, the image runs on the built-in mock API, so you need no back-end to try it.

  1. Download your template

    Open My templates and download the Admin Dashboard ZIP.

    Expected result: A file named like dashboard-2-front-end-….zip is in your downloads.

  2. Unzip and open the folder

    Terminal
    unzip -q dashboard-2-front-end-*.zip
cd dashboard-2-front-end

    Expected result: The folder lists Dockerfile, package.json, messages, public and src.

    Having trouble?

  3. Build the image

    Docker installs the dependencies and builds the dashboard inside the image. The first build takes a few minutes and needs an internet connection.

    Terminalin dashboard-2-front-end
    docker build -t dashboard-2 .

    Expected result: The build ends with a line naming the image dashboard-2.

    Having trouble?

  4. Start it and sign in

    Start a container, then open localhost:3030Local and sign in with admin@example.com and the password Admin@123. Leave the terminal open while you use it. If port 3030 is taken, change the number on the left of -p, for example -p 3040:3030, and open localhost:3040Local instead.

    Terminalin dashboard-2-front-end
    docker run -p 3030:3030 dashboard-2

    Expected result: The overview opens, with a "Sample data" notice at the bottom of the page.

    Having trouble?

Sign-in accounts

AccountEmailPassword
Super Admin: every page and every actionadmin@example.comAdmin@123
Viewer: sees every list, cannot create, edit or delete records or open the AI assistant; can change their own password and quick tasksjohn.smith@admin.comadmin123

On the mock API these accounts and the sample data live in your browser: what you create, edit or delete is kept in that browser only, and clearing the site's data brings the samples back.

Stop and start again

Press Ctrl+C in the terminal to stop the dashboard. If you closed that terminal, find the container and stop it:

Terminal
docker ps
docker stop <container-id>

Use the ID that docker ps lists for dashboard-2. To start again, run the same docker run command. After you change a file, build the image again: it holds a copy of the code from when it was built.

Point it at your API

The API's address is compiled into the JavaScript the browser loads, so it is a build argument. Use the address the browser reaches the API on, with /api, and the same address without it for the live permission updates:

Terminalin dashboard-2-front-end
docker build -t dashboard-2 --build-arg NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api --build-arg NEXT_PUBLIC_WEBSOCKET_BASE_URL=http://localhost:8000 .
docker run -p 3030:3030 dashboard-2

The API must allow the dashboard's address, http://localhost:3030, in its CORS_ORIGIN. The dashboard is written for this template's NestJS API, which comes with the Full Stack package.

Run the API

This package is the NestJS API on its own, on a SQLite file kept in a Docker volume. Nothing has to be configured first. The dashboard is not in this download.

  1. Download your template

    Open My templates and download the Backend API ZIP.

    Expected result: A file named like dashboard-2-back-end-….zip is in your downloads.

  2. Unzip and open the folder

    Terminal
    unzip -q dashboard-2-back-end-*.zip
cd dashboard-2-back-end

    Expected result: The folder lists Dockerfile, QUICKSTART.md, package.json, docs and src.

    Having trouble?

  3. Build the image

    Docker installs the dependencies and builds the API inside the image. The first build takes a few minutes and needs an internet connection.

    Terminalin dashboard-2-back-end
    docker build -t dashboard-api .

    Expected result: The build ends with a line naming the image dashboard-api.

    Having trouble?

  4. Start it and check that it answers

    Start a container with a volume for the database. The first start creates the database with the sample data and the sample sign-ins. Leave the terminal open while you use it. If port 8000 is taken, change the number on the left of -p, for example -p 8040:8000, and the API answers on http://localhost:8040/api instead.

    Terminalin dashboard-2-back-end
    docker run -p 8000:8000 -v dashboard-data:/data dashboard-api

    Expected result: localhost:8000/api/healthLocal answers with "status":"ok" and "database":"up".

    Having trouble?

Every route is under http://localhost:8000/api. The database lives in the dashboard-data volume, so stopping and starting the container keeps it. Without a JWT_SECRET of your own, the container generates one and keeps it in the volume.

Pass a setting with -e on docker run, for example -e TRUST_PROXY=1. The image allows browser calls from http://localhost:3030. For a dashboard on another address, add -e CORS_ORIGIN= and -e FRONTEND_URL= with that address. Do not pass --env-file .env with a copy of .env.example: it sets NODE_ENV=development over the image's production.

Sign-in accounts

AccountEmailPassword
Super Admin: every page and every actionadmin@example.comAdmin@123
Viewer: sees every list, cannot create, edit or delete records or open the AI assistant; can change their own password and quick tasksjohn.smith@admin.comadmin123

The seed adds ten more admins with the Viewer role, all with the password admin123. Sign in with POST /api/auth/login, which returns the token to send on every other call.

Before going live. Every seed (yarn seed, yarn seed:prod and the first Docker start) creates these sample admins with these passwords. Change their passwords or delete them, and set your own JWT_SECRET, before the API is reachable by anyone else.

Stop and start again

Press Ctrl+C in the terminal to stop the API. If you closed that terminal, find the container and stop it:

Terminal
docker ps
docker stop <container-id>

Use the ID that docker ps lists for dashboard-api. To start again, run the same docker run command: the volume keeps your data. After you change a file, build the image again: it holds a copy of the code from when it was built.

Keep your data

Deleting the dashboard-data volume deletes the database. The next start seeds a fresh copy of the sample data, and everything you created is gone.

Start over with fresh sample data

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.