DRAFT Design Web © · Diseño Web & Software

En DRAFT CODE apostamos siempre por estar al día con las tecnologías que realmente aportan valor en el desarrollo web moderno. En esta ocasión, he preparado una pequeña guía paso a paso para ayudarte a instalar y arrancar con Blazor, el framework de Microsoft basado en C# para crear aplicaciones web interactivas. Si vienes del mundo JavaScript o Java, como yo, este enfoque puede resultar refrescante y potente. Vamos al grano.

✅ 1. Instalar .NET SDK

Blazor funciona sobre .NET, así que necesitas instalar el SDK.

• Ve a: https://dotnet.microsoft.com/en-us/download
• Descarga e instala la última versión LTS (por ejemplo .NET 8 si está disponible).
• Verifica la instalación en la terminal/cmd:

dotnet --version

✅ 2. Instalar un editor (Visual Studio o VS Code)

Opción A: Visual Studio (más completo)

• Descárgalo aquí: https://visualstudio.microsoft.com/es/
• Durante la instalación, selecciona el workload “Desarrollo de ASP.NET y web”.

Opción B: VS Code (más ligero)

• Descárgalo: https://code.visualstudio.com/
• Instala las extensiones:
  • C#
  • Razor
  • Blazor WebAssembly (opcional pero útil)

---

✅ 3. Crear tu primer proyecto Blazor

Blazor tiene dos modelos principales:

• Blazor Server (renderiza en el servidor)
• Blazor WebAssembly (WASM) (renderiza en el navegador)

Puedes elegir el que quieras. Te muestro ambos.

🔹 Blazor Server

dotnet new blazorserver -o MiAppBlazorServer
cd MiAppBlazorServer
dotnet run

🔹 Blazor WebAssembly (WASM)

dotnet new blazorwasm -o MiAppBlazorWASM
cd MiAppBlazorWASM
dotnet run

Luego abre tu navegador y ve a https://localhost:5001 o http://localhost:5000.

✅ 4. Estructura del proyecto

Los proyectos Blazor tienen:

• Pages/: páginas .razor (como componentes).
• Shared/: componentes reutilizables.
• Program.cs: donde se configura la app.
• wwwroot/: archivos estáticos (CSS, imágenes, etc.).

---

✅ 5. Siguientes pasos recomendados

• Edita páginas .razor y añade componentes.
• Aprende a usar @code, @inject, @page, @bind, etc.
• Prueba comunicación con backend usando HttpClient.
• Si usas Blazor Server, puedes trabajar con SignalR en tiempo real.

Espero que esta guía te haya servido para dar tus primeros pasos con Blazor de forma sencilla y directa. Desde mi experiencia como programador y desde DRAFT Design Web, creo que Blazor ofrece una alternativa sólida y moderna para desarrollar aplicaciones web ricas en funcionalidades sin depender tanto de JavaScript.

Si te interesa seguir profundizando o quieres integrar Blazor en un proyecto profesional, no dudes en escribirme.

📧 contacta@draftdesignweb.com
🌐 https://draftdesignweb.com

¡Seguimos picando código!