mardi 28 février 2023

FluentUI for Blazor

Un aspect très important du développement des applications web comme avec ASP.NET Core, ce sont les contrôles utilisateurs. Il est important de faire, au départ, le bon choix de contrôles utilisateurs sinon cela peut être catastrophique. Démarrer avec une mauvaise librairie de contrôles utilisateurs peut vous faire perdre un temps précieux.

Alors aujourd'hui, je m'en vais explorer Fluent UI for Blazor.

Si vous faites cette recherche dans votre moteur favoris, vous allez sans doute trouver des choses un peu vieilles, allons à l'essentiel :

Learn Microfot - Use Fluent UI Web Components with Blazor

En suite vous trouvez le Nuget Package Officiel à installer dans votre projet Blazor :

Nuget - Microsoft.Fast.Components.FluentUI
Cette page est importante pour mettre en oeuvre FluentUI au sein de votre projet Blazor, des instructions importantes sont en bas de la page. Il y a bien une "Note" à propos d'escape du caractère @ mais les explications données : Razor Pages syntax documentation ne suffisent pas !

Fluent UI Web Components for Blazor - Using Web Component

Et la Documentation complète en live :

Microsoft - Fluent UI Web Components for Blazor#getting-started

Il y a plain d'autres chose plus ou moins officielles qui traînent sur Internet concernant FluentUI pour Blazor.

Voilà, avec ces trois liens, pas plus, vous avez de quoi démarrer votre développement avec Fluent UI Officiel for Blazor.

Là où j'ai perdu du temps c'est avec /@fluentui

Dans l'installation à faire au sein de votre projet Blazor, vous avez la ligne suivante :

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>

à insérer de préférence dans le ficher : 

\\Visual Studio 2022\Samples\ASP.NET Core Blazor\BlazorServerFluentUIApp\Pages\_Layout.cshtml

Le sujet c'est un escape caractère pour que le @ ne soit pas interprété mais lu comme un caractère autorisé dans une url.

Alors je vous laisse cherche un peu ... 

Ajouter $ ou \ ou / ou bien encore @ voir doubler @@ ou tout autre %40 ne fonctionnera pas ... avec les navigateurs actuels, là encore de nombreuses vieilles choses traînent sur Internet c'est dommage et cela vous fait perdre votre temps.

Solution à l'erreur : /@fluentui c'est @Html.Raw("@") comme dans :

<script type="module" src="https://cdn.jsdelivr.net/npm/@Html.Raw("@")fluentui/web-components/dist/web-components.min.js"></script>

Voici les premiers résultats avec FluentUI for Blazor :

FluentUI for Blazor
FluentUI for Blazor Officielle

Pour le reste, je vous laisse avec un dernier lien :

Microsoft - Fluent UI Web Components for Blazor#using fluent UI

Le gros du problème, c'était bien /@fluentui.

Microsoft.Fast.Templates.FluentUI for Blazor

Il est dit dans la doc que des Templates d'application peuvent être installés par la commande :

>dotnet new install {path to package}\Microsoft.Fast.Templates.FluentUI.{version}.nupkg

Pour moi, le résultat fut le suivant :

Microsoft.Fast.Templates.FluentUI.{version}.nupkg
Microsoft.Fast.Templates.FluentUI.{version}.nupkg

J'ai trouvé ce Template à installer dans la gestion des packages de la Solution mais là encore impossible de l'installer.

Gravité Code Description Projet Fichier Ligne État de la suppression

Erreur Le package 'Microsoft.Fast.Templates.FluentUI 2.0.3' a un type de package 'Template' non pris en charge par le projet 'BlazorWebAssemblyFluentUIApp1'.

Grrr, dommage !

Du coup j'installe le NuGet en passant par : Bouton droit sur le projet -> Gérer les packages NuGet :

Installation NuGet Microsoft.Fast.Templates.FluentUI
Installation NuGet Microsoft.Fast.Templates.FluentUI

Le projet et son code source dans le GitHub :

GitHub - BlazorServer FluentUI App

Problèmes avec FluentUI for Blazor

Je ne parviens pas encore à afficher les icônes, non ce n'est pas une question d'install, j'ai une application Blazor qui fonctionne :

FluentUI for Blazor
FluentUI for Blazor

Mais quand j'essaye d'activer l'Accordion avec le code suivant :

<FluentAccordion ActiveId="@activeId" OnAccordionItemChange="HandleOnAccordionItemChange">
    <FluentAccordionItem Heading="Panel one">
        <FluentIcon Slot="start" Name="@FluentIcons.Globe" Size="@IconSize.Size20" Color="@Color.Neutral" />
        Panel one content, using the 'start' slot for extra header content (in this case an icon)
    </FluentAccordionItem>
    ...

Et bien, c'est une erreur :

requested Icon Globe Size20 Regular is not available in the collection
requested Icon Globe Size20 Regular is not available in the collection

Comme si l'icône Globe n'existait pas dans la solution.

Je n'ai pas plus de temps à perdre avec cette histoire d'icône FluentUI, je verrai cela plus tard !

La solution se trouve sans doute dans :

Iconify Documentation

Sinon, plus simple pour utiliser les icônes de Bootstrap pour ASP.NET Core Blazor :

https://github.com/windperson/BlazorBootstrapIconsdDemo
Mais là on va voir qu'il s'agit des icônes de bootstrap, et non FluentUI.

Et encore un autre lien vers des Icônes :

github - microsoft/fluentui-system-icons: Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft

Et finalement peut être la seule page utile :

Fluent UI Blazor components demo page

A moins que vous ayez envie de naviguer Ici :

Fluent-components.azurewebsites.net

Tout ceci ne me parait pas bien sec, il y a beaucoup trop de sites qui se veulent parler de FluentUI.

Où encore par ici :

GitHub - fast-blazor/Update Icons.md at main


vendredi 10 février 2023

Comment bien démarrer son développement avec Blazor ?

Je recherche la meilleure documentation pour bien démarrer avec Blazor. Je me méfie de la documentation MS qui est bien trop souvent pléthorique. Donc je me fais un post rapide avec les concepts et les liens utiles pour bien démarrer votre développement avec Blazor.

Blazor WebAssembly ou Blazor Server ?

ASP.NET Core Blazor C#
ASP.NET Core Blazor C#

Client, Server ou Hybride ?

Microsoft Learn - Choisir une interface utilisateur ASP.NET Core

On part de ASP.NET Core et on cherche un rendu :

Interface utilisateur rendue par le serveurl

Razor ASP.NET Core Pages

ASP.NET Core MVC

Blazor Server

Interface utilisateur rendue par le client

Blazor WebAssembly

ASP.NET Core SPA Angular ou React (JS)

ASP.NET Core Hybride

ASP.NET Core MVC ou Razor Pages + Blazor

ASP.NET Core Blazor

Créez des UIs interactifs enrichis à l’aide de C# au lieu de JavaScript.

Blazor Server

Blazor WebAssembly (SPA)

Blazor Hybride

Introduction ASP.NET Core Blazor

Architecture de Blazor Server, Blazor WebAssembly.

Learn Microsoft - ASP.NET Core Blazor

Mais cette page est bien plus intéressante que la doc MS, les figures sont plus précises  :

Steve Sanderson's Blog - Blazor: a technical introduction

Microsoft Learn - Modèles d’hébergement ASP.NET Core Blazor
Blazor Server -> SignalR - DOM sur le client un script blazor.server.js, Blazor WebAssembly fournit avec blazor.webassembly.js

Quel Blazor modèle d’hébergement dois-je choisir ?
Quel Blazor modèle d’hébergement dois-je choisir ?

Blazor Server peut accéder directement aux ressources serveur et réseau.

Blazor Templates

Les types d'applications à créer avec Visual Studio.

Blazor Server

L'application s'exécute côté serveur dans une application ASP.NET Core qui gère les interactions utilisateur via une connexion SignalR.

Pour la génération de l'application, les choix sont les suivants :

Framework pris en charge : .NET Core 3.1, .NET 5.0, 6.0, 7.0

Type d'authentification : 

  • Comptes individuel, (Form: Areas/Pages/Shared/login Account/logout - ConnectionStrings)
  • Plateforme d'identités Microsoft, (Id application d'entreprise Azure Account)
  • Windows (Form: Shared/LoginDisplay: Hello, @context.User.Identity?.Name!)

Configuration HTTPS

Activation de Docker et dans le cas positif, choix de l'OS Linux ou Windows

Une option : N'utilisez pas d'instruction de niveau supérieur (de méthode Main ou d'instructions supérieures)

L'option Activation de Docker et le choix de Windows vous fera installer Docker Desktop...

L'installation de Docker Desktop a échouée.
L'installation de Docker Desktop a échouée.

Petit souci d'install avec Docker Desktop.

Blazor WebAssembly

L'application s'exécute sur WebAssembly qui peut être hébergée dans une application ASP.NET Core... ou plutôt un container Linux ou Windows.

Framework pris en charge : .NET Core 3.1, .NET 5.0, 6.0, 7.0

Type d'authentification : il n'y a pas de Windows parce que Docker n'est pas une option

Configuration HTTPS

ASP.NET core Hosted

Application Web Progressive (PWA pour une utilisation hors connexion)

Une option : N'utilisez pas d'instruction de niveau supérieur (de méthode Main ou d'instructions supérieures)

Formation avec Blazor

J'ai trouvée quelques vidéos :

HTS Learning - Acheter le cours "Développement web avec Blazor"
Dans "Les bases de Blazor" comment séparer la Vue et le Code ... C'est intéressant de la séparer la Vue du Code et la technique démontrée ici est permise par Blazor alors pourquoi s'en priver ?

Balzor in 100 seconds

Microsoft Learn - Créer des applications web avec Blazor - Parcours d’apprentissage - Training
Une formation très intéressante... où l'on balaye vraiment tous les aspects du développement avec Blazor.

Microsoft Learn - Découvrez tous les parcours et modules d’apprentissage - Training - Blazor
Tous les modules d'apprentissage avec Blazor.

Tutoriels Blazor

Microsoft DotNET - Blazor Tutorial - Build your first Blazor app

Création de ma première application Blazor Server avec Visual Studio Community 2022

Microsoft Learn - Didacticiels ASP.NET Core Blazor

GitHub - dotnet/intro-to-dotnet-web-dev: Get Started Web Developer .NET, C# ASP.NET Core
Introduction au développement Web avec ASP.NET tout est là !

GitHub dotnet/intro-to-dotnet-web-dev; intro-to-dotnet-web-dev/5-blazor
Construction d'un jeu Puissance 4 en français ConnectFor en anglais le tout en Balzor

Microsoft Learn - Accéder aux données d’un composant Blazor - Training
Vous créez l'Application BlazingPizza, c'est un parcours ludique et complet allant jusqu'à la création d'une librairie Blazor et de con utilisation comme package Nuget.

Code Source BlazingPizza

GitHub - mabyre - My BlazingPizza
Retrouvez Mabyre sur le GitHub et son projet Blazor de plateforme de vente de Pizzas ;-)

Contrôles Utilisateur

Comme avec toute technologie, les contrôles utilisateur sont le nerf du développement d'applications. Il faut les choisir correctement dès le début du projet.

Composants intégrés

La page la plus importante pour comprendre le comportement des contrôles utilisateurs, c'est le cycle de vie des composants ASP.NET Core Blazor Razor :

Microsoft Learn - Razor ASP.NET Core cycle de vie des composants
Décrit les différentes phases de la vie d'un contrôle utilisateur : OnPrerender, OnInitialize, OnParametersSet, Render, OnAfterRender.

Microsoft Learn - ASP.NET Core composants intégrés Razor
Il y a de base des composants Blazor dans ASP.NET Core fournit par l'infrastructure Balzor.

Composants payants

On retrouve Telerik, Infragistic, DevExpress pour les composants payants. Je ne suis pas contre le fait de payer des composants contrôles utilisateur mais les stratégies de ces fournisseurs sont un peu agressives, le prix, il devient difficile de les comparer et de faire son choix. 

Je vous laisse faire le votre ou trouver des comparatifs, je crois qu'on peut les départager avec un critère comme l'utilisabilité des composants les plus complexes comme les DatasGrid.

Microsoft.Fast.Components.FluentUI

Microsoft Learn - Fluent UI Web Components Overview
Microsoft.Fast.Components.FluentUI
Dans la doc il est fait mention de la commande d'install :
>npm install --save @fluentui/web-components
Mais npm n'est plus pris en charge on le trouve dans les nugets ...

brave-cliff-0c0c93310.azurestaticapps.net - Fluent UI Blazor components demo page

Fluent UI Blazor components demo page (brave-cliff-0c0c93310.azurestaticapps.net)

C'est un vrai fatras ce truc FluentUI, d'ailleurs je vais prendre quelques notes :

ASP.NET C#: FluentUI for Blazor
Un article dédié à l'utilisation de FluentUI pour Balzor.

Blazorise

GitHub - Megabit/Blazorise component library on top of Blazor with support for CSS frameworks like Bootstrap, Bulma, AntDesign, and Material
Beaucoup de choses à regarder ici aussi

Blazorise - Documentation

Blazorise - Balzor Server - Bootstrap Demo

Blazorise - Templates Guide
Très intéressant car on définit les couleurs du Thème que l'on souhaite utiliser pour une UI dédiée, pour un client qui souhaiterait avoir des couleurs spécifiques c'est certainement intéressant.

Radzen

A set of 70+ free and open source native Blazor UI controls.

GitHub - Radzen Blazor UI components DataGrid, Scheduler, Charts and theming Material FluentUI

Blazor.radzen - get started
Vraiment très sympathique facile à intégrer et fonctionne tout de suite.

Radzen Blazor Studio
Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Fast.

Comparaison des Blazor Tooling (contrôles utilisateurs ++)

Comment comparer ces différents ensembles de contrôles utilisateurs, autrement qu'en passant des jours à les installer, à les utiliser et découvrir leurs fonctionnalités ?

Visual Studio Magazine - What's New in Third-Party Blazor Tooling
Voici une page de comparaison les fonctionnalités des différents intervenants, je n'ai pas encore découvert Syncfusion mais il semble qu'il y a une licence "community" ... pas de Blazorise dans cette comparaison.

Visual Studio Magazine - So Why Doesn't Microsoft Provide Its Own Blazor Component Library?
Sur cette page encore plein d'autres fournisseurs de contrôles utilisateurs pour Blazor.

GitHub - coding-flamingo/BlazorComponents
Découvrir plein de projets de comparaison des contrôles utilisateurs pour Balzor et plein d'autres choses en Balzor.

Et pour en terminer avec les comparaison des contrôles utilisateurs pour Blazor voici la vidéo de Coding Flamingo et un benchmark très intéressant :

Et le gagnant est ... Balzorise ou MudBlazor... depends on what you need. Et une mention spéciale pour le look de Radzen mais qui est plus lent.

Certes il y a le benchmark mais Radzen me semble avoir de belles qualités graphiques.

Balzor Documentation

La Racine de la doc Learn Microsoft sur ASP.NET Core Blazor :

Microsoft Learn - ASP.NET Core Blazor

GitHub - Engineering guidelines · dotnet/aspnetcore Wiki
Quelques bons principes de software engineering, coding guilines, and so on.

La suite de mes lectures

https://learn.microsoft.com/fr-fr/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-7.0&pivots=webassembly

Microsoft Learn - Créer des composants d’interface utilisateur réutilisables avec Blazor
Utiliser des composants
Composants et limites d’erreur
Gestionnaires d’événements
Liaison de données
Modifications d'état
Cycle de vie des composants

  • OnInitialized 
  • OnParametersSet
  • OnAfterRender
  • IDisposable     

Paramètres de modèle
Code-behind

Blazor Samples

Je cherche des exemples d'application de développements avec Blazor, au plus proche de la communauté officielle. Il est légitime qu'une technologie soit démontrée par un nombre conséquent d'exemples.

On trouve Ici : 

GitHub - dotnet/blazor-samples
Samples to accompany the official Microsoft Blazor documentation
Blazor Server with EF Core Sample App

Tout un tas d'exemples avec Blazor dans les catégories suivantes :

      • BlazorSample_Server
      • BlazorSample_WebAssembly
      • BlazorServerEFCoreSample
      • BlazorServerSignalRApp
      • BlazorWebAssemblyScopesLogger
      • BlazorWebAssemblySignalRApp

A disséquer à loisir, le plus possible... 

Microsoft Learn - Blazor sample applications - Code Samples
La documentation correspondante sur blazor-samples, dans : BlazorSample_Server on trouve les Pages suivantes :

advanced-scenarios
build-a-blazor-app
call-dotnet-from-js
call-js-from-dotnet
control-head-content
data-binding
dependency-injection
dynamiccomponent
event-handling
file-downloads
file-uploads
forms-and-validation
handle-errors
images
index
layouts
lifecycle
logging
prerendering
rendering
routing
templated-components

Des exemples somme toute basiques mais intéressants, à maîtriser.

Faire des log (journalisation - logger) avec Blazor

C'est classique et tout est là pour bien journaliser notre application Blazor :

Microsoft Learn - Blazor journalisation ASP.NET Core
Malheureusement cela ne va très loin, par exemple ne va pas jusqu'à loguer dans un fichier puisque la possibilité de le faire dépend de la techno choisie.

Développez une application WPF Blazor

Microsoft Learn - Créer une application Windows Presentation Foundation (WPF) Blazor
A l'aide du Nuget :

NuGet Gallery - Microsoft.AspNetCore.Components.WebView.Wpf 7.0.59

Dans le fichier csproj :

Remplacer le SDK par :

<Project Sdk="Microsoft.NET.Sdk.Razor">

Créer des Pages Razor (Blazor)  avec du Code Séparé

Depuis le début, je m'escrime à créer des composants Blazor avec la directive @code puis à créer une class avec le nom MyComponent.razor.cs puis à déplacer le code dedans.

J'ai même regardé une vidéo où le formateur blazor passe dix minutes à vous décrire comment faire quelle perte de temps !

Et puis je découvre dans Bouton droit sur le Projet -> Ajouter -> En ligne -> Blazor Component CodeBehind Templates (VS2022) pour ajouter des Templates :

Créer des Page Razor avec le code spéraré ou code behind
Créer des Page Razor avec le code séparé ou code behind

Ce qui veut sans doute dire qu'il faut attendre Visual Studio 2022 pour pouvoir l'installer mais je clique sur l'install et me voilà avec les deux Templates suivants :

Empty Razor Page Component with Code Behind
Empty Razor Page Component with Code Behind

Ce n'est pas exceptionnel, le Template Empty n'a pas le code html c'est tout  mais c'est déjà ça !

Bon, il manque la directive @inherit MaPageBase, mais bon ...

Bon la class est partial alors que pour mettre protected comme on a appris qu'il ne faut pas faire ça, mais bon ...

C'est déjà ça !

Si vous utilisez l'héritage depuis ComponentBase et @inherit, n'oubliez pas de mettre les propriétés à protected pour qu'elles soient accessible depuis la page ...

Se méfier de la directive @page "/" car elle crée une erreur d'un autre monde !?

Codes Source du Tutoriel

GitHub - mabyre - My BlazingPizza
Retrouvez Mabyre sur le GitHub et son projet Blazor de plateforme de vente de Pizzas ;-)

That's All Folks

jeudi 9 février 2023

Blazor plutôt que Razor ?

J'ai assez peu développé avec Razor mais j'ai beaucoup utilisé ASP.NET MVC, j'ai écris ici même quelques posts et développé quelques Samples d'applications avec Razor par la suite j'ai plutôt orienté mes développements vers ASP.NET Core & Angular. Aujourd'hui j'entends parler de Blazor comme une technologie mature.

Blazor est un framework open source de Microsoft en C# utilisant .NET. La technologie WebAssembly permet d'exécuter du code C# dans les navigateurs Web et permet de se passer de JavaScript, HTML et CSS !

Balzor
Balzor

Blazor est basé sur ASP.NET Core on peut donc utiliser LINQ et la programmation asynchrone, la sécurité et la gestion des erreurs.

Thanks to ChatGPT que j'ai raccourcis pour les initiés.

Je tape "Blazor" dans la barre de recherche de Microsoft Learn :

Microsoft Learn - Blazor

Pléthorique...

Quelles sont les contraintes de WebAssembly ?

Je ne résiste pas à poser la question à ChatGPT, voici sa réponse :

"Pas de support natif pour les interfaces utilisateur : WebAssembly n'inclut pas de support natif pour la création d'interfaces utilisateur telles que les formulaires, les boutons et les menus. Pour créer des interfaces utilisateur avec WebAssembly, vous devez utiliser des technologies web telles que HTML, CSS et JavaScript.

Pas de prise en charge native des API web : WebAssembly ne prend pas en charge nativement les API web telles que le DOM, le XMLHttpRequest et l'API Web Audio. Pour utiliser ces API, vous devez utiliser JavaScript ou une bibliothèque tierce qui fournit des liens vers ces API.

Taille de téléchargement plus grande : Bien que WebAssembly soit conçu pour être compact et rapide, les fichiers binaires WebAssembly peuvent être plus grands que les fichiers JavaScript équivalents. Cela peut entraîner des temps de chargement plus longs pour les applications WebAssembly.

Limitations de sécurité : Comme pour toute technologie, WebAssembly peut être vulnérable à des failles de sécurité. Les développeurs doivent prendre des mesures pour sécuriser leur code et protéger les utilisateurs contre les attaques.

Limitations de compatibilité du navigateur : Bien que la plupart des navigateurs modernes prennent en charge WebAssembly, certaines versions plus anciennes des navigateurs peuvent ne pas être compatibles. Les développeurs doivent tenir compte de ces limites de compatibilité lorsqu'ils décident d'utiliser WebAssembly.

En résumé, bien que WebAssembly soit une technologie prometteuse pour le développement web, il y a certaines contraintes à prendre en compte, notamment l'absence de support natif pour les interfaces utilisateur et les API web, la taille de téléchargement plus grande, les limitations de sécurité et les limitations de compatibilité du navigateur."

Whaou...

Mais bon, finalement, dans les avantages de Blazor on trouve que l'on a plus besoin de HTML, CSS, et JavaScript et dans les contraintes on retrouve qu'il va falloir utiliser JavaScript ... C'est toujours la même histoire.

A méditer.

Puis j'ai eu envie de poser à nouveau une question à ChatGpt : 

Est ce que le futur de Blazor n'est pas de terminer comme Silverlight ou Flashplayer qui ont été abandonnés ?

"C'est une question importante et légitime. Alors que Blazor est une technologie relativement nouvelle, il est important de considérer les risques associés à l'adoption de toute nouvelle technologie.

Cependant, il y a plusieurs raisons de croire que Blazor a un avenir prometteur. Tout d'abord, Blazor repose sur .NET et WebAssembly, deux technologies bien établies qui sont utilisées depuis plusieurs années et qui ont une grande communauté de développeurs. De plus, Blazor est soutenu et développé par Microsoft, une entreprise de technologie bien établie avec une longue histoire de développement de logiciels pour les entreprises.

De plus, la popularité croissante de WebAssembly dans l'industrie du développement web est un signe que Blazor pourrait continuer à gagner en popularité à l'avenir. De plus en plus de développeurs choisissent d'utiliser WebAssembly pour des applications web hautement performantes, et cela pourrait aider Blazor à devenir une option plus courante pour le développement web.

En fin de compte, le succès de Blazor dépendra de nombreux facteurs, notamment l'adoption de la communauté des développeurs et des entreprises, la qualité et la maturité de l'implémentation de la technologie, et la capacité de la technologie à répondre aux besoins des développeurs et des utilisateurs. Cependant, il semble que Blazor ait le potentiel de devenir une technologie de développement web populaire et durable."

Wahou... du coup ...

Quels sont les navigateurs compatibles avec WebAssembly ?

"La prise en charge de WebAssembly a considérablement augmenté ces dernières années. La plupart des navigateurs modernes prennent désormais en charge WebAssembly. Voici une liste des principaux navigateurs compatibles avec WebAssembly :

  • Google Chrome (depuis la version 57)
  • Mozilla Firefox (depuis la version 52)
  • Microsoft Edge (depuis la version 16)
  • Apple Safari (depuis la version 11)
  • Opera (depuis la version 44)
  • UC Browser (depuis la version 12.13)
  • Samsung Internet (depuis la version 6.2)

Il est important de noter que certains navigateurs plus anciens peuvent ne pas être compatibles avec WebAssembly, ou peuvent nécessiter une configuration spéciale pour activer cette fonctionnalité. Les développeurs doivent tenir compte de ces limites de compatibilité lorsqu'ils choisissent d'utiliser WebAssembly pour leurs applications web."

Et bien me voilà renseigné ! Je peux démarrer mes futures développement d'applications Web avec Blazor avec une certaine sérénité.








mercredi 17 août 2022

IIS Server how to make Reverse Proxy

Comment faire du Reverse Proxy ? Voilà une technique que j'aimerais savoir refaire avec IIS Server, il s'agit de rediriger des requêtes http arrivants sur un Serveur IIS vers un site installer en localhost, classiquement j'ai un site installé sur mon Serveur IIS derrière l'url http://localhost:8081/dolibarr/ et je souhaite que les requêtes externe http://www.mon-site/dolibarr redirige vers localhost:8081.

Il s'agit de faire de l'URL Rewritting depuis IIS Server.

J'ouvre donc mon IIS Manager je déploie l'arborescence jusqu'à Default Web Site et je clique sur URL Rewrite :

Url Rewriting Reverse Proxy pour donner accès à un Site Web localhost
Comment faire Reverse Proxy pour donner accès à un Site Web localhost

En suite je clique sur Add Rules :

Url Rewriting Reverse Proxy pour donner accès à un Site Web localhost
Reverse Proxy - Dans IIS Server Manager cliquer sur Add rules

Et là j'accède à la possibilité de faire du Reverse Proxy.

Url Rewriting Reverse Proxy pour donner accès à un Site Web localhost
IIS Manager - Accès aux règles de Reverse Proxy

Au passage il est possible que Windows vous demande d'installer un truc car de base il n'est pas possible de faire du Reverse Proxy mais vous installé et :

IIS Manager - Accès aux règles de Reverse Proxy

A partir de là c'est un peu compliqué mais en gros vous définissez des patterns de redirection et entrée (inbound) et en sortie (outbound) et le tour est joué.

IIS Manager - Accès aux règles de Reverse Proxy Inbound Rule

Si vous cliquez sur les éléments de l'aide vous avez tout pour écrire vos patterns d'url rewriting.

IIS Manager - Accès aux règles de Reverse Proxy Inbound Rule

Avouez que là nous sommes dans la magie de l'IIS Server Management en faisant de l'url rewritting en reverse proxy.

Cette solution vous aura aidé dans votre pratique professionnelle, n'hésitez pas à me laisser votre commentaire.

Vous souhaitez en savoir plus sur l'Url Rewriting mettez un commentaire aimable en bas de ce post avec une adresse email valide pour que l'on échange sur ce sujet.


jeudi 24 septembre 2020

Déployer dans l'Azure sur IIS avec ASP.NET Core et SQL Server

En fait les derniers articles font référencent à cette problématique de déploiement dans l'Azure avec ASP.NET Core, c'est une série de problèmes tout à fait nouveaux !

Avec, allez pourquoi pas, une problématique de plus :


Mais là encore pas de solution très simple ... Le grand fautif cette fois c'est le Web Server IIS et la façon dont il traite ASP.NET Core qu'il considère comme un étranger avec de mauvais gène. Ce qui m'interpelle, c'est que quand je fais tourner mes applications avec Kestrel cela fonctionne mais dès que je passe à IIS c'est la cata !

Publish dans l'Azure

Du coup, je retourne dans ma machine de DEV pour tenter de peaufiner les logs afin de comprendre. Et puis je clique sur le bouton Publish (bouton droit sur le projet -> Publish).

Publish dans l'Azure avec IIS
Publish dans l'Azure avec IIS - An Error has occured

Oh bas mince alors, ça commence vraiment mal ! En plus c'est très décevant car ça fait longtemps que je ne suis pas venu ici (publier depuis ma machine de Dev) et c'est très pénible d'avoir à se remémorer tout cela car ce n'est pas très intéressant.

Des histoires de sécurité sur des serveurs qui sont dans l'Azure donc qui me coûtent chers. Et soit disant que je ne devrait pas truster ce serveur, un comble car c'est le mien de Server !

Solution

Alors la solution est dans l'édition de la connexion Publish comme ceci :

Validate Connection

C'est navrant ! Bref, je vais peut être pouvoir publier ...

Bon et maintenant que j'ai mes logs ... Je m’aperçois que quand j'ai déployé, le fichier le fichier appsettings.production.json est créé automatiquement ... 

Et quand j'exécute mon site avec IIS, je suis en développement ...

Pour passer en production, je décide de mettre "production" dans le fichier : Web.config


C'est curieux avec Kestrel le site passe automatiquement en production, avec IIS, il faut modifier le Web.config, j'ai perdu un peu de temps mais je progresse. 

Grrrr !!!

Et si vous lisez ceci, j'espère que vous aussi vous progressez, n'hésitez pas à me laisser votre commentaire.

mercredi 26 août 2020

The setup for this installation of Visual Studio is not complete

Je ne comprends pas comment les ingénieurs de Redmond peuvent encore laisser passer ce genre chose tout à fait insupportable. J'ai une machine de développement installée avec Visual Studio Community 2019, je ne l'ai pas faite fonctionner depuis quelques temps, environ un mois peut être un mois et demi même et Poufff !

Au moment de redémarrer : BOUM !!!

Visual Studio - The setup for this installation of Visual Studio is not complete

Impossible d'exécuter Visual Studio, de quoi parle t-il ? Je n'ai pas fait d'installe, j'ai encore moins laissé cette machine avec un installe incomplet !

Je ne peux pas en être certain mais je pense que, comme cette machine est dans le cloud, et comme ces derniers temps quand j'utilisais VS et qu'il me proposait une mise à jour, je cliquais NON ! Il faut dire que j'avais autre chose à faire ... Dans le cloud c'est facile de forcer la mise à jour de la machine et surtout de la planter.

Ce n'est  pas admissible, j'ai client à satisfaire dans la journée et voilà que mon Visual Studio est cassé !

Comme indiqué, je lance l'exécution de Visual Studio Installer ... Avec un peu d’appréhension. Vais-je arriver à réparer mon installation de Visual Studio où vais-je devoir indiquer à mon client qu'il va falloir qu'il attende !

Visual Studio Installer - Please update Visual Studio Installer before proceeding

Je ne sais pas vous, mais moi j'ai comme l'impression que je n'ai pas le choix ;-) En gros Visual Studio me propose la mise à jour du metteur à jour, c'est fort non ?

Je clique donc sur le bouton Update

Update Visual Studio Installer
Update Visual Studio Installer

En suite, il s'exécute ....

Et BOOOUUUMMM !!!

Visual Studio Installer - Setup Failed !
Visual Studio Installer - Setup Failed !

Du coup, il ne me reste plus qu'une option, cliquer sur View problems

Et ARRRGGGGGS !!!

Visual Studio Installer - Sorry, something went wrong !
Visual Studio Installer - Sorry, something went wrong !

Ça fait beaucoup d'erreurs, remarquez en même temps ils s'excusent c'est déjà ça.

Mais ce n'est véritablement pas, dans un monde compétitif, admissible. Si cet idiot d'installeur s'est pris les pieds dans le tapis, la moindre des choses c'était de remettre tout ça comme avant en état de fonctionnement.

Il ne me reste plus qu'à cliquer sur le bouton : More troubleshooting tips

Et là ... c'est le drame ... Résolution des problèmes d’installation et de mise à niveau de Visual Studio. 

Réparation de l'installation de la mise à jour ratée

Pour ma part, je vais directement à l'étape 4 :

Étape 4 : supprimer le répertoire Visual Studio Installer pour résoudre les problèmes de mise à niveau

1. Fermez le programme d’installation de Visual Studio.

2. Supprimez le répertoire du programme d’installation de Visual Studio. En règle générale, le répertoire est C:\Program Files (x86)\Microsoft Visual Studio\Installer.

3. Exécutez le programme d’amorçage du programme d’installation de Visual Studio. Vous pouvez trouver le programme d’amorçage dans votre dossier Téléchargements sous un nom respectant le modèle vs_[Visual Studio edition]__*.exe.

Exécution du programme d'amorçage :

Visual Studio Installer - Programme d'amorçage
Visual Studio Installer - Programme d'amorçage

Et l'installeur me propose alors une mise à jour :

Visual Studio Installer - Update available
Visual Studio Installer - Update available

Je clique sur le bouton Update

C'est aussi long qu'une installe complète mais au bout du processus, Visual Studio Installer me propose :

Visual Studio Réparation de mon installation
Visual Studio Réparation de mon installation

Je clique sur le bouton Launch

Un peu fébrile car je viens de perdre une bonne heure ... Mais ça  y est mon installation de Visual Studio est réparée.

Si je prends note de tout ce processus, c'est parce que, croyez moi mais quand je clique sur le bouton de mon Visual Studio et qu'il ne se lance pas, je ne sais pas du tout ce que je vais trouver ! 

Il est bien possible que ce problème vous fasse perdre beaucoup plus de temps. Que l'installe n'arrive pas à réparer et que vous deviez tout désinstaller ... proprement, c'est à dire en trouvant les répertoires les fichiers à supprimer ceux que la désinstallation n'a pas pu effacer ... à la manière de la réinstalle d'IIS.

Donc cette fois, je suis plutôt chanceux ...

Vous avez galéré comme moi, n'hésitez pas à me laisser votre commentaire.

System.Security.Authentication.AuthenticationException: The remote certificate is invalid according to the validation procedure.

Voilà encore un petit problème à résoudre ...

Le bonne réponse est Ici :

limilabs - The remote certificate is invalid according to the validation procedure

Mais alors tout en bas ... tout en bas de l'article.

vendredi 21 août 2020

Déployer dans l'Azure - Web Management Service - Stopped by SSL Certificate

Cause SSL Certificate is broken ! Pas mal celui là, j'ai du supprimer le WMSvc Certificate pour installer le mien. J'en avais marre que cet idiot de googoole me propose ce certificat à la place du mien lorsque je browsais mes sites en https ...

Et du coup, je ne peux plus déployer dans l'Azure sur ma machine virtuelle ! Vous ne voyez pas le rapport, le voici dans le journal des événements :

Log Name:      Application
Source:        Microsoft-Windows-IIS-IISManager
Date:          7/21/2020 1:12:05 PM
Event ID:      1007
Task Category: None
Level:         Error
Keywords:      Classic
User:          N/A
Computer:      XXX-00X
Description:
The description for Event ID 1007 from source Microsoft-Windows-IIS-IISManager cannot be found. Either the component that raises this event is not installed on your local computer or the installation is corrupted. You can install or repair the component on the local computer.

If the event originated on another computer, the display information had to be saved with the event.

The following information was included with the event: 

IISWMSVC_STARTUP_UNABLE_TO_READ_CERTIFICATE

Unable to read the certificate with thumbprint 'bea251c156b5a4b3eb5d1189ba86502b0b26a496'.  Please make sure the SSL certificate exists and that is correctly configured in the Management Service page.

Process:WMSvc
User=NT AUTHORITY\LOCAL SERVICE

Je sais c'est un peu technique mais le sujet qui nous intéresse c'est ; le Certificat SSL du Web Deploy de Microsoft ... et si vous le supprimez que se passe t-il ? GRRRrrr ! Et je vais vous corriger cette erreur.

Il me semble qu'une bonne part de lecture se trouve Ici pour fixer les idées voici une première page à lire attentivement :

Microsoft - Vue d'ensemble sur le déploiement de projet d'application Web pour Visual Studio et ASP.NET

Et en fait la meilleure et la solution se trouve Ici :

SuperTekboy - Web Management Service (WMSvc) could not be started: 2147483640

Bon alors on n'a pas de "Serveur Exchange" ... mais ce n'est pas grave, on peut s'en sortir sans. En gros il s'agit de créer un "self-certificate" de le nommer correctement :

WMSvc-NOM-DE-MACHINE

et de l'appeler au bon endroit.

J'ai supprimé le certificat SSL WMSvc - car je pensais qu'il ne servait à rien Grrrr.

Voilà, nous venons de réparer un Web Deploy qui ne fonctionnait plus suite à la suppression du Certificat SSL : WMSvc ...

Je pars à la plage, j'en ai marre de ces conneries ...

mardi 18 août 2020

Créer une application Web API RETSful HTTP

C'est quoi une application Web API RESTful HTTP ? Et quelles différences il y a-t-il entre ASP.NET Framework et ASP.NET Core pour ce type d'application ?

C'est ce que je vais essayer de décrire dans ce post. Déjà créons ces deux template d'application avec Visual Studio 2019.

Un peu de lecture : JDN - C'est quoi RESTful ?

Créer une application ASP.NET Standard RESTful HTTP

Voici l'écran que nous propose Visual Studio Community 2019:

Create an ASP.NET Web Application - Web API

Cherchons un peu de doc sur les applications ASP.NET Web API, je trouve un article intéressant :

TutorialsTeacher - ASP.NET Web API Tutorials

Une application ASP.NET Web API peut être accéder par n'importe quel type de client y compris les appareils mobiles tout se passe dans l'url.

Voici la structure de l'application :

ASP.NET Web API - Structure

Avec le contenu de quelques fichiers remarquables ...

Global.asax.cs


ASP.NET Web API - Global.asax

Controllers ValueController.cs


ASP.NET Web API - ValuesController dérive de l'ApiController

Dans le Get, je modifie le valeur "value" par "Ici c'est ma valeur".

Modification de "value" par "Ici c'est ma valeur"


Je lance une exécution de l'application :


ASP.NET Web API - Exécution de l'application

Et quand je requête l'url :

https://localhost:44398/api/values/5

ASP.NET Web API - Requête de l'url : api/values/5

Ce qui est bien le résultat escompté. J'ai mis 5 dans la requête le code m'indique que j'aurais pu mettre n'importe quelle valeur du paramètre id de Get( in id ) cela n'aurait rien changé c'est simplement une préparation pour l'avenir.

Tout ceci est paramétrable les "routes" sont configurables dans le fichier RouteConfig.cs :

ASP.NET Web API - RouteConfig.cs

Bon, je dirais que le plus embêtant, c'est que c'est du Razor ...Grrr

Ce qui est amusant et intéressant concernant ce type d'application c'est l"onglet "API" nous avons des pages d'aides concernant l'utilisation de l'API :

ASP.NET Web API - Les Pages d'Aide auto-descriptives de l'API
Si je clique sur la page d'aide concernant le GET api/values/{id} :

ASP.NET Web API - Page d'Aide de GET api/values/{id}
Voilà j'ai fait le tour complet je peux ajouter mon propre controller et gérer les données que je souhaite.

Qu'en est-il des applications ASP.NET Core Web API

Voici l'écran de Visual Studio Community 2019 :

ASP.NET Core Web API

Si je cherche un peu de doc j'arrive ici :


L'exemple n'est pas le même pas besoin, il y un controller on va dire qui retourne des objets structurés: 

ASP.NET Core Web API - WeatherForecastController
Qui fait que quand on requête l'url :

https://localhost:<port>/WeatherForecast

l'application nous rend une liste l'objet de type WeatherForecast.

La suite du didacticiel nous fait ajouter un objet TodoItem et son utilisation dans une base de données grâce à l'EntityFrameworkCore. Je vous conseille également l'utilisation de Postman qui un outil qui permet de tester les API c'est très complet.

Voilà c'est tout pour les applications ASP.NET Core RESTful. Nous venons de faire un tour rapide des applications Web API avec Visual Studio 2019.

Rien de très nouveau sous le soleil.

mercredi 22 juillet 2020

IIS Certificate Management - Comment installer un certificat SSL sur mon Site Web derrière IIS ?

C'est un vrai scandale cette histoire de certificats, cela permet à quelques uns, mal intentionnés de faire de l'argent. Mais pensez-vous réellement que les vrais hackeurs seront empêchés par ce genre de pratiques ? Je crois que non, il y a des sites cachés derrières des certificats SSL qui sont malveillants avec ou sans SSL.

SSL - l'Internet pour les Nulls
SSL - l'Internet pour les Nulls

C'est toujours la même chose sur les Internets, des organismes essayent de vous faire croire que vous êtes protégé et en profite pour vous prendre de l'argent. Sur les Internets la meilleure protection c'est vous !

Voici le site pour les dummies :

G1Site - Comment installer un certificat SSL sur votre site Internet ?

C'est bien pour les dummies cela reprends tout depuis le début très complet mais il n'y a pas de véritable solution, allez voir votre hébergeur ! Et à la fin il prônent les avantages et à mon avis ...  

Et j'apprends qu'il y a une solution Open Source ... Let’s encrypt, le certificat SSL gratuit open source.

Curieux non ...

Et sinon Ici vous pouvez vérifier ci votre certificat est "valide"

SSL Market - Vérificateur SSL/TLS - sodevlog

Ils vous propose de vous vendre un certificat pour 99 $ rien de moins ...

Et sinon, je cherche Azure Certificat SSL  

Microsoft - Ajouter un certificat TLS/SSL dans Azure App Service

Super sujet ... Intéressant ... 

Jusqu'au moment où j'installe Cerbot

certbot-beta-installer-win32.exe

alors c'est quoi le : .well-known/acme-challenge/

SysNove - Utilisation pratique de let's encrypt (avec acme-tiny)

Et sinon la mmc avec composant logiciel enfichable pour voir tous les certificats :

Afficher tous les certificats installés sur votre machine Windows

Comment certifier SSL mon site web ?

Je trouve également

https://certbot.eff.org/lets-encrypt/windows-other.html

installer cerbot pour windows

certbot Problem binding to port 80: Could not bind to IPv4 or IPv6.

Je vais voir namebay, ils me disent de "coller ma 'Certificate Signing Request' ou 'Requête de Signature de Certificat'. En faites dans IIS c'est une CR Certificate Request ...

Créer un CSR pour votre hébergeur
Créer un CSR pour votre hébergeur

Au cours de mes différentes lectures, j'ai appris que le Cn ou Common name devrait certainement être le nom de domaine que l'on souhaite certifier donc ma CSR :

Rédaction de ma CSR pour la certification au prêt de mon hébergeur
Rédaction de ma CSR pour la certification au prêt de mon hébergeur

Oups, oups, oups ... petit sueur froide ... je ne savais pas que j'avais la possibilité de déterminer la longueur de la clef !!!

Allons y ... on recommencer tout

Création d'une CSR détermination de la longeur de la claf ...

Me voilà à payer 42 Euros / an  pour faire certifier mon site ...

et mais sous-domaines ... ?

Certification SSL pour sous-domaine ?
Certification SSL pour sous-domaine ?

Tout cela ressemble bien à une escroquerie ...

Mon Certificat n'est pas valable pour les sous-domaines ?!
Mon Certificat n'est pas valable pour les sous-domaines ?!

Oui c'est une escroquerie car j'ai acheté une machine dans le Cloud de Microsoft, j'ai commandé et payé les noms de domaines et sous domaines chez Namebay, j'ai une gestion des DNS de Namebay qui fait pointer mes sous-domaine vers mon serveur Azure Microsoft.

Tout ceci est parfaitement légale et parfaitement professionnel, il n'y a aucune raison de faire appel à un tiers de confiance pour certifier mon activité.

LINUXFR.org - SSL, et l'escroquerie continue

Et voici une autre discussion sur les certifications les moins chères.

JeuxOnLine - Arnaque SSL ?

C'est donc un vrai sujet et une vraie arnaque, sans aucun doute. Me voilà en train de payer pour certifier mon site web que j'ai acheté à un FAI !?

Et me voilà avec une nouvelle question : Comment certifier SSL mes sous domaines ?

WP channel - Le point sur les certificats SSL obligatoires en 2017

https://letsencrypt.org/fr/getting-started/

https://certbot.eff.org/lets-encrypt/windows-other
Je suis à deux doigt de réussir, je passe toutes la certife, j'ajoute du code dans mon application pour rediriger les requêtes /.well-known/acme_challenge

certbot me génère les fichiers .pme j'utilise openSSL pour créer un .pfx mais au moment de faire l'Import depuis IIS -> ServerCertificates :

Boum !

A fatal error occurred when attempting to access the TLS server credential private key. The error code returned from the cryptographic module is 0x8009030D. The internal error state is 10001.


Error Cryptographiqe

Alors sinon ce matin, je repars à l'attaque et je vais là :

NetoMeter Blog - Letsencrypt Windows Client: How to Install Let’s Encrypt Free SSL Certificates on Windows Server

Je me dis chouette super un client letsencrypt pour Windows Server c'est exactement ce qu'il me faut ...  et puis ils donnent une build de letsencrypt ... je download, j'exécute .... et boum ... End Of Life. Moi aussi je suis au bout de ma vie et un peu scandalisé aussi ...


End of Life Plan for ACMEv1

Je suis de retour sur le site :

https://github.com/win-acme/win-acme

Oh bas mince alors, s'il faut que j'installe une chaîne de développement Visual Studio pour installer un Certificat SSL sur mon serveur, ça n'a pas beaucoup de sens ...

GGGGGGRRRRRRRrrrrrrrr !!!!

Créer un certificat SSL pour votre site web avec IIS Server

Bon ... il y a t-il UNE VRAIE SOLUTION dans tout cela ? 

Oui, elle est Ici : 

https://www.win-acme.com/

Download 2.1.9 et exécution en mode "Run as administrateur" de "wacs.exe" dans le répertoire dézippé. 

Une fenêtre DOS s'affiche dans laquelle vous pouvez gérer tous vos certificats SSL pour tous vos sites installé derrière le server IIS.

Le prérequis avant l'exécution de la Demande de Certificat, c'est d'avoir tout bien installé sur IIS ... notamment les bindings (http port 80, https port 443) et ça passe tout seul ... c'est wacs.exe qui découvre ce que vous avez installé derrière IIS Server et qui vous propose de gérer les Certificats SSL associés.

Mais avec tout ce que l'on a appris ici, toute cette Daube autour de la certification SSL pour Https, quel soulagement !

Et là, c'est LA solution pour certifier SSL un site Web sur un serveur IIS ... 

Merci d'avoir suivi mes pérégrinations à travers la certification SSL pour un site Web. N'hésitez pas à laisser votre commentaire.