Run the dashboard locally
Get your package running on your computer with Docker, then sign in.
For the Full Stack package
Before you start: install and open Docker Desktop, or Docker Engine on Linux. Nothing else is needed.
View requirementsDownload your template
Open My templates and download the Full Stack ZIP.
Expected result: A file named like
dashboard-2-full-stack-….zipis in your downloads.Unzip and open the folder
Extract the ZIP and open a terminal in the
dashboard-2-full-stackfolder. On Windows, extract it in File Explorer, then open a terminal in the folder.Terminalunzip dashboard-2-full-stack-*.zip cd dashboard-2-full-stackExpected result: The folder lists
Having trouble?back-end,front-end,docker-compose.yml,README.mdandQUICKSTART.md.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.
Terminalindashboard-2-full-stackdocker compose up --buildA port is already in use?
If the start stops with
A port is already in useports are not available ... address already in useorport is already allocated, another program uses 3030 or 8000. Either stop it, or create a file named.envin thedashboard-2-full-stackfolder, besidedocker-compose.yml, with the port you need, such asDASHBOARD_PORT=3040(API_PORTfor the API). Rundocker compose up --buildagain and open the dashboard on its new port.Expected result: Both services keep running and the log stops scrolling. Leave this terminal open.
Having trouble?Open the dashboard and sign in
Open localhost:3030Local. It sends you to the sign-in page. Sign in with
admin@example.comand the passwordAdmin@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/
Sign-in accounts
| Account | Password | |
|---|---|---|
| Super Admin: every page and every action | admin@example.com | Admin@123 |
| Viewer: sees every list, cannot create, edit or delete records or open the AI assistant; can change their own password and quick tasks | john.smith@admin.com | admin123 |
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.
dashboard-2-full-stackdocker compose downStart again with the same command as step 3. Without --build it reuses the images you already built.
dashboard-2-full-stackdocker compose upKeep 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.
Download your template
Open My templates and download the Admin Dashboard ZIP.
Expected result: A file named like
dashboard-2-front-end-….zipis in your downloads.Unzip and open the folder
Terminalunzip dashboard-2-front-end-*.zip cd dashboard-2-front-endExpected result: The folder lists
Having trouble?Dockerfile,package.json,messages,publicandsrc.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.
Terminalindashboard-2-front-enddocker build -t dashboard-2 .Expected result: The build ends with a line naming the image
Having trouble?dashboard-2.Start it and sign in
Start a container, then open localhost:3030Local and sign in with
admin@example.comand the passwordAdmin@123. Leave the terminal open while you use it. If port3030is taken, change the number on the left of-p, for example-p 3040:3030, and open localhost:3040Local instead.Terminalindashboard-2-front-enddocker run -p 3030:3030 dashboard-2Expected result: The overview opens, with a "Sample data" notice at the bottom of the page.
Having trouble?
Sign-in accounts
| Account | Password | |
|---|---|---|
| Super Admin: every page and every action | admin@example.com | Admin@123 |
| Viewer: sees every list, cannot create, edit or delete records or open the AI assistant; can change their own password and quick tasks | john.smith@admin.com | admin123 |
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:
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:
dashboard-2-front-enddocker 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-2The 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.