Skip to main content

​
Vue d’ensemble

Kit’Asso utilise Nhost comme backend-as-a-service, fournissant :
  • PostgreSQL — Base de données relationnelle
  • Hasura — API GraphQL auto-générée + permissions
  • Nhost Auth — Authentification (email/password, JWT)
  • Nhost Storage — Upload et gestion de fichiers
Région : eu-central-1 (Francfort)

​
Création du projet

​
Nouveau projet Nhost

1

Créer le projet

  1. Allez sur app.nhost.io
  2. Cliquez sur “New Project”
  3. Remplissez :
    • Name : Kit’Asso Production
    • Region : Europe (eu-central-1)
    • Plan : Free (ou Pro selon les besoins)
2

Attendre le provisioning

Nhost crée automatiquement :
  • Base de données PostgreSQL
  • Instance Hasura (console GraphQL)
  • Service Auth avec JWT
  • Service Storage pour fichiers
⏱️ Durée : 1-2 minutes
3

Récupérer les credentials

Dans Settings → General :
  • Subdomain : gqvlmqwbsmkhlllmgbyw (exemple)
  • Region : eu-central-1
Ces deux valeurs suffisent pour configurer le frontend :
VITE_NHOST_SUBDOMAIN=gqvlmqwbsmkhlllmgbyw
VITE_NHOST_REGION=eu-central-1

​
Migrations de base de données

​
Via Hasura Console

1

Ouvrir la console Hasura

Dans le dashboard Nhost → Hasura → Open Hasura Console
2

Exécuter les migrations SQL

Dans l’onglet SQL de la console Hasura, exécutez les migrations dans l’ordre chronologique.Les migrations sont dans hasura/migrations/ ou dans les scripts SQL du projet.
3

Vérifier les tables

Dans l’onglet Data, vous devez voir les 10 tables principales :
  • tools, categories, filters, tool_features
  • workflows, workflow_steps
  • tool_packs, pack_tools
  • quizzes, quiz_questions, quiz_answers
  • quiz_recommendations, quiz_responses

​
Via Nhost CLI (alternative)

# Installer Nhost CLI
npm install -g nhost

# Login
nhost login

# Lier au projet
nhost link

# Appliquer les migrations
nhost up

​
Permissions Hasura

Kit’Asso utilise les permissions Hasura (pas RLS PostgreSQL) pour contrôler l’accès aux données.

​
Rôles

  • public — Utilisateurs non authentifiés (visiteurs)
  • admin — Utilisateurs authentifiés (gestionnaires)

​
Configuration dans Hasura Console

Pour chaque table, configurez les permissions dans l’onglet Permissions : Exemple : table tools
RôleSELECTINSERTUPDATEDELETE
public✅ Toutes lignes❌❌❌
admin✅ Toutes lignes✅✅✅
Exemple : table workflows
RôleSELECTINSERTUPDATEDELETE
public✅ status = 'active'❌❌❌
admin✅ Toutes lignes✅✅✅
Pour les tables avec statut (workflows, packs), le rôle public ne voit que les éléments active.

​
Nhost Storage

​
Configuration

Le storage est prêt à l’emploi dès la création du projet. Par défaut, un bucket default est disponible. URL des fichiers : 
https://{subdomain}.storage.{region}.nhost.run/v1/files/{fileId}
Exemple concret : 
https://gqvlmqwbsmkhlllmgbyw.storage.eu-central-1.nhost.run/v1/files/abc123-def456

​
Upload depuis le frontend

import { nhost } from '@/api/client';

const { error, fileMetadata } = await nhost.storage.upload({
  file,           // File object
  bucketId: 'default',
});

if (!error) {
  const url = `https://${subdomain}.storage.${region}.nhost.run/v1/files/${fileMetadata.id}`;
}

​
Authentication

​
Configurer Auth

1

Aller dans Auth Settings

Dashboard Nhost → Auth → Settings
2

Désactiver les inscriptions publiques

Disable Sign Up : ✅ ActivéSeuls les admins créeront des comptes depuis la console Nhost.
3

Configurer les emails (optionnel)

Si besoin de reset password ou magic links, configurez le provider SMTP dans Auth → SMTP Settings.

​
Créer un utilisateur admin

1

Aller dans Users

Dashboard Nhost → Auth → Users → Add User
2

Créer le user

  • Email : admin@lucdidion.fr
  • Password : Mot de passe fort
  • Default Role : admin
Le rôle admin doit correspondre à celui configuré dans les permissions Hasura.
3

Tester la connexion

  1. Allez sur votre app déployée → /admin
  2. Redirigé vers /login
  3. Connectez-vous avec les credentials
  4. Vérifiez l’accès au dashboard admin

​
Performance & Monitoring

​
Dashboard Nhost

Le dashboard Nhost fournit :
  • Database Health — CPU, mémoire, disk usage
  • API Logs — Requêtes GraphQL avec temps de réponse
  • Auth Logs — Tentatives de connexion

​
Optimisations

  • Hasura cache automatiquement les metadata GraphQL
  • Les indexes PostgreSQL sont créés via les migrations
  • Le connection pooling est géré par Nhost (PgBouncer)

​
Backups

​
Backups automatiques

Nhost crée automatiquement des backups :
  • Free plan : Backup quotidien, rétention 7 jours
  • Pro plan : PITR (Point In Time Recovery), rétention 30 jours

​
Backup manuel

Via la console Hasura ou pg_dump avec les credentials de connexion directe (disponibles dans les settings Nhost).

​
Sécurité

​
Credentials

  • Subdomain + Region : Safe pour le frontend (identifiants publics)
  • Admin Secret Hasura : JAMAIS exposé côté client, uniquement pour la console
  • JWT Secret : Géré automatiquement par Nhost Auth

​
Protection GraphQL

Hasura protège automatiquement via :
  • Permissions par rôle (public/admin)
  • Validation des types GraphQL
  • Rate limiting (plan Pro)

​
Variables d’environnement

​
Frontend (Vite)

# .env.local
VITE_NHOST_SUBDOMAIN=gqvlmqwbsmkhlllmgbyw
VITE_NHOST_REGION=eu-central-1
Le code source contient des valeurs par défaut pour le développement. En production, définissez ces variables dans votre hébergeur (Hostinger).

​
Client Nhost (src/api/client.ts)

import { createClient } from '@nhost/nhost-js';

const nhostSubdomain = import.meta.env.VITE_NHOST_SUBDOMAIN || 'gqvlmqwbsmkhlllmgbyw';
const nhostRegion = import.meta.env.VITE_NHOST_REGION || 'eu-central-1';

export const nhost = createClient({
  subdomain: nhostSubdomain,
  region: nhostRegion,
});

​
Checklist production

  • Projet Nhost créé en région EU
  • Tables créées via migrations
  • Permissions Hasura configurées par rôle
  • Permissions testées (public vs admin)
  • Storage fonctionnel (upload/download)
  • User admin créé et testé
  • Variables d’environnement dans Hostinger
  • Test complet de l’app en production

​
Ressources

Nhost Docs

Documentation officielle

Database Schema

Structure des tables

Permissions Hasura

Configuration des permissions

Hostinger Setup

Configuration hébergement frontend