Partager via

Démarrer l’émulateur de l’interface CLI Static Web Apps

  • Article

Important

Pour améliorer la sécurité des déploiements depuis l’interface CLI Static Web Apps, un changement cassant a été introduit, qui vous oblige à effectuer une mise à niveau vers la dernière version (2.0.2) de l’interface CLI Static Web Apps d’ici le 15 janvier 2025.

Static Web Apps est une plateforme basée sur le cloud qui héberge et exécute vos applications web. Lorsque vous exécutez votre application localement, vous avez besoin d’outils spéciaux pour vous aider à estimer la façon dont votre application s’exécuterait dans le cloud.

L’interface CLI Static Web Apps (CLI SWA) inclut un émulateur qui imite la façon dont votre application s’exécuterait sur Azure, sauf qu’elle s’exécute exclusivement sur votre machine.

La commande swa start lance l’émulateur avec les paramètres par défaut. Par défaut, l’émulateur utilise le port 4280.

Si vous souhaitez en savoir plus sur les différentes commandes, veuillez consulter Informations de référence sur l’interface CLI.

Servir des fichiers statiques depuis votre système de fichiers

L’interface CLI SWA vous permet de servir directement votre contenu statique depuis votre système de fichiers sans avoir besoin de recourir à d’autres outils. Vous pouvez servir le contenu statique depuis votre répertoire actif ou à partir d’un dossier spécifique.

Servir depuis... Commande Notes
Le dossier actif swa start Par défaut, l’interface CLI démarre et sert le contenu statique (fichiers HTML, image, script et CSS) depuis le répertoire de travail actif.
Un dossier spécifique swa start ./my-dist Vous pouvez changer le comportement de façon à démarrer l’émulateur avec un autre dossier de ressources statiques.

Utiliser le serveur de développement

Au moment de développer le front-end de votre application, vous souhaiterez peut-être utiliser le serveur de développement par défaut de l’infrastructure. L’utilisation du serveur d’une infrastructure vous permet de tirer parti de certains avantages comme le rechargement dynamique et le remplacement de module à chaud (HMR).

Par exemple, les développeurs Angular utilisent souvent ng serve ou npm start pour exécuter le serveur de développement.

Vous pouvez configurer l’interface CLI Static Web Apps (SWA) pour transmettre par proxy les requêtes au serveur de développement, ce qui vous confère les avantages de l’interface CLI de votre infrastructure tout en utilisant simultanément l’interface CLI Static Web Apps.

L’utilisation du serveur de développement d’une infrastructure avec l’interface CLI SWA passe par l’exécution de deux étapes :

  1. Démarrez le serveur de développement local de votre infrastructure comme vous le faites habituellement. Veillez à noter l’URL (y compris le port) utilisée par l’infrastructure.

  2. Démarrez l’interface CLI SWA dans un nouveau terminal, en transmettant l’URL du serveur de développement.

    swa start <DEV_SERVER_URL>

Remarque

Veillez à remplacer l’espace réservé <DEV_SERVER_URL> par votre propre valeur.

Lancer le serveur de développement

Vous pouvez simplifier davantage votre flux de travail en faisant lancer automatiquement l’interface CLI SWA.

Vous pouvez transmettre une commande personnalisée au paramètre --run de la commande swa start.

swa start <DEV_SERVER_URL> --run <DEV_SERVER_LAUNCH_COMMAND>

Voici quelques exemples de démarrage de l’émulateur avec différentes infrastructures :

Infrastructure Commande
React swa start http://localhost:3000 --run "npm start"
Blazor swa start http://localhost:5000 --run "dotnet watch run"
Jekyll swa start http://localhost:4000 --run "jekyll serve"

Vous pouvez également utiliser le paramètre --run si vous souhaitez exécuter un script personnalisé au moment de lancer le serveur de développement.

swa start http://localhost:4200 --run "./startup.sh"

La commande ci-dessus vous permet d’accéder à l’application avec les services émulés depuis http://localhost:4280

Étapes suivantes

Démarrer le serveur API