Websharper

Websharper, según la documentación oficial es: un framework y un conjunto de herramientas para desarrollar aplicaciones web/móviles y servicios web íntegramente en C# o F# (o una combinación de ambos lenguajes) con comunicación cliente-servidor y navegación web fuertemente tipadas.

Características principales:

Veremos las sus características principales.

• Sitelets: funcionalidad del lado del servidor. 
• Compilador de JavaScript y abstracciones del lado del cliente. 
• Facilidades de interacción cliente-servidor. 
• Funciones adicionales.

Empezando con Websharper

Por default se usa C#, veamos un ejemplo paso a paso.

1. Creamos un directorio y nos ubicamos en el:

$ mkdir proyecto-websharper
$ cd proyecto-websharper

2. Instalamos los templates de WebSharper:

$ dotnet new -i WebSharper.Templates

3. Creamos un proyecto WebSharper:

$ dotnet new websharper-web

4. Ejecutamos la aplicación:

$ dotnet run

Abrimos el navegador en la ruta: http://localhost:5000

Con esto hemos creado nuestra primera aplicación con WebSharper.

Ahora miremos el contenido del proyecto:

Como se puede observar hay directorios que llaman la atención, describiremos las carpetas:

• bin: Carpeta estándar de .NET donde se colocan los archivos compilados finales (DLLs, ejecutables, etc.) después de construir el proyecto. En proyectos WebSharper, también puede contener subcarpetas con archivos generados para despliegue (como HTML/JS en versiones antiguas). 
• Generated: Carpeta generada automáticamente por WebSharper. Contiene código JavaScript (y posiblemente otros artefactos) traducido desde el código C# marcado con atributos como [JavaScript]. Este código es el resultado de la compilación client-side de WebSharper. 
• node_modules: Carpeta creada por npm (Node.js package manager). Contiene todas las dependencias JavaScript externas instaladas vía package.json. En proyectos WebSharper modernos, se usa para herramientas de bundling como Vite o esbuild, y para librerías frontend. 
• obj: Carpeta estándar de compilación .NET. Almacena archivos intermedios temporales durante el proceso de build (como objetos compilados, recursos embebidos, etc.). No se debe modificar manualmente ni incluir en control de versiones. 
• wwwroot: Carpeta raíz para archivos estáticos en proyectos web .NET (como ASP.NET Core). Aquí se colocan los archivos que se sirven directamente al navegador: HTML, CSS, JS bundlado, imágenes, etc. En WebSharper, el output final del cliente (JS generados, bundles) suele configurarse para ir aquí (a menudo vía wsconfig.json con "outputDir": "wwwroot").

Estas carpetas combinan elementos estándar de proyectos .NET/ASP.NET Core con específicas de WebSharper (como Generated) y modernas herramientas frontend (como node_modules y configuración para bundlers como Vite/esbuild, visibles en archivos como vite.config.js y esbuild.config.mjs).

Ahora miremos los achivos:

• proyecto-websharper.csproj: Archivo de proyecto principal de .NET (formato SDK-style). Define la configuración del proyecto: tipo de salida (generalmente una aplicación web ASP.NET Core), referencias a paquetes NuGet (como WebSharper, WebSharper.CSharp, etc.), propiedades de compilación y opciones específicas de WebSharper (por ejemplo, vía propiedades como o referencias a targets). Es esencial para que dotnet build o Visual Studio compile el proyecto correctamente. 
• appsettings.json: Archivo de configuración estándar de ASP.NET Core. Contiene settings de la aplicación, como cadenas de conexión a bases de datos, opciones de logging, URLs de APIs externas o configuraciones específicas de WebSharper (por ejemplo, sección "websharper" para redirección de scripts en modo debug). Se carga en tiempo de ejecución y puede tener versiones por entorno (como appsettings.Development.json). 
• Client.cs: Archivo de código C# que contiene la lógica client-side (lado del navegador). Aquí se escribe código marcado con atributos como [JavaScript] o [SPAEntryPoint], que WebSharper traduce automáticamente a JavaScript. Es el punto principal para definir la interfaz de usuario interactiva (UI con WebSharper.UI, eventos, etc.). 
• esbuild.config.mjs: Archivo de configuración para esbuild (un bundler/minificador rápido de JavaScript). En proyectos WebSharper modernos, se usa para procesar el output prebundled generado por WebSharper (cuando "prebundle": true en wsconfig.json), creando un bundle final optimizado para producción (minificación, tree-shaking, etc.). 
• Main.html: Archivo HTML principal (plantilla o index). Sirve como página base para la aplicación (SPA o sitelet). Contiene placeholders especiales de WebSharper (como
  o atributos ws-replace) donde se inyecta el contenido dinámico generado desde el lado server o client. En modo desarrollo, Vite lo sirve con hot-reload. 
• package.json: Archivo estándar de Node.js/npm. Define las dependencias JavaScript externas (como librerías UI, polyfills o herramientas) y scripts de build (por ejemplo, "dev" para Vite, "build" para producción). WebSharper lo usa para integrar con bundlers modernos como Vite o esbuild. 
• Remoting.cs: Archivo C# que define funciones RPC (Remote Procedure Calls). Contiene métodos marcados con [Rpc] que permiten llamar código server-side desde el client de forma segura y tipada (sin escribir AJAX manual). Es clave para la comunicación client-server en aplicaciones WebSharper. 
• Site.cs: Archivo C# que define el sitelet (estructura de rutas y páginas de la aplicación). Usa WebSharper.Sitelets para declarar endpoints (acciones, páginas, etc.) y cómo renderizar el contenido (integrando templates como Main.html y código client). Es el núcleo de la lógica de enrutamiento server-side. 
• Startup.cs: Archivo estándar de ASP.NET Core para configurar la aplicación. Aquí se registra el pipeline (middleware), se integra WebSharper (por ejemplo, services.AddWebSharper() o configuración de sitelets/RPC), se carga appsettings.json y se define el hosting (Kestrel, IIS, etc.). 
• vite.config.js: Archivo de configuración para Vite (servidor de desarrollo y bundler moderno). Se usa en modo debug para hot-module-replacement (HMR), proxy de APIs y servir el proyecto rápidamente. En producción, puede delegar a esbuild. Los templates WebSharper recientes lo incluyen para un desarrollo fluido. 
• wsconfig.json: Archivo de configuración específico de WebSharper. Define opciones del compilador como tipo de proyecto ("site", "spa", etc.), output directory (ej. "wwwroot"), prebundling, source maps, descarga de recursos remotos y más. Es crucial para personalizar cómo WebSharper genera el JavaScript.

Continuaremos con esta serie de entregas sobre .NET.

Enlaces:

https://websharper.com/