Put it online

Before you deploy

Nothing has to be set to deploy: there is no database, no secret and no required variable.

• Replace the sample figures, cards and transactions with your own data, or with data from your API.
• Leave NEXT_PUBLIC_DEMO_MODE off, unless the deployment is a public demo.

• Sample data and your API
• Demo mode

Vercel

1. 01

   Put the folder in a private Git repository

   Push the dashboard-template-1 folder to a private repository on GitHub, GitLab or Bitbucket. Your licence does not allow sharing the source code publicly. The download already has a .gitignore that keeps out node_modules, the build and your .env files.
2. 02

   Import it in Vercel

   In Vercel, add a new project from that repository. It detects Next.js; keep the default build settings.
3. 03

   Add the environment variables

   Under the project's Environment Variables, add ENABLE_EXPERIMENTAL_COREPACK with the value 1 so Vercel installs with the Yarn version that package.json pins. Add NEXT_PUBLIC_DEMO_MODE only if you want demo mode.
4. 04

   Deploy

   Start the deployment, then add your domain in the project's Domains settings.

   Expected result: Your domain with /en/login opens the sign-in page.

After you change a variable, deploy again: the running app keeps the values it was built with.

Any server with Node.js

On a server with Node.js 20.9 or newer, copy the folder, then install, build and start:

corepack enable
yarn install
yarn build
yarn start

The dashboard answers on port 3030. Put a web server such as Nginx or Caddy in front of it for your domain and HTTPS, and keep yarn start running with a process manager or a system service.

A Docker image

The Dockerfile builds a small image that serves the dashboard with Node.js on port 3030, as a user without admin rights. Build it, then run it in the background so it restarts with the server:

docker build -t financial-dashboard .
docker run -d --restart unless-stopped -p 3030:3030 financial-dashboard

Any host that runs a Dockerfile can build it as it is. Put a web server in front of port 3030 for your domain and HTTPS, as for Node.js.

After it is online

• Open your address with /en/login and /ar/login and check both languages.
• Every page tells search engines not to index it, because a signed-in dashboard does not belong in search results. The setting is robots in src/app/[locale]/layout.tsx.