Installation & Configuration

This page covers how to deploy and configure the admin panel for both production and development environments.

Deployment

The admin panel can be deployed using Docker Compose alongside the Tracker API:

docker-compose up -d

This will start both the API and the admin panel, with the admin panel available at http://localhost:8080

Development

For development, you can use the admin-dev service in Docker Compose:

docker-compose up admin-dev

This will start the admin panel in development mode, with hot reloading enabled. The admin panel will be available at http://localhost:3000

Alternatively, you can run the admin panel locally:

cd tracker-admin
npm install
npm start

Configuration

The admin panel is configured to connect to the Tracker API at /api/v1. This can be changed in the src/dataProvider.js file.

In development, the API URL can be configured using the REACT_APP_API_URL environment variable.

Environment Variables

The admin panel supports the following environment variables:

Variable	Description	Default
REACT_APP_API_URL	The URL of the Tracker API	/api/v1
REACT_APP_TITLE	The title of the admin panel	Tracker Admin
REACT_APP_DESCRIPTION	The description of the admin panel	Admin panel for the Tracker API

These environment variables can be set in a .env file in the root of the admin panel project, or passed to the Docker container when deploying.

Proxy Configuration

In development, the admin panel uses a proxy to avoid CORS issues when connecting to the API. This is configured in the vite.config.ts file:

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8100",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  // ...
});

This configuration proxies requests to /api to the API server running at http://localhost:8100. This allows the admin panel to make requests to the API without encountering CORS issues.

In production, the admin panel uses nginx to proxy requests to the API, which also avoids CORS issues. The nginx configuration is defined in the nginx.conf file:

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://api:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

This configuration proxies requests to /api/ to the API server running at http://api:8000/. This allows the admin panel to make requests to the API without encountering CORS issues.