Fermer

août 5, 2020

Créer un blog statique avec Sapper et Strapi21 minutes de lecture



À propos de l'auteur

Daniel Madalitso Phiri est un développeur, écrivain, constructeur de choses loufoques, DJ, Lorde superfan et Community Builder de Lusaka, Zambie.
En savoir plus sur
Daniel

Cet article vous explique comment créer un blog statique alimenté par Svelte avec Sapper et Strapi, ainsi que comment déployer le site Web sur Netlify. Vous comprendrez comment créer un site Web statique et utiliser la puissance d'un CMS headless, avec un exemple du monde réel.

Dans ce didacticiel, nous allons créer un blog minimal généré statiquement avec Sapper, un Svelte- basé sur un framework JavaScript progressif, pour notre front-end, puis utilisez Strapi, un système de gestion de contenu (CMS) sans tête open source, pour le back-end de notre application. Ce tutoriel s'adresse aux développeurs front-end intermédiaires, en particulier à ceux qui souhaitent la polyvalence d'un CMS headless, comme Strapi, ainsi que la structure minimale d'un framework JavaScript, comme Sapper. N'hésitez pas à essayer la démo ou à consulter le code source sur GitHub.

Pour parcourir l'article smoothy, vous aurez besoin de la version LTS de Node. js et soit Yarn ou npm préalablement installé sur votre appareil. Il est également intéressant de mentionner que vous devrez avoir une compréhension de base des requêtes JavaScript et GraphQL.

Avant de commencer, voyons quelques définitions. Un générateur de site statique est un outil qui génère des sites Web statiques, et un site Web statique peut être défini comme un site Web provenant de fichiers HTML purement statiques. Pour un aperçu de vos options pour les générateurs de sites statiques aujourd'hui, consultez « Top 10 des générateurs de sites statiques en 2020 ».

Un CMS headless d'autre part, est un CMS accessible via une API. Contrairement aux CMS traditionnels du passé, un CMS headless est indépendant du front-end et ne vous lie pas à un seul langage de programmation ou plate-forme. L'article de Strapi « Pourquoi les développeurs frontend devraient utiliser un CMS sans tête » est une bonne ressource pour comprendre l'utilité d'un CMS sans tête.

Les générateurs de sites statiques, comme les CMS sans tête, gagnent rapidement en popularité dans le communauté de développement Web front-end. Les deux technologies apportent avec elles une barrière à l'entrée beaucoup plus faible, une flexibilité et une expérience de développeur généralement meilleure. Nous verrons tout cela et bien plus au fur et à mesure que nous construirons notre blog.

Vous vous demandez peut-être: « Pourquoi devrais-je utiliser ceci au lieu des alternatives? Sapper est basé sur Svelte, qui est connu pour sa vitesse et sa taille de paquet relativement petite. Dans un monde où la performance joue un rôle majeur dans la détermination d'une expérience utilisateur efficace, nous voulons optimiser pour cela. Les développeurs d'aujourd'hui n'ont que l'embarras du choix en ce qui concerne les frameworks frontaux – si nous voulons optimiser la vitesse, les performances et l'expérience des développeurs (comme je le fais dans ce projet), alors Sapper est un choix solide!

Alors, allons-y! Commencez à créer notre blog minimal, en commençant par notre interface Sapper.

Sapper Front End

Notre front-end est construit avec Sapper, un framework pour créer des applications Web extrêmement hautes performances utilisant Svelte. Sapper, qui est l'abréviation de «Svelte app maker», permet aux développeurs d'exporter des pages en tant que site Web statique, ce que nous allons faire aujourd'hui. Svelte a une manière très avisée d'échafauder les projets, en utilisant Degit .

«Degit fait des copies des dépôts Git et récupère le dernier commit dans le dépôt. C'est une approche plus efficace que d'utiliser git clone car nous ne téléchargeons pas l'intégralité de l'historique de Git. ”

Tout d'abord, installez Degit en exécutant npm install -g degit dans votre interface de ligne de commande (CLI).

Ensuite, exécutez les commandes suivantes dans la CLI pour configurer notre projet.

 npx degit "sveltejs / sapper-template # rollup" frontend
# ou: npx degit "sveltejs / sapper-template # webpack" frontend
frontend cd
npm installer
npm exécuter dev

Note : Nous avons la possibilité d'utiliser Rollup ou Webpack pour regrouper notre projet. Pour ce tutoriel, nous allons utiliser Rollup .

Ces commandes échafaudent un nouveau projet dans le répertoire frontend installent ses dépendances et démarrent un serveur sur ] localhost .

Si vous êtes nouveau dans Sapper, la structure du répertoire aura besoin d'explications.

Structure de l'application Sapper's

Si vous regardez dans le répertoire du projet, vous verrez ceci: [19659022] ├ package.json
├ src
│ ├ itinéraires
│ │ ├ # vos itinéraires ici
│ │ ├ _error.svelte
│ │ └ index.svelte
│ ├ client.js
│ ├ server.js
│ ├ service-worker.js
│ └ template.html
├ statique
│ ├ # vos fichiers ici
└ rollup.config.js / webpack.config.js

Remarque : Lorsque vous exécutez Sapper pour la première fois, il crée un répertoire supplémentaire __ sapper __ contenant les fichiers générés. Vous remarquerez également quelques fichiers supplémentaires et un répertoire cyprès – nous n'avons pas à nous en préoccuper pour cet article.

Vous verrez quelques fichiers et dossiers. En plus de ceux déjà mentionnés ci-dessus, voici quelques-uns auxquels vous pouvez vous attendre:

  • package.json
    Ce fichier contient les dépendances de votre application et définit un certain nombre de scripts.
  • src
    Il contient les trois entrées points pour votre application: src / client.js src / server.js et (facultativement) src / service-worker.js avec un fichier src / template.html .
  • src / routes
    C'est l'essentiel de l'application (c'est-à-dire les pages et les routes du serveur).
  • static
    C'est un endroit pour mettre tous les fichiers que votre application utilise: polices, images, etc. Par exemple, static / favicon.png sera servi comme /favicon.png .
  • rollup.config.js
    Nous utilisons Rollup pour regrouper notre application. Vous n'aurez probablement pas besoin de modifier sa configuration, mais si vous le souhaitez, c'est ici que vous le feriez.

La structure des répertoires est assez minime pour les fonctionnalités fournies par le projet. Maintenant que nous avons une idée de ce à quoi ressemble notre répertoire de projet et de ce que fait chaque fichier et dossier, nous pouvons exécuter notre application avec npm run dev .

Vous devriez voir la page d'accueil de Svelte-eque starter de notre blog.

 Une capture d'écran de la page Web de Sapper Starter.
Votre page d'accueil de Sapper. ( Grand aperçu )

Ça a l'air vraiment bien! Maintenant que notre frontal est configuré et fonctionne, nous pouvons passer au back-end de l'application, où nous allons configurer Strapi.

Strapi Back End

Strapi est à la fois sans tête et auto-hébergé, ce qui signifie nous contrôlons notre contenu et son lieu d'hébergement – pas de serveur, de langue ou de fournisseur à craindre, et nous pouvons garder notre contenu privé. Strapi est construit avec JavaScript et dispose d'un éditeur de contenu construit avec React. Nous utiliserons cet éditeur de contenu pour créer des modèles de contenu et stocker du contenu réel que nous pourrons interroger plus tard. Mais avant de pouvoir faire tout cela, nous devons le configurer en suivant les instructions ci-dessous.

1. Installez Strapi et créez un nouveau projet

  • Ouvrez votre CLI.
  • Exécutez yarn create strapi-app backend --quickstart . Cela créera un nouveau dossier nommé backend et construira l'interface utilisateur d'administration React.

2. Créer un administrateur

 Une capture d'écran de l'écran d'enregistrement Strapi.
Créez un compte administrateur. ( Grand aperçu )

3. Créer un type de collection de blog

  • Accédez à "Content-Types Builder", sous "Plugins" dans le menu de gauche.
  • Cliquez sur le lien "+ Créer un nouveau type de collection".
  • Nommez-le "blog".
  • Cliquez sur «Continuer».
 Une capture d'écran du tableau de bord Strapi - création d'un nouveau type de collection
Créez un nouveau type de collection. ( Grand aperçu )
  • Ajoutez un "Champ de texte" (texte court) et nommez-le "Titre".
  • Cliquez sur le bouton "+ Ajouter un autre champ".
 Une capture d'écran de le tableau de bord Strapi - création d'un nouveau champ de texte
Créez un nouveau champ de texte. ( Grand aperçu )
  • Ajoutez un "Champ de texte" (texte long) et nommez-le "Description".
  • Cliquez sur le bouton "+ Ajouter un autre champ".
 Une capture d'écran de le tableau de bord Strapi - création d'un nouveau champ de texte
Créez un nouveau champ de texte. ( Grand aperçu )
  • Ajoutez un «champ Date» du type «date» et nommez-le «Publié».
  • Cliquez sur le bouton «+ Ajouter un autre champ».
 A capture d'écran du tableau de bord Strapi - création d'un nouveau champ de date
Créez un nouveau champ de date. ( Grand aperçu )
  • Ajoutez un "champ Rich Text" et nommez-le "Body".
  • Cliquez sur le bouton "+ Add another field".
 Une capture d'écran du tableau de bord Strapi - création d'un nouveau champ de texte enrichi
Créez un nouveau champ de texte enrichi. ( Grand aperçu )
  • Ajoutez un autre "Champ de texte" (texte court) et nommez-le "Slug".
  • Cliquez sur le bouton "+ Ajouter un autre champ".
 Une capture d'écran de le tableau de bord Strapi - ajout d'un nouveau champ de texte
Créez un nouveau champ de texte. ( Grand aperçu )
  • Ajoutez un "Champ de relation".
  • Sur le côté droit de la relation, cliquez sur la flèche et sélectionnez "Utilisateur".
  • Sur le côté gauche de la relation, changez le nom du champ en «auteur».
 Une capture d'écran du tableau de bord Strapi - création d'une nouvelle relation
Créez un nouveau champ Relation. ( Grand aperçu )
  • Cliquez sur le bouton «Terminer».
  • Cliquez sur le bouton «Enregistrer» et attendez que Strapi redémarre.

Une fois terminé, votre type de collection devrait ressembler à ceci:

 Une capture d'écran du type de collection Blog montrant tous ses champs
Vue d'ensemble de votre type de collection Blog. ( Grand aperçu )

4. Ajouter un nouvel utilisateur au type de collection «Utilisateurs»

  • Accédez à «Utilisateurs» sous «Types de collection» dans le menu de gauche.
  • Cliquez sur «Ajouter un nouvel utilisateur».
  • Entrez votre «e-mail», "Nom d'utilisateur" et "Mot de passe", puis basculez le bouton "Confirmé".
  • Cliquez sur "Enregistrer".
 Une capture d'écran du type de collection Utilisateur avec le bouton "Ajouter un nouvel utilisateur" en surbrillance
Ajouter un utilisateur contenu. ( Grand aperçu )

Nous avons maintenant un nouvel utilisateur auquel nous pouvons attribuer des articles lorsque nous ajoutons des articles à notre type de collection «Blog».

5. Ajouter du contenu au type de collection "Blogs"

  • Accédez à "Blogs" sous "Types de collection" dans le menu de gauche.
  • Cliquez sur "Ajouter un nouveau blog".
  • Remplissez les informations dans les champs spécifiés ( vous avez la possibilité de sélectionner l'utilisateur que vous venez de créer en tant qu'auteur).
  • Cliquez sur "Enregistrer".
 Une capture d'écran du type de collection Blog avec le bouton "Ajouter un nouveau blog" en surbrillance
Ajouter un blog contenu. ( Grand aperçu )

6. Définir les rôles et les autorisations

  • Accédez à "Rôles et autorisations" sous "Plugins" dans le menu de gauche.
  • Cliquez sur le rôle "Public".
  • Faites défiler vers le bas sous "Autorisations" et recherchez "Blogs" .
  • Cochez les cases à côté de «find» et «findone».
  • Cliquez sur «Save».
 Une capture d'écran de la page Strapi Permissions avec les actions find and findone en surbrillance
Définissez les autorisations pour votre public rôle. ( Grand aperçu )

7. Envoyez des requêtes à l'API des types de collection

Accédez à https: // localhost: 1337 / blog pour interroger vos données.

Vous devriez récupérer des données JSON contenant le contenu que nous venons d'ajouter. Pour ce tutoriel, cependant, nous utiliserons l'API GraphQL de Strapi.

Pour l'activer:

  • Ouvrez votre CLI.
  • Exécutez cd backend pour accéder à ./ backend .
  • Exécutez yarn strapi install graphql pour installer le plugin GraphQL.

Vous pouvez également faire ceci:

  • Dans l'interface utilisateur d'administration, accédez à «Marketplace» sous «General» dans le menu de gauche.
  • Cliquez sur «Télécharger» sur la carte GraphQL.
  • Attendez que Strapi redémarre.
 Une capture d'écran de Strapi Marketplace avec le bouton de téléchargement du plugin GraphQL en surbrillance
Télécharger le plugin GraphQL. ( Grand aperçu )

Lorsque le plugin GraphQL est installé et que Strapi est de nouveau opérationnel, nous pouvons tester des requêtes dans le Terrain de jeu GraphQL .

C'est tout pour notre configuration back-end. Il ne nous reste plus qu'à utiliser l'API GraphQL et à restituer tout ce beau contenu.

Assemblage des deux extrémités

Nous venons d'interroger notre back-end Strapi et de récupérer des données. Tout ce que nous avons à faire maintenant est de configurer notre frontal pour rendre le contenu que nous obtenons de Strapi via l'API GraphQL. Comme nous utilisons le Strapi GraphQL, nous devrons installer le client Svelte Apollo et quelques autres packages pour nous assurer que tout fonctionne correctement.

Installation de packages

  • Ouvrez la CLI et accédez à ./ frontend .
  • Run npm i --save apollo-boost graphql svelte-apollo moment .

Moment.js nous aide à analyser, valider, manipuler et afficher les dates et fois en JavaScript.

Les packages sont maintenant installés, ce qui signifie que nous pouvons faire des requêtes GraphQL dans notre application Svelte. Le blog que nous construisons comprendra trois pages: "accueil", "à propos" et "articles". Tous nos articles de blog de Strapi seront affichés sur la page «articles», permettant aux utilisateurs d'accéder à chaque article. Si nous réfléchissons à ce à quoi cela ressemblerait, l'itinéraire de notre page «articles» sera / articles et l'itinéraire de chaque article sera / articles /: slug où slug est ce que nous entrez dans le champ "Slug" lors de l'ajout du contenu dans l'interface utilisateur d'administration.

Ceci est important à comprendre car nous adapterons notre application Svelte pour qu'elle fonctionne de la même manière.

Dans ./ frontend / src / routes vous remarquerez un dossier nommé «blog». Nous n'avons pas besoin de ce dossier dans ce didacticiel, vous pouvez donc le supprimer. Cela endommagera l'application, mais ne vous inquiétez pas: elle sera de nouveau opérationnelle une fois que nous aurons créé notre page «articles», ce que nous allons faire maintenant. /routes[19459033[/19459033)[19659044[/19659044etcollez-ylecodesuivant

  • Lors du collage, assurez-vous de remplacer par votre point de terminaison Strapi GraphQL réel. Pour votre version locale, ce sera généralement https: // localhost: 1337 / graphql .
  •   
             articles 
    
    
    

    messages récents

      {# chaque message comme message}
    • {post.Title}
    • Il y a {moment (). To (post.Published, "DD-MM-YYYY")} par {post.author.username}

      {/chaque}

    Ce fichier représente notre route / articles . Dans le code ci-dessus, nous avons importé quelques packages, puis utilisé Apollo Client pour effectuer une requête: blogQuery . Nous avons ensuite stocké notre réponse à la requête dans une variable, results et utilisé la fonction preload () pour traiter les données nécessaires sur notre page. La fonction renvoie ensuite posts une variable avec le résultat de la requête analysée.

    Nous avons utilisé le bloc #each de Svelte pour parcourir les données de Strapi, affichant le titre et la date de publication et auteur. Lorsque vous cliquez sur notre balise vous accédez à une page définie par le slug que nous avons saisi pour notre message dans l'interface utilisateur d'administration de Strapi. Cela signifie que lorsque le lien est cliqué, nous ouvrons une page pour un article particulier, et le slug est utilisé pour identifier cet article.

    Pour notre route / articles /: slug créez un fichier nommé [slug] .svelte dans ./ src / routes / articles et collez le code suivant:

    Note : Dans Svelte, les paramètres dynamiques sont encodés en utilisant [brackets]. Notre fichier [slug] .svelte nous permet d'ajouter dynamiquement des itinéraires pour différents articles.

    Tout comme dans routes / articles / index.svelte nous avons importé ici quelques paquets , puis a utilisé Apollo Client pour effectuer une requête: blogQuery . Cette requête est différente, car nous filtrons nos données pour nous assurer qu'elles renvoient un article de blog spécifique. L'argument params de notre fonction preload () nous permet d'accéder à params.slug qui est le slug de la page actuelle (c'est-à-dire le slug de ce article de blog particulier). Nous avons utilisé params.slug comme variable dans notre requête GraphQL afin que seules les données avec un slug correspondant au slug de notre page Web soient renvoyées. Nous avons ensuite stocké notre réponse à la requête dans une variable ( results ), et notre fonction preload () renvoie posts une variable avec le résultat de la requête analysée.

    ] Enfin, nous avons affiché le titre, la date de publication et le corps de notre article (enveloppés dans la balise {@ html} de Svelte ).

    Voilà. Nous pouvons désormais afficher dynamiquement les pages de tous les articles ajoutés au back-end de Strapi.

    Nous pouvons désormais travailler sur les pages "à propos" et "d'accueil". Dans ./ frontend / src / routes collez ce code dans le fichier about.svelte :

    
             about 
    
    
    

    about this site

    web design minimaliste le contenu se démarque et brille. c'est pourquoi une conception de site Web simple est le premier choix de tant d'artistes, de photographes, et même certains écrivains. ils veulent que leur contenu créatif soit au centre de l'attention, plutôt que des éléments de conception créés par quelqu'un d'autre.

    ce blog minimal est construit avec svelte et strapi images de glen carrie de unsplash

    Pour notre page d’accueil, allons à ./ frontend / src / routes et collez le code suivant dans index.svelte :

    
    
    
             un blog de sapeur minimal 
    
    

    bienvenue sur

    le blog .

     les oiseaux sur une ligne
    où less is more

    nous sommes minimes et cela peut sembler ennuyeux, sauf vous faites vraiment attention.

    Nous avons créé toutes les pages nécessaires pour que notre application fonctionne comme prévu. Si vous exécutez l'application maintenant, vous devriez voir quelque chose comme ceci:

     Une capture d'écran de la page d'accueil du blog minimal
    Votre page d'accueil du blog minimal terminée. ( Grand aperçu )

    Plutôt gentil, oui?

    Localement, tout fonctionne très bien, mais nous voulons déployer notre blog statique sur le Web et partager notre belle création. Faisons cela.

    Déployer sur Netlify

    Nous allons déployer notre application sur Netlify, mais avant de pouvoir le faire, connectez-vous à votre compte Netlify (ou créez un compte, si vous n'en ai pas déjà un). Sapper nous donne la possibilité de déployer une version statique de notre site Web, et c'est exactement ce que nous ferons.

    • Accédez à ./ frontend .
    • Run npm run export pour exporter une version statique de l'application.

    Votre application sera exportée vers ./ frontend / sapper / export .

    Faites glisser votre dossier exporté dans Netlify, et votre site Web sera en ligne dans un instantané.

     Le tableau de bord Netlify
    Faites glisser votre dossier d'exportation vers le tableau de bord Netlify. ( Grand aperçu )

    En option, nous pouvons déployer notre site Web à partir de Git en suivant la documentation de Netlify . Veillez à ajouter npm run export comme commande de construction et __ sapper __ / export comme répertoire de base.

    Nous avons également la possibilité de déployer avec Vercel (formellement ZEIT, comme mentionné dans la documentation de Sapeur ).

    Conclusion

    C'était amusant, non? Nous venons de créer un blog statique avec Sapper et Strapi et l'avons déployé sur Netlify en moins de 15 minutes? Outre l'expérience exceptionnelle des développeurs, Strapi et Sapper sont un plaisir de travailler avec eux. Ils apportent une nouvelle perspective à la création pour le Web, et ce didacticiel en est la preuve. Nous ne sommes certainement pas limités aux sites Web statiques, et j'ai hâte de voir ce que vous construisez tous après cela. Partagez vos projets avec moi sur Twitter . J'ai hâte de les voir. Attention, jusqu'à la prochaine fois!

    Ressources

     Éditorial Smashing (ks, ra, al, yk, il)






    Source link

    0 Partages