Dans cet article, nous allons présenter Visual Studio Codespaces et réaliser un projet concret dans le Cloud.

Vue d’ensemble

Visual Studio Codespaces (anciennement Visual Studio Online) est un environnement de développement dans le Cloud permettant de développer, exécuter et déboguer des applications avec n’importe quel appareil connecté à internet. La tendance actuelle montre que de plus en plus d’équipes travaillent à distance, ce qui rend assez difficile le développement (mise en place de l’environnement, connexion à des ordinateurs distants, etc.). Comme l’IDE est dans le Cloud, nous n’avons plus besoin de nous soucier de la performance de la machine locale du développeur ni de l’environnement, car il peut rapidement être mis en place et/ou préconfiguré à l’avance.

Avantages du Cloud

Les avantages de Visual Studio Codespaces sont les suivants :

• On peut dimensionner les environnements selon nos envies : Si on a besoin de beaucoup de puissance, il est possible de configurer une instance avec 16 Go de RAM. Dans le cas contraire si une application demandant une faible consommation de ressources doit être réalisée alors on peut utiliser une instance avec 4 Go de RAM.

• Les environnements sont suspendus si aucun travail n’est effectué dessus, c’est un énorme plus, car on paye uniquement au temps d’utilisation. Enfin, avec la grille des tarifs l’estimation des coûts se fait plus facilement.

• Comme ce n’est plus l’ordinateur qui gère les processus de développement, mais Visual Studio Codespaces sur le Cloud, le PC a plus de puissance pour le reste (navigation web, applications tierces, autre développement en local, etc.).

Implémentation

Un compte Microsoft et une souscription Azure sont nécessaires pour effectuer la mise en place de Visual Studio Codespaces.

1. Se connecter

Connectez-vous avec la page de login pour accéder à Visual Studio Codespaces.

2. Créer un plan

Une fois connecté, il faut créer un plan en cliquant sur Create Codespace.

 

Renseignez les informations pour le Billing Plan (Subscription, Location, Plan Name, Resource Group).

Une fois le plan créé, nous pouvons générer le Codespace.

3. Créer un Codespace

Pour créer un nouveau Codespace, complétez les informations du formulaire. Pour notre exemple, nous n’avons pas besoin de renseigner le champ Git Repository.

Bravo ! Vous venez de créer votre premier Codespace.

4. Travailler dans l’éditeur du navigateur

Après la création de votre Codespace, l’IDE Visual Studio Codespaces s’ouvre dans le navigateur.

Tout d’abord, nous allons générer un nouveau dossier TestWebApp dans le Workspace.

Faites un clic droit sur TestWebApp, puis Open in Integrated Terminal pour ouvrir une console dans le dossier TestWebApp.

Une fois la console ouverte, nous allons créer une application ASP.NET Core MVC en ligne de commande. Tapez la commande suivante dans le terminal :

dotnet new mvc

Félicitations ! Vous venez d’initialiser votre première application avec Visual Studio Codespaces !

5. Installer l’environnement

Pour pouvoir exécuter l’application, nous devons configurer l’environnement de développement. Dans le Menu Extension (CTRL+SHIFT+X), recherchez C# puis installez l’extension.

Une fois l’extension C# installée, il faut recharger Visual Studio Code en appuyant sur Reload Required.

Un pop-up va apparaître pour configurer l’extension C# dans le workspace. Sélectionnez oui.

6. Exécuter le projet

Vous pouvez désormais lancer le débogage en sélectionnant l’onglet Run (CTRL+SHIFT+D) et en appuyant sur le bouton Start Debugging.

 

Visual Studio Codespaces vous redirige vers une nouvelle page pour déboguer votre application. Comme nous n’avons pas configuré la politique de redirection https, nous n’avons pas accès à la visualisation de notre application. Cependant elle est bien exécutée.

 

Nous allons arrêter le débogage pour faire fonctionner la redirection. Pour arrêter l’application, cliquez sur le carré rouge.

Pour notre exemple nous allons commenter la ligne app.UseHttpsRedirection(); dans le fichier Startup.cs. Cependant dans un projet réel, il faudra configurer l’https.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    //app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

Et dans le fichier .vs/lauch.cs, nous allons remplacer                 "pattern": "\\bNow listening on:\\s+(https?://\\S+)" par                 "pattern": "\\bNow listening on:\\s+(http?://\\S+)" pour écouter sur le port http.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/TestWebApp/bin/Debug/netcoreapp3.1/TestWebApp.dll",
            "args": [],
            "cwd": "${workspaceFolder}/TestWebApp",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(http?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}

Désormais lorsque que vous lancez l’application, elle doit s’ouvrir correctement.

Nous allons désormais mettre un point d’arrêt dans le contrôleur Home pour tester le débogage.

Lorsqu’on rafraîchit la page, on s’arrête sur le breakpoint.

Comme vous pouvez le voir, la compilation et le débogage fonctionnent directement dans le Cloud.

Bravo ! Vous venez de lancer en mode débogage votre première application Web avec Visual Studio Codespaces !

Conclusion

Visual Studio Codespaces est un service permettant de créer des applications directement dans le Cloud. Lorsqu’un développeur a un unique projet à gérer, sur une longue période et avec des ressources locales correctes, il est alors souvent plus adéquat de mettre en place l’environnement de travail sur son poste. L’intérêt de Visual Studio Codespaces est alors moindre dans cette situation. Cependant dans les différents cas suivants, assez fréquents, il pourrait être plus intéressant à utiliser qu’un environnement local :

• En environnement principal, lorsque les ordinateurs des développeurs manquent de ressources pour faire fonctionner le projet,
• dans le cas de la maintenance de plusieurs projets ciblant des environnements différents et/ou nécessitant des changements de contexte technique et des dimensionnements fréquents,
• pour inclure brièvement et ponctuellement un nouveau développeur interne ou externe au cours du projet,
• pour élaborer rapidement des preuves de concept et/ou se former sans déstabiliser son environnement de projet courant,
• dans les cas de création ou de modification de composants .NET ciblés lorsqu’on travaille principalement avec d’autres technologies et d’autres éditeurs que Microsoft (Java, Unity, Eclipse).

Pour finir, l’expérience utilisateur reste inchangée, car Codespaces est également accessible grâce à une extension sur Visual Studio Code ainsi que sur Visual Studio 2019 en private Preview.

Sources

https://devblogs.microsoft.com/visualstudio/announcing-visual-studio-online-public-preview/

https://stackoverflow.com/questions/51385671/failed-to-determine-the-https-port-for-redirect-in-docker

https://docs.microsoft.com/fr-fr/visualstudio/codespaces/overview/what-is-vsonline

https://gunnarpeipman.com/aspnet-core-visual-studio-codespaces/ https://azure.microsoft.com/fr-fr/pricing/details/visual-studio-online/

https://docs.microsoft.com/en-us/aspnet/core/security/enforcing-ssl?view=aspnetcore-2.1&amp%3Btabs=visual-studio&tabs=visual-studio#how-to-setup-a-developer-certificate-for-docker