iducationducation
IndexArticlesFormationsProfilOutilsBibliothech
N°014 — 2026
Navigation
01Index02Articles03Formations04Profil05Outils06Bibliothech
N°014 — 2026
iducationducation
IndexArticlesFormationsProfilOutilsBibliothech
N°014 — 2026
Navigation
01Index02Articles03Formations04Profil05Outils06Bibliothech
N°014 — 2026
Formations
TypeScript · Avancé

OpenFiler

Construire une plateforme de gestion de fichiers complète — upload, authentification, analytics, sécurité fail2ban et déploiement Docker.

Next.js 15TypeScriptSQLiteBetter AuthTailwind CSS v4
GitHub
01Setup et configuration02Authentification avec Better Auth03Base de données SQLite04Système d'upload de fichiers05Dashboard et interface06Corbeille et liens de partage07Déploiement Docker
Chapitre 1·20 min

Setup et configuration

On part du repo GitHub et on arrive à une app qui tourne en local avec un utilisateur admin prêt à l'emploi.

Cloner et installer

Terminal
git clone https://github.com/williamloree/OpenFiler.git
cd OpenFiler
npm install

Variables d'environnement

Terminal
cp .env.example .env
openssl rand -base64 32

Coller la clé générée dans .env :

.env
BETTER_AUTH_SECRET=votre-clé-générée-ici
BETTER_AUTH_URL=http://localhost:3000
BETTER_AUTH_TRUSTED_ORIGINS=http://localhost:3000
DATABASE_URL=./openfiler.db
NEXT_PUBLIC_APP_URL=http://localhost:3000

Initialiser la base de données

Terminal
npx @better-auth/cli@latest migrate --config lib/auth/server.ts

Cette commande crée toutes les tables nécessaires à Better Auth dans openfiler.db. Les tables métier (fichiers, corbeille, analytics, sécurité) sont créées au premier démarrage via instrumentation.ts.

Démarrer

Terminal
npm run dev

Ouvrir http://localhost:3000. Next.js redirige automatiquement vers /login si aucune session n'est active.

Identifiants par défaut :

  • Email : admin@openfiler.local
  • Mot de passe : admin1234

Structure du projet

OpenFiler/
├── app/
│   ├── api/           ← toutes les routes API (upload, files, auth...)
│   ├── dashboard.tsx  ← application principale (Client Component)
│   ├── login/         ← page de connexion
│   └── share/[token]/ ← accès public aux fichiers partagés
├── components/        ← UI (sidebar, tableau, modals, toasts)
├── lib/
│   ├── auth/          ← config Better Auth (server + client)
│   ├── seed.ts        ← création des tables + user par défaut
│   └── ...            ← upload, corbeille, partage, analytics
├── instrumentation.ts ← hook Next.js, exécuté au démarrage serveur
└── middleware.ts      ← bloque la route /signup

instrumentation.ts est le point d'entrée côté serveur — c'est là que les tables sont créées et que le seed est lancé. On verra ça en détail dans le chapitre sur la base de données.

Suivant
Authentification avec Better Auth

Développeur fullstack passionné. J'apprends en construisant et je documente tout — front, back, outils. Le code s'apprend mieux en public.

Naviguer

IndexTous les articlesFormationsProfilOutilsBibliothech

Ailleurs

GitHub RSS

Newsletter

Les articles, libs et découvertes. Une fois par semaine, pas plus.

© 2026 William LoreeConçu & codé à la main