Quickstart

npx create-gitgraph@latest

Le CLI interactif vous guide pas a pas :

  ╔════════════════════════════════════════╗
  ║     create-gitgraph                   ║
  ║   Visualiseur de graphe Git           ║
  ╚════════════════════════════════════════╝

  Projet
  ────────
  › Nom du projet (my-gitgraph)
  › Nom affiché du site (GitGraph)
  › URL de l'application (http://localhost:3000)

  Fournisseurs Git
  ──────────────────
  ? Quels fournisseurs activer ? (espace = toggle, entrée = valider)
  ❯ ◉ GitHub — github.com
    ◉ GitLab.com — gitlab.com
    ◉ GitLab personnalisé — instance auto-hébergée

  URLs de redirection OAuth
  ────────────────────────────
    GitHub              http://localhost:3000/api/auth/github/callback
    GitLab.com          http://localhost:3000/api/auth/gitlab/callback
    GitLab personnalisé http://localhost:3000/api/auth/gitlab-custom/callback

Fonctionnalites

• Graphe canvas — Rendu performant de milliers de commits avec zoom, pan et animations
• Minimap — Vue d'ensemble du graphe avec navigation rapide
• Sidebar — Liste des branches avec filtres, recherche et toggle de visibilite
• Drawer de commit — Details complets (auteur, date, message, parents, liens)
• Theme — Sombre et clair
• Multi-providers — GitHub, GitLab.com et instances GitLab auto-hebergees
• OAuth + Token — Deux modes d'authentification par fournisseur
• Mise a jour — npm run update pour mettre a jour sans perdre sa config

Providers supportes

| Provider | OAuth | Token | Acces public | |---|---|---|---| | GitHub | oui | oui | oui | | GitLab.com | oui | oui | oui | | GitLab auto-heberge | oui | oui | non |

Configuration

Toute la configuration se fait via le fichier .env, genere automatiquement par le CLI.

Variables generales

| Variable | Description | Defaut | |---|---|---| | NEXT_PUBLIC_APP_NAME | Nom affiche dans le header | GitGraph | | NEXT_PUBLIC_APP_URL | URL publique (pour OAuth) | http://localhost:3000 | | NEXT_PUBLIC_PROVIDERS | Providers actives (virgule) | — |

GitHub

| Variable | Description | Requis | |---|---|---| | NEXT_PUBLIC_GITHUB_URL | URL API GitHub | Non | | GITHUB_CLIENT_ID | Client ID OAuth | Pour OAuth | | GITHUB_CLIENT_SECRET | Client Secret OAuth | Pour OAuth | | NEXT_PUBLIC_GITHUB_CLIENT_ID | Client ID (cote client) | Pour OAuth |

Creer une OAuth App : github.com/settings/developers Callback URL : {APP_URL}/api/auth/github/callback

GitLab.com

| Variable | Description | Requis | |---|---|---| | NEXT_PUBLIC_GITLAB_COM_URL | URL GitLab.com | Non | | GITLAB_COM_CLIENT_ID | Application ID | Pour OAuth | | GITLAB_COM_CLIENT_SECRET | Secret | Pour OAuth | | NEXT_PUBLIC_GITLAB_COM_CLIENT_ID | Application ID (cote client) | Pour OAuth |

Creer une application : gitlab.com/-/user_settings/applications Scopes : read_api | Callback URL : {APP_URL}/api/auth/gitlab/callback

GitLab personnalise

| Variable | Description | Requis | |---|---|---| | NEXT_PUBLIC_GITLAB_CUSTOM_URL | URL de l'instance | Oui | | NEXT_PUBLIC_GITLAB_CUSTOM_LABEL | Nom affiche | Non | | GITLAB_CUSTOM_CLIENT_ID | Application ID | Pour OAuth | | GITLAB_CUSTOM_CLIENT_SECRET | Secret | Pour OAuth |

Creer une application : {URL}/-/user_settings/applications Scopes : read_api | Callback URL : {APP_URL}/api/auth/gitlab-custom/callback

Exemples de configuration

GitHub uniquement, sans OAuth :

NEXT_PUBLIC_APP_NAME=MonGraph
NEXT_PUBLIC_PROVIDERS=github
NEXT_PUBLIC_GITHUB_URL=https://api.github.com

GitHub + GitLab.com avec OAuth :

NEXT_PUBLIC_APP_NAME=GitGraph
NEXT_PUBLIC_APP_URL=https://graph.example.com
NEXT_PUBLIC_PROVIDERS=github,gitlab-com

GITHUB_CLIENT_ID=xxxxxxxxxxxx
GITHUB_CLIENT_SECRET=xxxxxxxxxxxx
NEXT_PUBLIC_GITHUB_CLIENT_ID=xxxxxxxxxxxx

GITLAB_COM_CLIENT_ID=xxxxxxxxxxxx
GITLAB_COM_CLIENT_SECRET=xxxxxxxxxxxx
NEXT_PUBLIC_GITLAB_COM_CLIENT_ID=xxxxxxxxxxxx

Les trois providers :

NEXT_PUBLIC_PROVIDERS=github,gitlab-com,gitlab-custom
NEXT_PUBLIC_GITLAB_CUSTOM_URL=https://gitlab.mycompany.com
NEXT_PUBLIC_GITLAB_CUSTOM_LABEL=GitLab Interne

Mise a jour

Les projets crees avec create-gitgraph incluent une commande de mise a jour :

npm run update

Cela :

1. Verifie si une nouvelle version est disponible sur npm
2. Telecharge et applique les changements
3. Preserve vos fichiers : .env, .env.local, .git/, node_modules/
4. Met a jour les dependances si necessaire

Scripts

| Commande | Description | |---|---| | npm run dev | Serveur de developpement | | npm run build | Build de production | | npm run start | Lance le build | | npm run update | Mise a jour depuis npm |

Stack

• Next.js 15 — App Router
• React 19
• TailwindCSS 4
• shadcn/ui
• Lucide Icons
• Canvas 2D natif
• TypeScript 5.9

Deploiement

Vercel

Deployez directement via le dashboard Vercel. Ajoutez les variables d'environnement dans les settings du projet.

Docker

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["npm", "start"]

Auto-heberge

npm run build && npm start

Licence

MIT