diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/cover.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/cover.yaml new file mode 100644 index 00000000..3a269b00 --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/cover.yaml @@ -0,0 +1,5 @@ +#title: "" +attribution: "ChatGPT 5.2" +#description: "" +prompt: "This vibrant digital artwork showcases a futuristic scene with a web-based code editor on a laptop surrounded by 3D tech icons in a glowing digital space. The screen displays a dark-themed IDE with highlighted JavaScript code, a terminal running `npm run dev`, and a file explorer, while various tech symbols like a cloud icon, server stacks, and a webpage preview enhance the dynamic scene. +" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/features-codespaces-hero.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/features-codespaces-hero.yaml new file mode 100644 index 00000000..31c1fb15 --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/features-codespaces-hero.yaml @@ -0,0 +1,4 @@ +#title: "" +attribution: "[GitHub](https://github.com/)" +description: "Interface de GitHub Codespaces" +#prompt: "" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/jupyterlab.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/jupyterlab.yaml new file mode 100644 index 00000000..f42f68a6 --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/jupyterlab.yaml @@ -0,0 +1,4 @@ +#title: "" +attribution: "Richard Dern" +description: "JupyterLab avec un notebook python. Capture d'écran personnelle." +#prompt: "" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/ms-visualbasic.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/ms-visualbasic.yaml new file mode 100644 index 00000000..6e8f8050 --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/ms-visualbasic.yaml @@ -0,0 +1,4 @@ +#title: "" +attribution: "[WinWorld](https://winworldpc.com)" +description: "Microsoft Visual Basic 1.0 for Windows" +#prompt: "" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/netbeans.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/netbeans.yaml new file mode 100644 index 00000000..0110d820 --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/netbeans.yaml @@ -0,0 +1,4 @@ +#title: "" +attribution: "[albilu](https://github.com/albilu/netbeansPython)" +description: "Apache NetBeans 17 et son plugin pour python" +#prompt: "" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/openvscode-server.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/openvscode-server.yaml new file mode 100644 index 00000000..98c7a8ef --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/openvscode-server.yaml @@ -0,0 +1,4 @@ +#title: "" +attribution: "Richard Dern" +description: "Capture d'écran personnelle de l'édition de l'article dans openvscode-server." +#prompt: "" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/vim.yaml b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/vim.yaml new file mode 100644 index 00000000..835d3801 --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/data/images/vim.yaml @@ -0,0 +1,4 @@ +#title: "" +attribution: "GPL, " +description: "Vim dans une console : coloration syntaxique, repli et numérotation des lignes." +#prompt: "" diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/cover.png b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/cover.png new file mode 100644 index 00000000..aef7c0cc Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/cover.png differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/features-codespaces-hero.webp b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/features-codespaces-hero.webp new file mode 100644 index 00000000..24444459 Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/features-codespaces-hero.webp differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/jupyterlab.png b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/jupyterlab.png new file mode 100644 index 00000000..96a4b988 Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/jupyterlab.png differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/ms-visualbasic.png b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/ms-visualbasic.png new file mode 100644 index 00000000..01e1f456 Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/ms-visualbasic.png differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/netbeans.png b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/netbeans.png new file mode 100644 index 00000000..3de20e7b Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/netbeans.png differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/openvscode-server.png b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/openvscode-server.png new file mode 100644 index 00000000..ef3344a6 Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/openvscode-server.png differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/vim.png b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/vim.png new file mode 100644 index 00000000..87e0815f Binary files /dev/null and b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/images/vim.png differ diff --git a/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/index.md b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/index.md new file mode 100644 index 00000000..0fa35d6e --- /dev/null +++ b/content/interets/informatique/2025/12/17/developper-dans-son-navigateur/index.md @@ -0,0 +1,326 @@ +--- +title: Développer dans son navigateur +date: 2025-12-17T11:20:34+01:00 +cover: images/cover.png +comments_url: https://com.richard-dern.fr/post/460 +weather: + temperature: 7.55555555555556 + humidity: 94 + pressure: 1024.04392483912 + illuminance: 12345.6 + wind_speed: 0 + wind_direction: 252 + precipitations: false + source: + - influxdb +--- + +Je poursuis la transformation de mon environnement de travail en m'attaquant à un autre outil qui m'est indispensable : l'environnement de développement. +Dans l'[article précédent](/interets/informatique/2025/12/12/piloter-ses-serveurs-avec-un-emulateur-de-terminal-web/), je cherchais un [émulateur de terminal](https://fr.wikipedia.org/wiki/Émulateur_de_terminal) basé sur le web, et mes critères pour un [environnement de développement](https://fr.wikipedia.org/wiki/Environnement_de_développement) (IDE) ne sont pas différents. +Je cherche donc un IDE basé sur le web, qui ne soit pas accessible depuis Internet, et qui me permette de faire tout ce dont j'ai besoin au quotidien. +Son installation doit être native à [NixOS](https://nixos.org/) (pas de conteneurs). + +Il y a toutefois une différence fondamentale avec un émulateur de terminal : un IDE est capable de faire beaucoup plus. +J'ai donc besoin d'un IDE qui, bien que basé sur le web, ne me limite en aucune façon. + +Mon parcours est étonnamment similaire à celui concernant l'émulateur de terminal : peu d'options sont disponibles, une seule coche toutes mes cases, et celle-ci s'accompagne de quelques compromis. +Heureusement, c'est aussi une option pérenne, à laquelle je suis déjà habitué, et les alternatives qui ne répondent pas encore à mes besoins sont en constante évolution. + +Mais, comme pour les émulateurs de terminaux, commençons par plonger dans l'histoire des environnements de développement. + +## Brève histoire des environnements de développement + +Aux débuts de l'informatique interactive, développer un programme a longtemps consisté à alterner édition de texte, compilation, puis exécution, avec des outils séparés. +Ce qui va changer, petit à petit, ce n'est pas seulement l'ergonomie, mais l'idée même d'un environnement de travail où l'éditeur, le compilateur, le débogueur et la documentation finissent par cohabiter. +Ainsi, nous allons voir comment nous sommes passés des éditeurs de code en mode console aux environnements de développement intégrés basés sur le web. + +Notons que l'histoire de la programmation commence bien avant les années 1970 ; elle n'en est pas moins intéressante — au contraire — mais j'ai voulu limiter notre "brève histoire" à des outils encore utilisés aujourd'hui, ou qui résonnent particulièrement chez ceux qui les ont connus. + +### Éditeurs de code en mode console + +Au début des années 1970, sur [Unix](https://fr.wikipedia.org/wiki/Unix), l'édition est d'abord une affaire de lignes et de flux, avec des outils comme [ed](https://fr.wikipedia.org/wiki/Ed_%28logiciel%29), dont une première version est datée de 1971. +Dans la même généalogie, [ex](https://en.wikipedia.org/wiki/Ex_%28text_editor%29) apparaît comme une extension plus puissante de ed, avec une première publication datée du 9 mars 1978. +À partir de 1976, Bill Joy ajoute un mode visuel plein écran, et [vi](https://fr.wikipedia.org/wiki/Vi) devient l'outil emblématique de toute une culture Unix. + +En parallèle, une autre tradition se structure autour de l'extensibilité et de l'édition comme langage. +L'ancêtre d'[Emacs](https://en.wikipedia.org/wiki/Emacs) naît en 1976 comme un ensemble de macros pour le langage [TECO](https://fr.wikipedia.org/wiki/TECO), puis l'idée se consolide avec [GNU Emacs](https://www.gnu.org/software/emacs/), dont la branche principale est diffusée à partir de 1985. + +Dans les années 1990, ces deux mondes continuent d'évoluer sans se remplacer. +[Vim](https://fr.wikipedia.org/wiki/Vim) (première version 1991) modernise l'héritage de vi tout en gardant l'efficacité du mode texte. +Et des éditeurs comme [GNU nano](https://fr.wikipedia.org/wiki/GNU_nano) (1999) ciblent un usage plus immédiat, notamment pour modifier rapidement un fichier sur une machine distante. + +![](images/vim.png) + +### Environnements de développement spécifiques + +Sur micro-ordinateurs, l'intégration arrive souvent par la contrainte matérielle. +Quand la mémoire est rare et les disquettes lentes, regrouper éditeur et compilateur devient un avantage décisif. +C'est l'époque d'outils comme [Turbo Pascal](https://fr.wikipedia.org/wiki/Turbo_Pascal), dont la première version PC apparaît en 1983, et qui popularise l'idée d'un cycle écrire/compiler/exécuter dans une seule interface. + +Au début des années 1990, l'intégration se déplace vers l'interface graphique et la création d'applications fenêtrées. +[Visual Basic](https://fr.wikipedia.org/wiki/Visual_Basic) 1.0 est présenté en mai 1991, avec un concepteur de formulaires qui rend la programmation événementielle très accessible. +En 1995, [Delphi](https://fr.wikipedia.org/wiki/Delphi_%28langage%29) arrive avec une approche [RAD](https://fr.wikipedia.org/wiki/Développement_rapide_d%27applications) comparable, et s'impose comme un environnement complet pour le développement sous Windows. + +![](images/ms-visualbasic.png) + +Dans les années 2000, ces environnements spécifiques s'alignent sur des plateformes entières. +[Xcode](https://fr.wikipedia.org/wiki/Xcode), publié initialement fin 2003, devient la porte d'entrée principale vers l'écosystème Apple. +Et [Android Studio](https://fr.wikipedia.org/wiki/Android_Studio) est annoncé le 15 mai 2013, puis passe en version stable 1.0 le 8 décembre 2014, en se substituant progressivement à la filière Eclipse ADT. + +### Environnements de développement généralistes + +À mesure que les projets grossissent, l'enjeu n'est plus seulement de compiler, mais de naviguer dans le code, comprendre, refactorer, debugger, et outiller une équipe. +Les IDE généralistes se construisent alors autour d'un noyau extensible, capable d'accueillir plusieurs langages, plusieurs frameworks, et de nombreuses intégrations. + +Chez Microsoft, [Visual Studio](https://en.wikipedia.org/wiki/Visual_Studio) démarre en tant que suite intégrée avec une première version datée du 19 mars 1997. +Côté Java, [NetBeans](https://fr.wikipedia.org/wiki/NetBeans) prend forme dès 1996 (sous le nom Xelfi) et s'inscrit ensuite dans une longue histoire de rachats, entre Sun, Oracle puis Apache. +En janvier 2001, [IntelliJ IDEA](https://fr.wikipedia.org/wiki/IntelliJ_IDEA) apparaît et pousse très loin la navigation et la refactorisation, ce qui influence durablement l'idée de productivité dans un IDE. +Eclipse 1.0 sort le 29 novembre 2001, avec un système de greffons qui va structurer tout un écosystème outillage pendant des années. + +![](images/netbeans.png) + +En parallèle, des éditeurs plus légers deviennent, par accumulation de fonctions, de vrais environnements de travail. +[Notepad++](https://fr.wikipedia.org/wiki/Notepad%2B%2B) est publié en 2003 et illustre bien cette voie, avec une base simple et une extensibilité pragmatique. +Sur macOS, [TextMate](https://fr.wikipedia.org/wiki/TextMate) (apparu le 5 octobre 2004) marque une génération d'éditeurs orientés développeurs, avec snippets et automatisations. +[Sublime Text](https://fr.wikipedia.org/wiki/Sublime_Text) (première version datant du 18 janvier 2008) popularise ensuite une expérience très fluide, où l'éditeur devient le centre d'une pratique quotidienne. + +Ce mouvement converge au milieu des années 2010, quand les architectures d'extensions, le débogage multi-langages et les serveurs de langage rendent crédibles des éditeurs qui couvrent presque tout. +[Visual Studio Code](https://fr.wikipedia.org/wiki/Visual_Studio_Code) est annoncé le 29 avril 2015, et sa diffusion massive en fait rapidement un point de référence pour l'idée d'un IDE modulaire. + +### Environnements de développement basés sur le web + +L'idée d'un IDE dans le navigateur devient réaliste quand les navigateurs gagnent en performances, et quand l'infrastructure distante devient banale. +Au début des années 2010, des services comme [Cloud9](https://en.wikipedia.org/wiki/Cloud9_IDE) (dont la société mère est fondée en 2010) rendent concret le développement dans un navigateur, avant son rachat par Amazon en juillet 2016. + +Dans le monde scientifique et data, une autre branche s'impose avec les notebooks. +[Project Jupyter](https://jupyter.org/about) naît en 2014 comme évolution d'IPython, et propose un environnement web où le texte, le code et les résultats cohabitent. +Avec [JupyterLab](https://en.wikipedia.org/wiki/Project_Jupyter), une interface plus générale arrive, et une première version stable est annoncée le 20 février 2018. + +![](images/jupyterlab.png) + +À la même période, le web IDE se décloisonne en deux familles. +D'un côté, des environnements immédiats pour le développement web, autour d'un projet et d'un aperçu instantané, comme [CodeSandbox](https://codesandbox.io/). +De l'autre, des plateformes généralistes comme [Replit](https://replit.com/), qui cherchent à couvrir un large spectre de langages et d'usages. + +Ensuite vient une troisième vague, plus proche d'un poste de travail complet, où l'on déplace l'IDE vers une machine distante sans renoncer aux capacités habituelles. +En 2016, la fondation Eclipse annonce la sortie initiale d'[Eclipse Che](https://newsroom.eclipse.org/news/announcements/eclipse-che-release-new-ide-platform-reimagines-developer-workspace), avec l'ambition de structurer des workspaces et des IDE web. +En mars 2017, [Eclipse Theia](https://en.wikipedia.org/wiki/Eclipse_Theia) est lancé comme plateforme pour construire des IDE web et desktop, compatible avec une partie de l'écosystème d'extensions de VS Code. + +Dans cette logique, on voit apparaître des projets qui consistent à faire tourner VS Code côté serveur. +[code-server](https://coder.com/) se popularise à partir de 2019 comme moyen pragmatique d'accéder à une expérience proche de VS Code depuis un navigateur, souvent en auto-hébergement. +Et [OpenVSCode Server](https://github.com/gitpod-io/openvscode-server) est annoncé à l'automne 2021 comme une base ouverte pour exécuter l'expérience VS Code dans le navigateur. + +Enfin, les hébergeurs de forge et de cloud intègrent l'idée au cœur du flux de travail. +GitHub lance [Codespaces](https://github.com/features/codespaces) en bêta publique limitée le 6 mai 2020, avec des environnements préconfigurés et un IDE accessible depuis le web. + +![](images/features-codespaces-hero.webp) + +Ce qui était au départ un compromis ergonomique devient alors, pour certains usages, une réorganisation complète du poste de travail. +Le navigateur cesse d'être seulement une fenêtre sur des fichiers, et devient un bureau distant spécialisé, où l'on cherche à retrouver la même liberté qu'en local, mais avec une machine de travail qui peut être ailleurs. + +## Pourquoi un web IDE + +Les environnements de développement basés sur le web semblent s'inscrire dans une continuité logique. +Pour beaucoup, ils peuvent signifier une pression moins importante sur les performances locales. +Pour les entreprises, ils permettent de centraliser et d'uniformiser le développement. +Dans tous les cas, ils permettent de regrouper des activités complémentaires... et de proposer les services correspondants (ce que fait Github, par exemple). + +En ce qui me concerne spécifiquement, je suis donc en train de procéder à une transformation de mes outils de travail. +Mon objectif est de pouvoir me passer de tout, sur ma machine de travail, à l'exception d'un navigateur web, sans devoir faire trop de concessions sur mes habitudes, à savoir [VSCode](https://code.visualstudio.com). +Cependant, je ne suis pas hostile au changement, d'où l'intérêt de tester différentes solutions. + +Nous allons voir que, là encore, le choix est limité, mais les alternatives sont solides et probablement durables. + +Je rappelle rapidement mes prérogatives, globalement similaires à celles pour un émulateur de terminal : + +- IDE basé sur le web +- Exposition sur Internet non requise (certificats locaux) +- Installation native à NixOS (pas de conteneurs) +- Non limité à un langage particulier (extensibilité) +- Télémétrie absente ou limitée + +## Solution retenue + +Après avoir testé [code-server](https://github.com/coder/code-server) et [theia](https://theia-ide.org), j'ai finalement opté pour [openvscode-server](https://github.com/gitpod-io/openvscode-server). +Notons que finalement, une grosse partie du code est de toute façon issu de Microsoft et de VSCode. +Mon choix s'est donc essentiellement fait en fonction de critères plus philosophiques que techniques. + +Theia est une excellente alternative, tant à VSCode qu'à openvscode-server. +Ce "framework" permet en effet de concevoir aussi bien une application web que native : il est possible de construire un IDE à partir de blocs logiciels simples (pratiquement tout est une extension, à renseigner dans un traditionnel `package.json`). +Cette approche relève presque de la philosophie déclarative que j'apprécie dans NixOS. + +Néanmoins, les extensions rendues disponibles dans le [marketplace](https://open-vsx.org) de l'IDE ne sont pas toutes installables. +C'est notamment le cas de Codex, dont je n'ai même pas pu installer le `.vsix` manuellement au moment de mes tests (mais il semblerait qu'il soit désormais [officiellement disponible](https://open-vsx.org/extension/openai/chatgpt)). +En apparence, c'est la version qui pose problème : Codex attend une version de VSCode, mais Theia utilise un versionnage différent. +En réalité, je pense que d'autres problèmes plus structurels pourraient surgir. + +Malgré cela, je pense que Theia est une solution robuste et pérenne, quoique encore un peu jeune : le principe des blueprints doit être étendu et facilité (de sorte à permettre la redistribution d'une liste d'extensions à usages spécifiques, par exemple un IDE 100% python), et il faut que les créateurs d'extensions ne ciblent plus spécifiquement le marketplace de Microsoft. +Et je crois que ça va se faire, petit à petit. + +code-server, quant à lui, greffe tout autour des composants de VSCode des "améliorations" censées faciliter l'auto-hébergement. +En pratique, je l'ai trouvé lourd, lent, et peu configurable. +C'est une solution qui conviendra à beaucoup, étant donné qu'en effet, il limite les frictions. +Mais quitte à retrouver un environnement VSCode, j'ai préféré quelque chose de plus "authentique", et en même temps que j'ai pu mieux m'approprier. + +C'est donc vers openvscode-server que je me suis tourné, qui est un fork direct de VSCode, et qui est "_basé sur une architecture semblable à celle qui animent Gitpod ou GitHub Codespaces_". +Et, en effet, je retrouve une expérience très similaire, puisque j'ai pu réinstaller toutes les extensions que j'utilise au quotidien (dont Codex), et répliquer tout mon paramétrage. + +Attention toutefois à une subtilité : la configuration peut se faire par _navigateur_ ou sur le serveur. +Je me suis fait avoir au début : j'avais tout paramétré sans me préoccupé de l'endroit où je le paramétrais, pour constater avec horreur que passer sur un autre ordinateur m'avait tout "perdu". +Il est d'ailleurs dommage que le module NixOS ne permette pas une configuration plus complète de l'environnement, alors que cette configuration tient dans un fichier json. + +![](images/openvscode-server.png) + +Grâce à openvscode-server, je n'ai finalement aucune concession majeure à fournir. +Je retrouve mon environnement de travail habituel, et mes extensions habituelles complètement intégrées. +J'ai même perçu une amélioration de mes flux de travail. +Par exemple, mes projets sont devenus des signets dans mon navigateur, ce qui me semble plus confortable que de passer par un menu puis parcourir des dossiers dans un explorateur de fichiers, ou par un historique. +En outre, j'ai aussi constaté une amélioration (relative) des performances de certaines extensions qui interagissent avec mon serveur, puisqu'elles se retrouvent installées sur la même machine physique. +Moins de réseau = moins de latence. +C'est ténu, mais perceptible au quotidien. + +Il n'y a véritablement que deux points qui sont un peu "dommageables", sans être rédhibitoires. +Le premier est la difficulté, pour des raisons de sécurité, de coller des commandes dans le terminal intégré (Safari, en tout cas, m'oblige à faire Ctrl+v, suivi obligatoirement par un clic sur "Coller" dans le menu contextuel qui apparait automatiquement). +C'est occasionnellement contrariant. + +Le deuxième point est d'ordre esthétique, et donc ne gênera pas tout le monde. +J'aime bien les terminaux "fancy", avec des icônes. +J'utilise le shell [fish](https://fishshell.com) avec l'extension [tide](https://github.com/IlanCosman/tide), comme vous l'avez peut-être deviné dans mon article précédent. +Or, peu importent mes réglages, et alors que [Sshwifty](https://github.com/nirui/sshwifty) ne m'a pas posé de problème à ce niveau-là, impossible de faire sortir des icônes au terminal intégré à openvscode-server. + +J'ai du faire quelque chose d'assez compliqué, et peu conforme à ma prérogative de simplicité, comme vous allez le voir. + +```nix +{ config, pkgs, ... }: + +let + mesloNF = pkgs.nerd-fonts.meslo-lg; + openvscode-server-bin = pkgs.stdenvNoCC.mkDerivation rec { +  pname = "openvscode-server-bin"; +  version = "1.106.3"; + +  src = pkgs.fetchurl { +   url = +    "https://github.com/gitpod-io/openvscode-server/releases/download/openvscode-server-v${version}/openvscode-server-v${version}-linux-x64.tar.gz"; +   sha256 = "05wx1xy84hr2c3ppb4hadfpwdb9jr43sjhypdmp7nhadf5ahndfa"; +  }; + +  dontBuild = true; + +  installPhase = '' +      mkdir -p $out +      cp -r ./* $out/ + +      # 1) Copier les fichiers de fonte dans $out/fonts +      mkdir -p $out/fonts +      cp ${mesloNF}/share/fonts/truetype/NerdFonts/MesloLG/*.ttf $out/fonts/ + +      # 2) Générer fonts.css pour les webfonts +      cat > $out/fonts/fonts.css <<'EOF' +   @font-face { +    font-family: 'MesloLGS Nerd Font Mono'; +    font-style: normal; +    font-weight: 400; +    src: url('MesloLGSNerdFontMono-Regular.ttf') format('truetype'); +   } +   EOF + +      # 3) Importer fonts.css dans le CSS du workbench +      css="$out/out/vs/code/browser/workbench/workbench.css" +      if [ -f "$css" ]; then +       tmp=$(mktemp) +       printf '@import url("../../../../../fonts/fonts.css");\n' > "$tmp" +       cat "$css" >> "$tmp" +       mv "$tmp" "$css" +      fi +  ''; + }; + + tokenFile = "/etc/nixos/secrets/services/openvscode-server/connection-token"; +in { + systemd.services.openvscode-server = { +  description = "OpenVSCode Server (upstream binary)"; +  wantedBy = [ "multi-user.target" ]; +  after = [ "network.target" ]; + +  serviceConfig = { +   Type = "simple"; +   User = "richard"; +   Group = "wheel"; +   PermissionsStartOnly = true; +   StateDirectory = "openvscode-server"; +   WorkingDirectory = "/var/lib/openvscode-server"; + +   ExecStart = +    "${openvscode-server-bin}/bin/openvscode-server --host 0.0.0.0 --port 8443 --connection-token-file ${tokenFile} --user-data-dir=/var/lib/openvscode-server/userdata --extensions-dir=/var/lib/openvscode-server/extensions"; + +   Restart = "on-failure"; +  }; + }; +} +``` + +J'ai pratiquement créé un module NixOS avec un binaire pré-compilé et redéfinissant mon propre service, simplement pour pouvoir embarquer une fonte ([Meslo Nerd Font](https://www.nerdfonts.com/font-downloads)). +En principe, la configuration devrait se limiter au code suivant, si vous ne cherchez pas à intégrer une fonte : + +```nix +{ + services.openvscode-server = { +  enable = true; +  # Ou connectionTokenFile +  connectionToken = "mon-super-mot-de-passe"; + }; +} +``` + +Et c'est tout ! +Voyez à quel point je me suis compliqué la vie juste pour une fonte... +C'est d'autant plus pénible que je dois mettre à jour manuellement la version de l'application et le SHA correspondant. +D'après ChatGPT, ce "problème" viendrait de la façon dont VSCode gère les fallbacks sur les glyphes manquants d'une fonte : il serait moins permissif ou plus directif que Sshwifty qui, lui, laisse le navigateur choisir une fonte appropriée. + +Reste à configurer Caddy pour fournir les certificats. +Cette étape est strictement identique à mon article précédent : + +```nix +{ + services.caddy = { +  enable = true; + +  # Pas de HTTPS automatique sur ce serveur, c'est mon frontend qui s'en occupe +  globalConfig = '' +   auto_https off +   servers { +    trusted_proxies static private_ranges +   } +  ''; + +  # Sur mon backend, les vhosts se font par port et non par domaine. +  # Malgré tout, j'ai besoin de préciser le FQDN du serveur pour générer le +  # certificat. +  virtualHosts = { +    # [...] +    "server-main.home.arpa:30084".extraConfig = '' +      reverse_proxy http://127.0.0.1:8443 +      tls internal +    ''; +    # [...] +  }; + }; +} +``` + +On fera simplement attention à configurer correctement les ports concernés. + +## Conclusion + +Bien que ce problème de fonte implique un _workaround_ dont j'ai une sainte horreur, au moins il peut être corrigé. +C'est un moindre mal, une concession que je suis prêt à faire, pour pouvoir bénéficier d'un environnement de travail qui me donne satisfaction. +J'insiste bien sur un point : si les glyphes dans les fontes par défaut vous conviennent, le [module NixOS de base](https://search.nixos.org/options?channel=25.11&query=services.openvscode-server) et la maigre configuration à ajouter suffiront ! + +Reste une question que vous vous posez peut-être : si j'ai un terminal dans VSCode, pourquoi j'ai tenu à installer un émulateur de terminal web séparé ? +Tout simplement pour avoir une alternative légère et contextuellement pertinente. +Le terminal intégré à VSCode, je ne l'utilise que dans le projet sur lequel je travaille. +Si j'ai besoin de lancer des commandes systèmes, type `htop` ou `df`, Sshwifty est plus confortable. + +Ainsi, j'achève mon deuxième gros chantier pour travailler entièrement dans mon navigateur web. +Je vais pouvoir passer à la prochaine étape de la transformation de mon environnement de travail, dans le prochain article !