Un guide étape par étape pour créer votre première application Sitecore JSS / Blogs / Perficient

Se lancer dans la création de ma première application Sitecore JSS a été un voyage rempli d’exploration, d’apprentissage et de quelques défis en cours de route. Dans cet article de blog, je vais vous guider à travers le processus étape par étape de configuration du backend Sitecore JSS et de configuration du front-end à l’aide de Next.js. Rejoignez-moi pour partager mes expériences, mes idées et les solutions que j’ai découvertes au cours de cette aventure de développement passionnante.

Étape 1 : configuration du backend Sitecore

1.1 Installation de Sitecore 10.3

Mon parcours a commencé par l’installation d’une instance Sitecore, et comme je n’avais pas d’instance Sitecore 10.x sur ma machine, j’ai opté pour Sitecore 10.3. Pour me guider dans ce processus, j’ai fait référence à un article cela s’est avéré incroyablement utile. L’installation, bien que cruciale, a été simplifiée grâce aux instructions détaillées fournies dans l’article. Lors de l’installation, j’ai rencontré une erreur avec le message ci-dessous. Après quelques recherches, j’ai trouvé la solution et je l’ai documentée dans mon article de blog précédent.

[IdentityServer_StopWebsite]:[Stop] <InstanceName>identityserver.dev.local
The property 'Value' cannot be found on this object. Verify that the property exists.

1.2 Installation du service sans tête

L’étape suivante impliquait le téléchargement et l’installation du service Headless. Ce package essentiel se trouve dans le Téléchargements Sitecore section. J’ai opté pour le « Service sans tête Sitecore pour Sitecore XP» et suivi en douceur les assistants d’installation de Sitecore. Le processus s’est déroulé sans heurts, grâce aux étapes d’installation bien structurées. Cela a jeté les bases de la création de mon application JSS.

1.3 Création d’un site SXA sans tête

La prochaine étape cruciale de notre parcours consiste à créer un site SXA sans tête. Pour lancer ce processus, accédez au menu d’insertion et sélectionnez « Tenant sans tête ». En cliquant sur cette option, vous ouvrirez une fenêtre intitulée «Créer un nouveau locataire sans tête » – reportez-vous à la capture d’écran ci-jointe pour un guide visuel.

Maintenant que nous avons créé avec succès un locataire sans tête, la tâche suivante consiste à établir un site sans tête. Faites un clic droit sur le locataire sans tête récemment créé, survolez le menu d’insertion et vous trouverez l’option intitulée « Site sans tête » – reportez-vous à la capture d’écran ci-dessous pour un guidage visuel. Cliquer sur cette option ouvre une boîte de dialogue intitulée «Créer un nouveau site sans tête», présentant trois onglets : Général, Modules et Paramètres du site.

Dans l’onglet Général, configurez les détails essentiels tels que le nom de votre site Headless, le nom d’hôte, le dossier virtuel et la version linguistique. Pour une compréhension plus complète, veuillez vous référer à la capture d’écran fournie.

Accédez à l’onglet Modules, où vous devez sélectionner les modules requis pour créer le site Web complet. Comme le montre la capture d’écran, j’ai choisi de sélectionner tous les modules disponibles dans la liste pour garantir une base solide pour mon application JSS.

Le troisième onglet, Paramètres du site, implique la configuration de paramètres tels que le point de terminaison GraphQL et le secret de déploiement. Si, comme moi, vous n’étiez pas familier avec ces termes au départ, rassurez-vous : vous pouvez vous référer à la capture d’écran ci-dessous pour observer ma configuration, où j’ai conservé les paramètres par défaut pour le moment.

Une fois satisfait de vos configurations dans les trois onglets, cliquez sur le bouton « OK ». Le système prendra un certain temps pour traiter et configurer tous les paramètres spécifiés dans l’arborescence Sitecore existante. Pour une représentation visuelle, vous pouvez vous référer à la capture d’écran ci-dessous pour observer l’arborescence Sitecore après la création réussie de votre site Headless

1.4 Configuration de la poignée de main

L’étape suivante est cruciale car elle implique la configuration de la poignée de main entre votre site Sitecore et le front-end. Pour établir cette connexion, il faut créer une clé API dans le chemin suivant : « /sitecore/system/Settings/Services/API Keys. »

Lors de la création de la clé API, il est impératif de définir « * » pour les deux Origine CORS et Contrôleur autorisé des champs. Vous pouvez trouver une représentation visuelle de cette configuration dans la capture d’écran ci-jointe. De plus, assurez-vous de copier l’ID d’élément de la clé API nouvellement créée, car ce sera un composant nécessaire lors de la configuration du frontend.

En naviguant vers « /sitecore/system/Paramètres/Services/Clés API » et en mettant en œuvre ces configurations, vous posez les bases d’une communication transparente entre votre instance Sitecore et le front-end. Cette poignée de main est une étape cruciale pour garantir l’intégration réussie des deux composants dans votre parcours de développement d’application Sitecore JSS.

Étape 2 : configuration du frontend

2.1 Installation de Node.js et de Sitecore CLI

La phase suivante consiste à mettre en place le front-end. Familiarisez-vous avec la terminologie sans tête ; dans ce contexte, le front-end fonctionne indépendamment du back-end, ce qui signifie une architecture faiblement couplée. La communication entre le front-end et le back-end s’effectue via des API. Maintenant que nous avons configuré avec succès le backend de Sitecore, il est temps de se lancer dans la configuration du frontend.

Pour lancer la configuration du frontend, assurez-vous que la version LTS de Node.js est installée. Si vous ne l’avez pas installé, vous pouvez vous référer à ceci lien pour télécharger la version LTS de Node.js. Une fois Node.js installé, l’étape suivante consiste à configurer la CLI Sitecore. Exécutez la commande ci-dessous dans votre terminal. Cette commande installera les outils nécessaires à la gestion de votre application Sitecore JSS.

 "npm install -g @sitecore-jss/sitecore-jss-cli"

2.2 Configuration de Next.js

J’ai choisi d’utiliser Next.js comme framework frontend. Pour configurer Next.js, j’ai créé un dossier dédié dans lequel je peux organiser tout le code et les fichiers de configuration nécessaires. En accédant à ce dossier désigné via l’invite de commande, j’ai exécuté la commande suivante pour initialiser la configuration :

"npx create-sitecore-jss --templates nextjs,nextjs-sxa --appName food-blog --hostName <your-sitecore-instance-name>.dev.local --fetchWith GraphQL"

Après une installation réussie, jetez un œil au dossier que vous avez créé. Là, vous rencontrerez la structure du code frontal. Veuillez vous référer à la capture d’écran ci-jointe pour une représentation visuelle du code organisé dans le dossier. Cette structure constitue la base de votre interface Next.js, fournissant un aperçu de l’organisation et de la disposition de votre environnement nouvellement configuré.

Veuillez vous référer à la capture d’écran ci-jointe pour une représentation visuelle. Si vous recevez une réponse similaire à celle affichée dans la capture d’écran, cela indique une installation réussie.

2.3 Finalisation de la connexion frontend-backend

Nous avons maintenant atteint l’étape finale, où nous connectons le front-end à l’instance Sitecore. Pour y parvenir, ouvrez le code Next.js généré à l’étape précédente à l’aide de Visual Studio Code. Dans le terminal VS Code, exécutez la commande suivante :

"jss setup"

L’exécution de cette commande lance une série de questions qui nécessitent votre contribution. Pour une meilleure compréhension des réponses utilisées lors de cette configuration, veuillez vous référer à la capture d’écran fournie. Cette étape cruciale établit la configuration nécessaire pour une communication transparente entre votre frontal Next.js et l’instance Sitecore, marquant une étape importante dans le processus de développement.

Une fois la configuration terminée, la tâche suivante consiste à mettre à jour le fichier .env, en particulier pour le champ JSS_EDITING_SECRET avec un GUID aléatoire de 32 caractères. Pour des conseils détaillés sur cette mise à jour, veuillez consulter la capture d’écran fournie ci-dessous. Cette étape est essentielle pour configurer le secret d’édition, garantissant une connexion sécurisée et fonctionnelle entre votre interface Next.js et l’instance Sitecore. Les informations contenues dans la capture d’écran offrent un point de référence clair pour effectuer les mises à jour nécessaires dans l’environnement de votre projet.

Au point culminant de notre parcours de configuration, la dernière étape consiste à déployer toutes les configurations. Pour l’exécuter, utilisez la commande suivante :

"jss deploy config"

L’exécution de cette commande garantit que toutes les configurations, y compris celles établies lors du processus d’installation, sont déployées de manière transparente. Cette étape finalise l’intégration entre votre front-end Next.js et l’instance Sitecore, ouvrant la voie à une application JSS entièrement opérationnelle et interconnectée.

Enfin, pour lancer le serveur frontal et donner vie à votre application JSS, exécutez la commande suivante :

"jss start:connected"

Avec cela, nous concluons les configurations et la configuration essentielles de Sitecore JSS. Ce parcours a compris l’installation de l’instance Sitecore, le déploiement du service Headless et la configuration méticuleuse des composants backend et frontend.

En conclusion de cet article de blog, le parcours de création de ma première application Sitecore JSS a été à la fois instructif et enrichissant. De l’installation initiale de l’instance Sitecore aux subtilités de la configuration du frontend avec Next.js, chaque étape a fourni des informations précieuses et une compréhension plus approfondie du développement d’applications JSS.

Rencontrer et surmonter les défis, associés à l’utilisation de ressources utiles, ont contribué à une expérience d’apprentissage holistique. Le déploiement et la connexion réussis du serveur frontend marquent une étape importante, donnant vie à l’application JSS.

Alors que j’avais initialement prévu de me plonger dans la création de composants dans un blog ultérieur, je suis tombé sur une excellente ressource rédigée par Mahima Patel. Pour une exploration détaillée de la création de composants avec JSS, je vous recommande de vous référer au document perspicace de Mahima lien du blog.

Cette série sert de documentation de mon parcours, partageant des expériences, des défis et des solutions. J’espère que cela s’avérera bénéfique pour ceux qui s’aventurent dans le monde du développement d’applications Sitecore JSS. Le blog se termine ici, mais les connaissances acquises et les leçons apprises façonneront sans aucun doute les efforts futurs dans ce domaine dynamique et en évolution.

Bon codage !