Draft

Présentation de Strapi

Strapi est un headless CMS open source, qui vient de lever 31M$ en série B (est donc financièrement solide). C'est donc une solution de gestion de contenu qui permet de :

• générer/maintenir une base de données à travers une interface d'admin simple
• i18n
• bibliothèque de medias
• d'accéder et modifier les données via des appels REST ou GraphQL branchés automatiquement 🎉

Strapi représente un véritable gain de temps et permet de développer une app web ou mobile rapidement sans trop se soucier de la partie back api/graphql. De nombreuses ressource sont disponible en ligne pour s'y mettre(intro de 3min et crash course d'1h) mais une petite gymnastique mentale (et un peu de lecture RTFM 🤪) est nécessaire pour comprendre son fonctionnement et surtout son intégration dans un projet web moderne.

Setup

yarn create strapi-app mon-app-strapi

Déploiement sur Heroku

Il est possible d’utiliser d'utiliser les plans gratuits (hobby) pour la dyno de Heroku ainsi que la BDD  Postgresql Heroku

Pré-requis :

• Github Account
• Heroku Account & heroku CLI
• Git Installed on your machine
• Nodejs v16+ et utilisation de Yarn

TLDR;

1. Créer une dyno (gratuite)
2. la connecter au repo Git sur lequel on déploi Strapi
3. activer le déploiement auto (restreindre ou pas déploiement selon succès de la CI)
4. ajouter l'add-on Postgresql dans les Resources
5. vérifier dans les Settings/Config Vars que la var d'env DATABASE_URL est bien renseigné auto
6. créer env/production/database.js (voir ci-dessous)
7. ajouter les var d'env Strapi

Voir la doc Strapi complète pas à pas pour le déploiement de Strapi sur Heroku

Erreur Heroku 503

En tant que tel (site et BDD hébergés sur heroku hobby), nous allons rencontrer un problème de certificat SSL pour accéder à la BDD.

2022-07-27T09:17:55.376140+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=xxx.herokuapp.com request_id=a32123d-9fa3-4067-af33-effa6fca8ee3 fwd="xxx.xxx.xxx.xxx" dyno= connect= service= status=503 bytes= protocol=https

Cette question nous renseigne sur la modification à apporter à la config pour accepter les certificats autosignés de heroku et le fichier de  config/env/production/database.js ressemble a ça :

const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
    connection: {
        client: 'postgres',
        connection: {
            host: config.host,
            port: config.port,
            database: config.database,
            user: config.user,
            password: config.password,
            ssl: {
                rejectUnauthorized: env.bool('DATABASE_SSL_SELF', false), // For self-signed certificates
            },
        },
        options: {
            ssl: env.bool('DATABASE_SSL', false),
        },
        debug: false,
    },
});

Graphql

L'un des gros avantages de Strapi est qu'il nous mets à disposition une API REST ou GraphQL de façon très simple.

L'interface de GraphiQL est accessible en local et en staging mais pas en production (possible de l'activer via l'option playgroundAlways dans le fichier config/plugins.ts) via http://localhost:1337/graphql mais nécessite une API Key pour autoriser les requêtes.

Strapi dispose de 2 stratégies d'authentification (Users ou API token). Pour pouvoir exécuter des requetes REST ou Graphql, il faut donc générer dans l'UI d'admin de Strapi > Settings > API Tokens et qui doit être injectée via :

• Query Variable : {bearer: "66a8...3b97014"}
• ou HTTP Headers : { "Authorization": "Bearer "66a8...3b97014" }

i18n

query {
  ingredients(locale: "en") {
    data {
      attributes {
        label
        locale
      }
    }
  }
  titreAccueilPizza(locale: "de") {
    data {
      attributes {
        label
      }
    }
  }
}

Plug-ins Strapi

Strapi peut être "augmenté" avec son sytème de Plugins

• Plausible allows you to add an analytics dashboard to the Strapi admin so you can easily track the most relevant data.
• Localazy to manage your multilingual content with ease and translate it seamlessly. A must if your project is at different locations
• Content Versioning A Strapi plugin for managing versions of your content (why NOTUM tech built it)

Upgrades/updates

Strapi distingue les migrations (qui incluent des breaking changes), des updates classiques. Dans le 1er cas, il faut se reporter aux guides de migration, et les jouer séquentiellement. Dans le cas de l'update il suffit simplement mettre à jour et build le projet :

yarn up "@strapi/*"    # mets à jour tous les packages @strapi
yarn build             # build l'admin panel
yarn start

News

Avec l'arrivée de la version v4.3.0 Strapi supporte désormais Typescript (pour les developpements back "Strapi") et donne la possibilité de créer des dossier pour la gestion de médias 📁 Media Library folders

Liens

Séries de cours sur #Youtube avec The Net Ninja