Déploiement sur Vercel

Nous avons publié le paquet @waline/vercel en tant que paquet serveur ; le déploiement sur Vercel est également notre méthode la plus recommandée.

Comment déployer

Vercel

1. Cliquez sur le bouton bleu ci-dessus ; vous serez redirigé vers Vercel pour déployer avec le modèle Waline.

   Note

   Si vous n'êtes pas connecté, nous vous recommandons de vous connecter avec GitHub.

2. Saisissez le nom de votre projet Vercel, puis cliquez sur Create.

   

   Create Project

3. Le dépôt que vous venez de nommer sera créé et initialisé automatiquement par Vercel à partir du modèle d'exemple Waline.

   

   new project

   Au bout d'une minute ou deux, Vercel devrait avoir terminé le déploiement. Cliquez sur le bouton Go to Dashboard pour accéder au tableau de bord de votre application.

   

   dashboard

Créer la base de données

1. Cliquez sur Storage en haut pour accéder à la page des services de stockage, puis choisissez Create Database. Sous Marketplace Database Providers, sélectionnez Neon, puis cliquez sur Continue.

   

   storage

2. Il vous sera demandé de créer un compte Neon. Choisissez Accept and Create. Sélectionnez ensuite la configuration de l'offre de base de données, notamment la région et le quota. Vous pouvez conserver les valeurs par défaut et cliquer sur Continue.

   

   neon

3. Définissez le nom de la base de données. Vous pouvez conserver la valeur par défaut et cliquer sur Continue.

   

   neon

4. La base de données apparaît maintenant sous Storage. Cliquez dessus et choisissez Open in Neon pour accéder à Neon. Dans Neon, sélectionnez SQL Editor à gauche, collez le SQL de waline.pgsql dans l'éditeur, puis cliquez sur Run pour créer les tables.

   

   neon

   

   neon

5. Au bout de quelques instants, un message de réussite devrait s'afficher. Revenez sur Vercel, cliquez sur Deployments, puis sur Redeploy sur le dernier déploiement pour que la nouvelle configuration de base de données prenne effet.

   

   redeploy success

6. Vercel vous redirigera vers Overview et lancera le déploiement. Lorsque STATUS passe à Ready, cliquez sur Visit pour ouvrir le site déployé. Cette URL est l'adresse de votre serveur.

   

   visit

Attribuer un domaine

1. Cliquez sur Settings - Domains pour accéder à la page de configuration des domaines.

2. Saisissez le domaine que vous souhaitez attribuer et cliquez sur le bouton Add.

   

   Add domain

3. Ajoutez un nouvel enregistrement CNAME chez votre fournisseur de noms de domaine.

   Type	Nom	Valeur
   CNAME	example	cname.vercel-dns.com

4. Une fois le domaine effectif, vous pouvez utiliser votre propre domaine pour accéder à Waline. 🎉

   • Système de commentaires : example.your-domain.com
   • Panneau d'administration : example.your-domain.com/ui

   

   success

Importation HTML

Configurez les éléments suivants dans votre page web :

1. Importez les styles Waline depuis https://unpkg.com/@waline/client@v3/dist/waline.css.
2. Créez une balise <script> qui utilise init() depuis https://unpkg.com/@waline/client@v3/dist/waline.js, et passez les options requises el et serverURL.
   • el est l'élément utilisé pour afficher Waline. Il peut s'agir d'une chaîne de sélecteur CSS ou d'un HTMLElement.
   • serverURL est l'adresse de votre serveur obtenue à l'étape précédente.

<head>
  <!-- ... -->
  <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

Administration des commentaires

1. Après le déploiement, visitez <serverURL>/ui/register pour vous inscrire. Le premier utilisateur inscrit devient l'administrateur.
2. Après la connexion, l'administrateur peut gérer les commentaires : les modifier, les marquer ou les supprimer.
3. Les utilisateurs peuvent également s'inscrire via la zone de commentaires. Après la connexion, ils seront redirigés vers leur page de profil.