Blazor à partir de zéro : Chapitre 2 — Votre première application Blazor

Bienvenue au chapitre 2 de Blazor à partir de zéro. Si vous avez manqué le chapitre 1, lisez-le d’abord pour garder le contexte des modes de rendu.

Dans ce chapitre, nous allons créer une nouvelle application Blazor, l’exécuter en local et comprendre le rôle des fichiers essentiels.

Étape 1 : créer le projet

Depuis votre terminal :

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Cela crée une application web Blazor .NET 9 avec la structure par défaut.

Si l’outil vous demande un modèle d’interactivité, commencez avec Interactive Server. C’est le mode le plus simple pour apprendre : tout s’exécute côté serveur.

Étape 2 : l’exécuter en local

Démarrez l’application :

dotnet watch

Ouvrez ensuite l’URL affichée dans le terminal (généralement https://localhost:5xxx). Vous devriez voir l’application par défaut avec Home, Counter et Weather.

Si cela fonctionne, votre environnement est prêt.

Étape 3 : comprendre la structure du projet

Voici les dossiers et fichiers à connaître en priorité :

• Program.cs — enregistre les services et configure le pipeline HTTP.
• Components/App.razor — composant racine de l’application.
• Components/Routes.razor — définition des routes.
• Components/Pages/ — pages routables comme Home et Counter.
• Components/Layout/ — layout partagé (MainLayout.razor, menu).
• wwwroot/ — assets statiques (CSS, images, favicon).
• appsettings.json — valeurs de configuration.

Ne cherchez pas à tout maîtriser maintenant. Comprendre où vit l’UI et où démarre l’application suffit pour cette étape.

Étape 4 : votre première modification

Ouvrez Components/Pages/Home.razor et remplacez le contenu par :

@page "/"

<PageTitle>Blazor à partir de zéro</PageTitle>

<h1>Blazor à partir de zéro</h1>
<p>Le chapitre 2 tourne en local.</p>

Enregistrez puis rechargez le navigateur. Avec dotnet watch, la mise à jour est immédiate.

Ce petit changement confirme la boucle complète : modifier -> compiler -> afficher.

Étape 5 : lire Program.cs une fois

Pas besoin de le mémoriser, mais repérez ces lignes :

• AddRazorComponents() active les composants Razor.
• AddInteractiveServerComponents() active les composants interactifs côté serveur.
• MapRazorComponents<App>() mappe le composant racine vers des endpoints.

Ces lignes expliquent comment l’application démarre et quels modes sont actifs.

Problèmes courants

Si quelque chose casse, c’est souvent l’un de ces points :

• SDK trop ancien : lancez dotnet --version et vérifiez .NET 9.
• Certificat HTTPS : lancez dotnet dev-certs https --trust.
• Conflit de ports : arrêtez d’anciens processus dotnet puis relancez.

Prochain chapitre

Dans le chapitre 3, nous irons en profondeur sur les composants : paramètres, composition et structure d’une UI réutilisable.