Exercice – Démarrer

Effectué

Dans cet exercice, vous créez une instance Azure Static Web App, y compris une action GitHub qui génère et publie automatiquement votre site web.

Ce module utilise des ressources mises à votre disposition via le bac à sable, qui fournit un accès gratuit et temporaire à un abonnement Azure, ainsi que les ressources dont vous avez besoin pour effectuer les exercices. Veillez à activer le bac à sable en haut de cette page. Lorsque vous parcourez les exercices de ce module, chaque unité dépend du contenu que vous avez créé dans un exercice précédent. Pour cette raison, sélectionnez une infrastructure JavaScript et utilisez-la pour tous les exercices suivants.

Créer un dépôt

Pour commencer, créez un référentiel à l’aide d’un modèle GitHub. Une série de modèles de référentiels sont disponibles, qui contiennent une application de démarrage implémentée dans différents frameworks frontaux.

1. Accédez à la page GitHub créer à partir d'un modèle.

2. Si vous êtes invité à sélectionner propriétaire, choisissez l’un de vos comptes GitHub.

3. Pour le nom du référentiel, entrez my-static-web-app-and-api.

4. Sélectionnez Créer un référentiel.

   Lorsque vous créez le projet à partir d’un modèle, GitHub génère votre dépôt en arrière-plan.

Exécuter votre application localement

Vous disposez maintenant d’un dépôt GitHub nommé my-static-web-app-and-api dans votre compte GitHub. Ensuite, vous clonez le dépôt GitHub et exécutez le code localement sur votre ordinateur.

1. Ouvrez une fenêtre de terminal sur votre ordinateur.

   Si vous êtes sur Windows, vous pouvez entrer cmd dans la zone de recherche de la barre d’état système.

2. Pour cloner le référentiel sur votre ordinateur, collez le code suivant dans la fenêtre d’invite de commandes.

   Prenez soin de remplacer <YOUR_GITHUB_USERNAME> par votre nom d’utilisateur GitHub.

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api.git
   

   Remarque

   Si vous ne parvenez pas à copier dans le terminal de l'invite de commandes, cliquez avec le bouton droit sur l'icône de la barre de titre et, dans l'onglet Propriétés, assurez-vous que l'option Utiliser Ctrl+Maj+C/V pour Copier/Coller est cochée.

3. Accédez au répertoire du code source que vous avez cloné.

   cd my-static-web-app-and-api
   

4. Accédez au répertoire du framework front-end de votre choix.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Installez les dépendances de l’application.

   npm install
   

6. Vérifiez que la dernière version de chaque dépendance est installée avec la commande suivante.

   npm audit fix
   

7. Exécutez l’application cliente frontale.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Naviguer jusqu’à votre application

Lorsque l’offre groupée d’applications est générée et compilée, un onglet de navigateur s’ouvre automatiquement pour afficher votre application en cours d’exécution localement.

L’hôte local pour angular est http://localhost:4200.

L’hôte local pour react est http://localhost:3000.

L’hôte local pour svelte est http://localhost:5000.

L’hôte local pour Vue est http://localhost:8080.

Votre application doit dire Charger des données ... car il n’y a pas encore de données ou d’API. Vous ajoutez l’API pour votre application web plus loin dans cette leçon.

Dans le terminal, appuyez sur Ctrl+C pour arrêter votre travail de traitement par lots.

Félicitations! Vous avez créé votre application et l’avez vue s’exécuter localement dans votre navigateur. Vous pouvez ensuite publier votre application sur Azure Static Web Apps.

Créer une application web statique

Vous avez créé votre propre dépôt GitHub. Vous pouvez maintenant créer votre propre application web statique à l’aide de l’extension Azure Static Web Apps pour Visual Studio Code.

Installation de l’extension Azure Static Web Apps pour Visual Studio Code

1. Ouvrez Visual Studio Code.

2. Dans le menu supérieur, sélectionnez Afficher les>extensions, puis entrez Azure Static Web Apps dans la zone de recherche.

3. Lorsque l’onglet extension se charge dans Visual Studio Code, sélectionnez Installer.

Ouvrir le dossier de l’application

1. Sélectionnez F1 pour ouvrir la palette de commandes Visual Studio Code.

2. Sélectionnez Fichier : Ouvrir le dossier....

3. Sélectionnez le dossier my-static-web-app-and-api .

4. Sélectionnez Ouvrir pour ouvrir le dossier dans Visual Studio Code.

Se connecter à Azure dans Visual Studio Code

1. Sélectionnez F1 pour ouvrir la palette de commandes Visual Studio Code.

2. Entrez Azure : connectez-vous et suivez les invites pour vous authentifier.

   Important

   Veillez à vous connecter à Azure à l’aide du même compte que celui que vous avez utilisé pour activer le bac à sable dans le navigateur. L’utilisation du même compte rend l’abonnement Concierge disponible, ce qui vous donne accès à des ressources Azure gratuites pendant ce tutoriel.

Sélectionnez votre abonnement

1. Sélectionnez F1 pour ouvrir la palette de commandes Visual Studio Code.

2. Entrez Azure : sélectionnez Abonnements, puis désactivez toutes les sélections à l’exception de l’abonnement Concierge.

   

Valider les modifications

Lorsque vous avez installé les dépendances d’application, certains des fichiers de votre projet ont été mis à jour dans le processus. Pour continuer, vous devez valider ces modifications dans le référentiel.

1. Sélectionnez F1 pour ouvrir la palette de commandes Visual Studio Code.

2. Entrez et sélectionnez Git Commit All.

3. Saisissez validation initiale en haut du fichier.

4. Enregistrez et fermez le fichier de validation Git.

   Ne vous inquiétez pas de la synchronisation de vos modifications avec le serveur à ce stade. Les mises à jour sont copiées jusqu’à GitHub lorsque vous publiez l’application web statique.

Créer l’application web statique

Les sessions azure et GitHub actuelles authentifiées sont requises pour créer une application web statique. Si vous n’êtes pas déjà connecté aux deux fournisseurs, l’extension vous invite à vous connecter pendant le processus de création.

1. Sélectionnez F1 pour ouvrir la palette de commandes Visual Studio Code.

2. Entrez et sélectionnez Azure Static Web Apps : Créer une application web statique....

   Entrez les valeurs suivantes pour le reste des invites de la palette de commandes.

   Prompt	Valeur
   Abonnement	Sélectionner l’abonnement Concierge
   Nom	Entrez my-static-web-app-and-api.
   Région	Sélectionnez la région la plus proche de vous.
   Préréglage	Sélectionnez Angular.
   Emplacement du code d’application	Saisissez angular-app
   Emplacement de sortie	Entrez dist/angular-app.

2. Entrez et sélectionnez Azure Static Web Apps : Créer une application web statique....

   Entrez les valeurs suivantes pour le reste des invites de la palette de commandes.

   Prompt	Valeur
   Abonnement	Sélectionner l’abonnement Concierge
   Nom	Entrez my-static-web-app-and-api.
   Région	Sélectionnez la région la plus proche de vous.
   Préréglage	Sélectionner React
   Emplacement du code d’application	Entrez react-app.
   Emplacement de sortie	Entrez dist

2. Entrez et sélectionnez Azure Static Web Apps : Créer une application web statique....

   Entrez les valeurs suivantes pour le reste des invites de la palette de commandes.

   Prompt	Valeur
   Abonnement	Sélectionner l’abonnement Concierge
   Nom	Entrez my-static-web-app-and-api.
   Région	Sélectionnez la région la plus proche de vous.
   Préréglage	Sélectionner Svelte
   Emplacement du code d’application	Saisissez svelte-app
   Emplacement de sortie	Entrez public.

2. Entrez et sélectionnez Azure Static Web Apps : Créer une application web statique....

   Entrez les valeurs suivantes pour le reste des invites de la palette de commandes.

   Prompt	Valeur
   Abonnement	Sélectionner l’abonnement Concierge
   Nom	Entrez my-static-web-app-and-api.
   Région	Sélectionnez la région la plus proche de vous.
   Préréglage	Sélectionnez Vue.
   Emplacement du code d’application	Entrez vue-app
   Emplacement de sortie	Entrez dist

Remarque

Ce référentiel diffère des autres projets que vous pouvez utiliser. Ce projet contient quatre applications différentes dans quatre dossiers différents. Chaque dossier contient une application créée dans un framework JavaScript différent. En règle générale, vous n’avez qu’une seule application à la racine de votre référentiel et, par conséquent, la valeur par défaut / pour l’emplacement du chemin d’accès de l’application. Cette structure est un excellent exemple de la façon dont Azure Static Web Apps vous permet de configurer des emplacements en premier lieu : vous avez un contrôle total sur la façon dont l’application est générée.

3. Une fois l’application créée, une notification de confirmation s’affiche dans Visual Studio Code.

   

   Pendant que vous configurez la build, Visual Studio Code signale l’état de la build à vous.

   

4. Vous pouvez afficher la progression du déploiement à l’aide de GitHub Actions en développant le menu Actions .

   

   Une fois le déploiement terminé, vous pouvez accéder directement à votre site web.

5. Pour afficher le site web dans le navigateur, cliquez avec le bouton droit sur le projet dans l'extension Static Web Apps, puis sélectionnez Parcourir le site.

   

   Votre application doit dire Charger des données ... car il n’y a pas encore de données ou d’API. Vous allez ajouter l’API pour votre application web plus loin dans ce module.

Félicitations! Votre application est déployée sur Azure Static Web Apps !

Remarque

Ne vous inquiétez pas si vous voyez une page web qui indique que l’application n’est pas encore générée et déployée. Essayez d’actualiser le navigateur une minute après. Le service GitHub Action s’exécute automatiquement lorsque l’application web statique Azure est créée. Par conséquent, si vous voyez la page de démarrage, l’application n’est pas encore complètement déployée.

Tirage (pull) des modifications de GitHub

Tirez les dernières modifications de GitHub pour réduire le fichier de flux de travail créé par le service Azure Static Web Apps.

1. Ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P.

2. Entrez et sélectionnez Git : Pull.

3. Appuyez sur Entrée.

Étapes suivantes

Ensuite, vous allez apprendre à générer et à exécuter votre API à l’aide d’un projet Azure Functions.