Deployer NestJS sur Supabase

Pourquoi Deployer NestJS sur Supabase ?

Deployer un application NestJS sur Supabase peut offrir une solution complète pour les développeurs cherchant à construire et à héberger des applications modernes rapidement et efficacement. Supabase est une plateforme open source qui combine une base de données relationnelle PostgreSQL avec une API RESTful et GraphQL, tout en fournissant un environnement de développement local facile à utiliser.

Un cas d'usage concret serait de créer une application de gestion de tâches pour une équipe. Avec NestJS, nous pouvons développer une API robuste et scalable, tandis que Supabase nous permettra de gérer la base de données et l'authentification des utilisateurs de manière efficace.

Prerequis

• Connaissance avancée de JavaScript/TypeScript
• Familiarité avec NestJS et ses principes fondamentaux
• Installation de Node.js (v14 ou plus)
• Installation de Yarn ou npm
• Compte Supabase créé

Concepts fondamentaux

1. Supabase et le stockage local

Supabase est une plateforme open source qui permet de développer des applications backend rapidement en combinant une base de données PostgreSQL avec un serveur API RESTful et GraphQL.

// Importation du SDK Supabase
import { createClient } from '@supabase/supabase-js';

// Connexion à la base de données
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

2. Migrations avec Supabase

Les migrations sont des scripts qui définissent comment changer la structure de la base de données au fil du temps.

## Création d'une migration pour ajouter une table 'tasks'
npx supabase db migrate new add-tasks-table

3. Services et contrôleurs en NestJS

Les services et les contrôleurs sont les composants principaux d'un application NestJS. Les services gèrent la logique métier, tandis que les contrôleurs traitent les requêtes HTTP.

// service/tasks.service.ts
import { Injectable } from '@nestjs/common';
import { SupabaseService } from '../supabase/supabase.service';

@Injectable()
export class TasksService {
  constructor(private readonly supabaseService: SupabaseService) {}

  async getTasks() {
    const { data, error } = await this.supabaseService.from('tasks').select('*');
    if (error) throw new Error(error.message);
    return data;
  }
}
typescript
// controller/tasks.controller.ts
import { Controller, Get } from '@nestjs/common';
import { TasksService } from '../tasks.service';

@Controller('tasks')
export class TasksController {
  constructor(private readonly tasksService: TasksService) {}

  @Get()
  async getTasks() {
    return this.tasksService.getTasks();
  }
}

Mise en pratique : projet fil rouge

Dans ce tutoriel, nous allons créer un simple gestionnaire de tâches à l'aide de NestJS et Supabase.

Étape 1 : Initialisation du projet

## Création d'un nouveau projet NestJS
nest new task-manager-nestjs-supabase
cd task-manager-nestjs-supabase

Étape 2 : Installation des dépendances nécessaires

## Installation de Supabase client
yarn add @supabase/supabase-js

Étape 3 : Configuration de Supabase dans le projet

Créer un fichier supabase.service.ts pour gérer la connexion à Supabase.

// service/supabase.service.ts
import { Injectable } from '@nestjs/common';
import { createClient, SupabaseClient } from '@supabase/supabase-js';

@Injectable()
export class SupabaseService {
  private readonly supabase: SupabaseClient;

  constructor() {
    this.supabase = createClient(
      'https://your-project.supabase.co',
      'your-anon-key',
    );
  }

  from(table: string) {
    return this.supabase.from(table);
  }
}

Étape 4 : Création du service des tâches

// service/tasks.service.ts
import { Injectable } from '@nestjs/common';
import { SupabaseService } from '../supabase/supabase.service';

@Injectable()
export class TasksService {
  constructor(private readonly supabaseService: SupabaseService) {}

  async getTasks() {
    const { data, error } = await this.supabaseService.from('tasks').select('*');
    if (error) throw new Error(error.message);
    return data;
  }
}

Étape 5 : Création du contrôleur des tâches

// controller/tasks.controller.ts
import { Controller, Get } from '@nestjs/common';
import { TasksService } from '../tasks.service';

@Controller('tasks')
export class TasksController {
  constructor(private readonly tasksService: TasksService) {}

  @Get()
  async getTasks() {
    return this.tasksService.getTasks();
  }
}

Étape 6 : Ajout de routes pour les tâches

// app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { TasksModule } from './tasks/tasks.module';

@Module({
  imports: [TasksModule],
  controllers: [AppController],
})
export class AppModule {}

Étape 7 : Création du module des tâches

// tasks/tasks.module.ts
import { Module } from '@nestjs/common';
import { TasksService } from './tasks.service';
import { TasksController } from './tasks.controller';

@Module({
  providers: [TasksService],
  controllers: [TasksController],
})
export class TasksModule {}

Étape 8 : Lancement de l'application

## Lancement de l'application NestJS
npm run start:dev

Erreurs frequentes et debugging

1. Problème avec la connexion à Supabase

Message d'erreur :

Error: Invalid URL

Code incorrect :

const supabase = createClient('invalid-url', 'your-anon-key');

Code correct :

const supabase = createClient('https://your-project.supabase.co', 'your-anon-key');

2. Problème avec les migrations

Message d'erreur :

Error: Migration file already exists

Code incorrect :

npx supabase db migrate new add-tasks-table

Code correct :

npx supabase db migrate new add-tasks-table-2

3. Problème avec les requêtes à Supabase

Message d'erreur :

Error: Not Found

Code incorrect :

const { data, error } = await this.supabaseService.from('non-existing-table').select('*');

Code correct :

const { data, error } = await this.supabaseService.from('tasks').select('*');

Pour aller plus loin

1. Intégration avec l'authentification Supabase : Explorer comment intégrer les fonctionnalités d'authentification de Supabase pour ajouter une couche de sécurité à votre application.

   Documentation officielle

2. Utilisation de GraphQL avec NestJS et Supabase : Étudier comment utiliser les fonctionnalités GraphQL de Supabase pour créer des requêtes plus complexes et dynamiques.

   Documentation officielle

3. Déploiement sur Vercel avec Supabase : Explorer comment déployer votre application NestJS sur Vercel en utilisant le service de déploiement continu offert par Supabase.

   Documentation officielle

Défi pratique

Créez un simple API de blog avec NestJS et Supabase, qui permet d'ajouter, lire, mettre à jour et supprimer des articles. Assurez-vous de suivre les bonnes pratiques en matière de sécurité et de gestion de la base de données.