Exercice – Démarrer

  • 3 minutes

Azure Static Web Apps publie des sites web dans un environnement de production en générant des applications à partir d’un dépôt GitHub. Dans cet exercice, vous allez créer une application web à l’aide de votre framework front-end par défaut à partir d’un dépôt GitHub.

Créer un dépôt

Ce module vous permet de créer facilement un dépôt à l’aide d’un dépôt de modèles GitHub. Une série de modèles est disponible, chacun contenant une application de démarrage générée avec un framework front-end différent.

  1. Accédez à la page créer à partir d’un modèle pour le référentiel de modèles. Si vous obtenez une erreur 404 : Page introuvable , connectez-vous à GitHub et réessayez.

  2. Choisissez l’un de vos comptes GitHub dans la liste déroulante Propriétaire .

  3. Nommez votre référentiel my-static-web-app.

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

Exécuter l’application

Vous venez de créer un dépôt GitHub nommé my-static-web-app dans votre compte GitHub. Ensuite, vous allez cloner ce dépôt et exécuter le code localement sur votre ordinateur.

  1. Ouvrez un terminal sur votre ordinateur.

  2. Commencez par cloner le dépôt GitHub vers le référentiel souhaité de votre ordinateur.

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

  3. Accédez au dossier de votre code source.

    cd my-static-web-app

  4. Accédez ensuite au dossier de votre framework front-end par défaut, comme indiqué ci-après.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Installez à présent les dépendances de l’application.

    npm install

    Remarque

    Si vous obtenez une erreur PATH introuvable , vérifiez que vous avez installé Node.js à partir de https://nodejs.org. Vous devrez peut-être effectuer une configuration personnalisée qui inclut l’installation de l’option Ajouter au chemin d’accès .

    Capture d’écran montrant l’installation personnalisée des options Node.js dans l’Assistant.

  6. Enfin, exécutez l’application cliente front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Naviguer jusqu’à votre application

Il est temps de voir votre application s’exécuter localement. Chaque application front-end s’exécute sur un port différent.

Cliquez sur le lien pour accéder à votre application.

Accédez à http://localhost:4200.

Capture d’écran de la navigation vers votre application web Angular.

Accédez à http://localhost:3000.

Capture d’écran de la navigation vers votre application web React.

Accédez à http://localhost:5000.

Capture d’écran de la navigation vers votre application web Svelte.

Accédez à http://localhost:8080.

Capture d’écran de la navigation vers votre application web Vue.

Remarque

Dans les exercices de ce module, vous allez déployer une application sans API. Consultez la section Étapes suivantes à la fin de ce module pour plus d’informations sur le module suivant, où vous allez déployer une API en même temps que votre application.

Maintenant, arrêtez votre application en cours d’exécution en appuyant sur Ctrl-C dans le terminal.

Étapes suivantes

Vous avez généré votre application et celle-ci s’exécute localement dans votre navigateur.

Ensuite, vous allez publier votre application dans Azure Static Web Apps.