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.
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.
Ç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.
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).
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.
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 .
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:
un article incroyable
{# chaque message comme message}
{post.Title}
{moment (). To (post.Published)} par {post.author.username}
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.
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:
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é.
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.
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!
(ks, ra, al, yk, il)