Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Les projets ASP.NET 5 – partie 1/4

1 commentaire

Important 28/11/2016: Remise à jour et beaucoup améliorations de l’article d’origine. La version testée est Asp.Net Core 1.0

 

Le nom de l’outil a évolué de ASP.NET vNext vers ASP.NET 5 à la date de rédaction de l’article d’origine. Maintenant le nom officiel est ASP.NET Core.

Ce qui démontre une fois de plus l’incroyable compétence de Microsoft Pour trouver des noms complètement ridicules à leurs outils…

Installer le SDK

Commencez par vérifier que vous avez bien installé VS 2015 Update 3.

2016-11-28_11-01-52

Si vous avez besoin d’installer un SDK .Net, je vous suggère ce lien qui vous donnera tout ce dont vous avez besoin en fonction de votre version de VS:

http://getdotnet.azurewebsites.net/target-dotnet-platforms.html

 

La suite va concerner Windows, mais Core est multiplateforme, vous pourrez trouver facilement des tutos:

https://docs.microsoft.com/en-us/dotnet/articles/core/tutorials/index

https://docs.microsoft.com/en-us/aspnet/core/tutorials/

 

Un petit test rapide en ligne de commande. Vous commencez par créer un projet console de démo:

dotnet new -t web

Une fois créé vous restaurez les packages Nuget:

dotnet restore

Puis vous lancez:

dotnet run

Vous devriez voir ceci apparaître:

2016-11-28_11-14-33

 

Découverte de la nouvelle architecture projet

 

Examinez la forme que prend un projet Core tel que généré automatiquement par VS 2015:

2016-11-28_10-30-02

Validez et laissez VS construire le projet:

2016-11-28_11-18-16

 

Cela n’a quasiment rien à voir avec ce que nous connaissons.

Il ne s’agit pas d’une évolution du modèle de projet traditionnel, mais d’une toute nouvelle architecture que je vais appeler Core dans cet article. Je suis très incertain sur le nom officiel qui lui est donné.
Alors pourquoi un tel bouleversement maintenant?
Comme nous le verrons, cette nouvelle architecture a été préparée avec WebApi et son architecture modulaire basée sur OWIN.
La raison profonde est le besoin de développer du code multi plateforme et plus seulement Windows, l’arrivée de nouveaux périphériques comme les tablettes ou les objets connectés. Le modèle traditionnel devient largement inadapté, alors place à Core et je pense que vous n’allez pas le regretter.
Cet article va vous faire une visite guidée de tout ce qui change. Je n’écris pas un bouquin, mais un tuto, un tuto d’une soixantaine de pages tout de même! Je ne vais donc pas forcément entrer dans tous les détails, mais vous donner les clefs pour être autonome sur des projets Core et vous lancer sans difficultés.
Retenez ces 5 clefs:
  1. Projet orienté structure, plus de *.csproj (enfin ça se discute, j’en reparle plus loin)
  2. On sépare les ressources du projet web proprement des ressources compilables qui vont permettre de le construire. Le répertoire racine n’est plus … la racine du projet
  3. Nativement multi plateforme
  4. Nuget comme citoyen de premier plan
  5. Unification de MVC et WebApi dans une architecture OWIN: System.Web disparaît et bon débarras!
Je commence par la présentation de l’architecture Core et ses fichiers clefs.
Nous allons ensuite construire de zéro une application Web très peu ambitieuse:
  • Une vue
  • Un contrôleur MVC
  • Un contrôleur WebApi
  • Un JavaScript
Nous verrons comment s’intègrent à Core, Bower, Gulp, Grunt, Node… et comment s’en servir pour configurer et déployer le projet.
Avant de se lancer je conseille de lire cet article:
https://amethyste16.wordpress.com/2015/11/13/larchitecture-asp-net-5/
Et c’est parti!

L’Architecture Core

Examinons tout d’abord un projet Core complet créé par VS.

Projet orienté structure

Faites « Open Folder in File Explorer » au niveau de la solution et observez:

2016-11-28_11-24-32

 

La structure de répertoire est la même que celle du projet, il n’y a pas de répertoires virtuels.

Ouvrez le répertoire wwwroot et créez un répertoire, Admin par exemple. Le projet est automatiquement mis à jour, rien de spécial à faire depuis VS:
as3
On peut également ajouter des vues dynamiquement, elles seront compilées à la volée.
Le répertoire src est celui qui va contenir les projets de la solution, on trouve déjà WebApplication5.
Le nom de ce répertoire est celui par défaut, il peut être redéfinit dans le fichier global.json de la solution:
as4
Ce fichier déclare les configurations de niveau solution, celles communes à tous les projets.
Le paramètre projects indique que lors de la compilation, il devra rechercher le code source dans les répertoire src et test (qui pour l’instant n’a pas encore été créé).
Par défaut Core utilise JSON. D’une façon général, si vous avez besoin de récupérer le schéma d’un fichier de configuration JSON Core, c’est simple.
  • Vous ouvrez le fichier dans VS
  • Vois suivez le lien trouvé ici:
as5

Un nouveau répertoire racine: wwwroot

Le répertoire racine est maintenant wwwroot.
Core sépare clairement ce qui sera vu par le serveur web de ce qui est le code à compiler, la configuration et autres artefacts.
C’est donc ici que l’on déposera les fichiers html statiques, les JavaScript et autres CSS:
2016-11-28_11-31-33
On pourrait également ajouter un fichier web.config. Ce fichier ne contient alors plus les configurations du projet, mais celles du serveur web.
Faisons un test. Posez dans wwwroot le fichier Hello.html suivant:
<DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
</head>
<body>

Hello Amethyste

</body>
</html>
Vous constaterez que l’url:
~/hello.html
Affiche:
as7
Vous vérifierez facilement que si le fichier est déplacé en dehors de wwwroot ou un de ses répertoires, ils n’est plus accessible.
Si vous avez besoin de référencer un des artefacts de wwwroot depuis une vue par exemple, la syntaxe sera la suivante:
as8
Juste un tilde (~).
Comment fait VS pour déterminer le modèle de lancement de notre application, le numéro de port par exemple?
Il existe pour cela le fichier LaunchSettings.json qui se trouve ici:
 as9
Le contenu de ce fichier ressemble à celui-ci:
 2016-11-28_11-33-34
Note: les paramètres contenus dans ce fichier ne sont utilisés QUE par Visual Studio
Ce fichier est organisé par profils de lancement (section profiles), ceux que l’on trouve ici:
 2016-11-28_11-35-21
 On n’est pas obligé de modifier le fichier à la main, on peut le faire dans les propriétés du projet:
 2016-11-28_11-38-06
Le panneau DEBUG des propriétés du projet rassemble le contenu de notre fichier.
Le premier profil lance le projet dans IISEXPRESS. C’est le profil par défaut. Le suivant (webapplication5) lance le projet dans Kestrel dont je reparlerai un peu plus loin.

Le fichier project.json

Note: il semble que Microsoft soit en train de faire marche arrière. Les fichiers project.json vont disparaître et on va revenir à des projets *.csproj améliorés:
Je ne vais pas aborder ce point dans ce tuto.
Comme le nom le suggère il s’agit d’un fichier JSON. C’est un fichier de configuration pour le projet. Le contenu dépend de votre projet bien entendu, mais sur le mien on lit ceci:
2016-11-28_11-40-33
La section la plus importante est dependencies qui contient les dépendances du projet. Ces dépendances sont des packages Nuget.
Essayez par exemple d’ajouter un nouveau package comme NewtonSoft.Json depuis la nouvelle console Nuget:
as14
Le fichier change:
as15
Les fichiers de configuration (et pas seulement project.json) fonctionnent tous avec IntelliSense.  On pourrait donc également ajouter une dépendance à la main.
demonuget
Essayez de saisir  » (double quote) dans la partie dependencies, une première liste déroulante s’ouvre avec une première liste de packages Nuget.
Celle-ci se complète au fur et à mesure de votre saisie, il n’y a qu’à faire TAB.
as16
Une fois le nom du package Nuget sélectionné, entrez : (deux points), la liste des versions connues du package s’affiche. Sélectionnez chaîne vide («  ») pour réclamer la dernière version.
as17
En principe VS est suffisamment intelligent pour charger également les dépendances, sinon vous pouvez toujours lancer un Restore Package depuis le menu contextuel ou le panneau d’administration Nuget.
as19
Et tout rentre dans l’ordre.
Une alternative est d’utiliser l’outil en ligne de commande dnu et lancer depuis le répertoire de l’application:
dnu restore
Voici une vidéo de présentation intéressante qui détaille la différence en dnu, dnvm et dnx:
Spoiler: Accent indien, mais j’ai entendu pire!

Packages et runtimes CLR

Plaçons un point d’arrêt dans l’action par défaut du contrôleur (Index). Une fois atteint faites Debug/Windows/Modules. Une fenêtre similaire doit s’ouvrir:
2016-11-28_12-23-16

 

Il s’agit des modules chargés en mémoire. Repérez le chemin de ces modules. Un répertoire .nuget qui dépend de votre contexte utilisateur apparaît.

 

2016-11-28_12-25-25

 

Le répertoire packages est celui des packages Nuget. Il n’est plus dans la solution avec les projets Core, nous disposons à la place d’un cache global.

Le point intéressant est de remarquer que même .Net est un package Nuget. Pour le déployer sur une autre machine un simple copier/coller suffit. Core ne s’appuie plus sur le GAC.

Comment passer d’un runtime à l’autre en ligne de commande?
Asp.Net 5 vient avec un outil appelé dnvm.exe dédié à cette tâche. Il n’est pas forcément pas préinstallé par défaut, mais on peut le récupérer sur GitHub:
Dans tous les cas la commande en ligne:
where dnvm
Devrait vous dire si l’outil est présent ou pas.
Et si vous lancez dnvm, une page d’aide doit s’afficher:
as36
Prenez le temps de repérer les différentes commandes. Par exemple:
dnvm list
as37
Envoi la liste des runtimes disponibles et indique celui actuellement sélectionné.
La commande dnvm use est utilisée pour sélectionner un runtime par défaut depuis la ligne de commande et dnvm upgrade récupère la dernière version du runtime.

Ajouter un projet de librairie à la solution

Au moment de la compilation, le compilateur recherche ses références d’abord dans le répertoire src  (voir discussion au début de ce chapitre) et ensuite dans le répertoire des packages Nuget.
Clic droit sur src et on sélectionne Add New project.
Nous avons besoin d’un type de librairie différent du type standard, repérez donc bien la présence de .NET Core:
2016-11-28_12-39-37
C’est important car il va se conformer au modèle de compilation Core et en particulier créer un package Nuget. On valide d’ailleurs facilement qu’il s’agit d’un projet Core en vérifiant qu’il a le même type d’artefacts que le projet Web et en particulier un project.json:
as39
Comme on le voit une librairie DemoLibrairie a été ajoutée, elle devient une dépendance comme les autres. Dans project.json on ajoute ceci:
 2016-11-28_13-24-25
Et notre librairie devient accessible depuis le code du site Web après un éventuel Restore Packages.
On pourrait également faire Add Reference comme jadis:
 2016-11-28_13-26-46

L’écosystème caché de Core

Ce n’est pas directement visible dans les projets, mais l’installation de VS 2015 installe également pas mal d’outils dont nous nous servirons par la suite:
  • NodeJS
  • Git (le client)
  • Gulp
  • Nuget
Le problème est que le PATH n’est pas forcément à jour, du moins dans la version actuelle. Pour faire fonctionner tous le exemples de cet article j’ai du ajouter:
C:\Program Files\Nuget
C:\Program Files (x86)\Git\cmd
C:\Users\<LOGIN>\AppData\Roaming\npm

Bibliographie

Publicités

Une réflexion sur “Les projets ASP.NET 5 – partie 1/4

  1. Très bon tutoriel qui répond à beaucoup de questions, seul bémol, la technologie .NetCore évolue tellement vite que certaines choses ne sont plus d’actualité. le fichier project.json comme tu l’avais stipulé, mais également le fichier Global.json dont je retrouve les éléments dans le fichier caché bin/Debug/netcoreapp1.0/xxx.deps.json. Les bibliothèques de classe n’utilisent maintenant plus le framwork AspNetCore 1.0 mais NetStandatd 1.x. Mais grâce à tes très bonnes explications j’ai pu sans problème m’adapter aux changements et poursuivre ce billet sans être perdu 🙂 merci pour ton travail fastidieux

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s