⚙️ Día 2 - Setup Completo del Entorno

Objetivo: Al final del día tendrás un entorno completamente funcional para desarrollar aplicaciones .NET + Vue.js con todas las herramientas del equipo.

🚀 Verificación de Prerrequisitos

Confirmar Sistema Operativo

# Ejecutar en PowerShell como Administrador
Get-ComputerInfo | Select-Object WindowsProductName, WindowsVersion

Requerido: Windows 10 (versión 1809+) o Windows 11

Habilitar Características de Windows

# Habilitar IIS y características de desarrollo
Enable-WindowsOptionalFeature -Online -FeatureName IIS-WebServerRole, IIS-WebServer, IIS-CommonHttpFeatures, IIS-HttpRedirection, IIS-NetFxExtensibility45, IIS-ASPNET45, IIS-ISAPIExtensions, IIS-ISAPIFilter -All

Configurar Execution Policy

# Permitir ejecución de scripts
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

💻 Stack .NET - Visual Studio y SDKs

🔽 Visual Studio 2022 Community

Descargar Visual Studio 2022

📥 Descargar desde Microsoft
Configurar Workloads

Durante la instalación, seleccionar:

✅ ASP.NET and web development
Componentes Individuales Requeridos

En la pestaña “Individual Components”:

✅ Git for Windows
✅ GitHub extension for Visual Studio

Verificar Instalación

# Verificar .NET Core/8
dotnet --list-sdks
dotnet --list-runtimes

🎨 Stack Frontend - Node.js y Vue.js

📦 Node.js con nvm-windows

Instalar nvm-windows

📥 Descargar desde GitHub

Descargar nvm-setup.zip, extraer y ejecutar como administrador.

Configurar Node.js

# Instalar Node.js LTS
nvm install 22
nvm use 22

# Verificar instalación
node --version  # Debe mostrar v22.x.x
npm --version

Configurar pnpm

# Instalar pnpm globalmente
npm install -g pnpm

# Verificar
pnpm --version  # Debe ser 10+

⚡ VS Code (Editor Complementario)

Descargar VS Code

📥 Visual Studio Code

🗄️ Bases de Datos y Herramientas

🐘 DBeaver Community (Universal Database Manager)

Descargar DBeaver

📥 DBeaver Community

Seleccionar “Windows installer”

🔴 Redis Desktop Manager

Instalar Another Redis Desktop Manager

Opción 1 - Chocolatey (Recomendado):

# Instalar Chocolatey si no lo tienes
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# Instalar Another Redis Desktop Manager
choco install another-redis-desktop-manager

Opción 2 - Manual: 📥 GitHub Releases

Configurar Conexión Redis
- Host: redis-dev.xxxxxx.local
- Port: 6379
- Auth: [Solicitar credenciales al equipo]

🔧 Configuración de NuGet Package Sources

📦 NuGet.config

Crear archivo de configuración

# Crear directorio si no existe
if (-not (Test-Path "$env:APPDATA\NuGet")) {
    New-Item -ItemType Directory -Path "$env:APPDATA\NuGet"
}

Configurar NuGet.config

Crear archivo %APPDATA%\NuGet\NuGet.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
   <packageSources>
      <add key="Local" value="C:\LocalNugets" />
      <add key="Microsoft Visual Studio Offline Packages"
           value="C:\Program Files (x86)\Microsoft SDKs\NuGetPackages\" />
      <add key="nuget.org"
           value="https://api.nuget.org/v3/index.json"
           protocolVersion="3" />
   </packageSources>
</configuration>

Crear directorio Local NuGets

# Crear carpeta para NuGets locales
New-Item -ItemType Directory -Path "C:\LocalNugets" -Force

🌐 IIS y Configuración Web

🖥️ Configurar IIS para Desarrollo

Habilitar IIS (si no se hizo antes)

Enable-WindowsOptionalFeature -Online -FeatureName IIS-WebServerRole, IIS-WebServer, IIS-CommonHttpFeatures, IIS-HttpRedirection, IIS-NetFxExtensibility45, IIS-ASPNET45 -All

🌐 Caddy - Proxy Reverso para Desarrollo

📡 Setup de Caddy Server

Caddy nos permite simular el comportamiento de producción en desarrollo local, especialmente para microfrontends.

Instalar Caddy

📚 Guía Completa: Caddy Setup y Configuración

🔑 Accesos y Permisos

🏢 Cuentas Corporativas

🧪 Verificación de Accesos

Probar GitHub

# Clonar repositorio de prueba
git clone https://github.com/Kompa-s/proyecto-vue.git

🛠️ Herramientas Adicionales

📡 Herramientas de API

Postman

Instalación:

choco install postman

Configuración:

Importar colecciones de equipo desde Azure DevOps
Configurar environment variables para desarrollo

💬 Comunicación

Discord Desktop
Terminal window
```
choco install discord
```

✅ Verificación Completa del Setup

🧪 Tests de Funcionalidad

Test .NET Core 8

# Crear proyecto ASP.NET Core
dotnet new webapi -n TestCore -f net8.0
cd TestCore
dotnet run

Test Vue.js/Node.js

# Clonar repo de Vue.js del equipo
git clone https://github.com/Kompa-s/proyecto-vue.git
cd proyecto-vue
pnpm install
pnpm app-review dev

Test Base de Datos
- Abrir DBeaver
- Conectar a SQL Server de desarrollo
- Ejecutar query simple: SELECT @@VERSION
Test Redis
- Abrir Another Redis Desktop Manager
- Conectar a Redis de desarrollo
- Verificar conexión y explorar keys

📋 Checklist Final

Al completar el setup, deberías tener:

🏗️ Desarrollo Backend

Visual Studio 2022 con workloads correctos
.NET Core 8 SDK instalado y funcional
NuGet sources configurados correctamente
Proyecto .NET de prueba compilando exitosamente

🎨 Desarrollo Frontend

Node.js 22 + pnpm instalados via nvm-windows
VS Code con extensiones Vue.js configuradas
Repositorio Vue.js clonado y ejecutándose
Hot reload funcionando en desarrollo

🗄️ Bases de Datos

DBeaver conectando a SQL Server
Another Redis Desktop Manager conectando a Redis
Queries básicas ejecutándose correctamente

🌐 Web y Herramientas

IIS configurado con site de desarrollo
Git clonando repositorios del equipo

🚨 Troubleshooting Común

❌ Problemas .NET

NuGet Issues

Problema: Packages no se descargan de sources internos

Solución:

# Limpiar cache NuGet
dotnet nuget locals all --clear

# Verificar configuración
nuget sources list

❌ Problemas Frontend

Problema: nvm no cambia versión de Node.js

Solución:

# Ejecutar PowerShell como Administrador
nvm use 22

# Si persiste, reinstalar nvm-windows

Problema: pnpm install falla con errores de permisos

Solución:

# Limpiar cache
pnpm store prune

# Reinstalar pnpm
npm uninstall -g pnpm
npm install -g pnpm

Problema: Errores TypeScript en proyecto Vue.js

Solución:

# En VS Code: Ctrl+Shift+P
# "TypeScript: Select TypeScript Version"
# → "Use Workspace Version"

# Verificar que todas las dependencias estén instaladas
pnpm install

Problema: No conecta a SQL Server

Verificar:

Conexión VPN si trabajas remoto
Credenciales Windows Authentication
Firewall no bloqueando puerto 1433

Problema: Another Redis Desktop Manager no conecta

Solución:

Verificar host y puerto
Solicitar credenciales actualizadas al equipo
Probar conexión básica con telnet redis-host 6379

❌ Problemas IIS

Permission Errors

Problema: Errores de permisos en aplicación

Solución:

IIS → Sites → [Tu Site] → Authentication
Habilitar Windows Authentication
Verificar permisos de carpeta para IIS_IUSRS

🚀 Primer Build Exitoso

🎯 Proyecto de Validación

Clonar repositorio del equipo

# Clonar proyecto Vue.js
git clone https://github.com/Kompa-s/proyecto-vue.git
cd proyecto-vue

Setup dependencias

# Instalar dependencias del workspace
pnpm install

# Build packages compartidos
pnpm -r build

Ejecutar microfrontend

# Ejecutar aplicación de ejemplo
pnpm app-review dev

Verificar en navegador

Abrir http://localhost:5173 y verificar:
- ✅ Aplicación carga sin errores
- ✅ Hot reload funciona al hacer cambios
- ✅ TypeScript compila correctamente
- ✅ Console sin errores

🏗️ Crear tu primer cambio

Crear branch de prueba

git checkout -b feature/mi-primer-cambio

Hacer cambio simple

Editar @apps/review/src/App.vue:

<!-- Agregar comentario en template -->
<template>
  <!-- Mi primer cambio exitoso! -->
  <section class="mainTS__section">
    <!-- resto del código... -->

Verificar hot reload

Guardar archivo y confirmar que el cambio se ve inmediatamente en el navegador.
Build de producción
Terminal window
```
pnpm app-review build
```
Verificar que genera archivos en dist/ sin errores.

🎉 ¡Setup Completado!

✅ Logros del Día 2

Entorno Técnico Completo:

✅ Backend: .NET Core 8 funcionando
✅ Frontend: Node.js 22 + Vue.js 3 + TypeScript
✅ Bases de Datos: Acceso a SQL Server, PostgreSQL, MongoDB, Redis
✅ Herramientas: Visual Studio, VS Code, DBeaver, Git, IIS

Conectividad y Accesos:

✅ GitHub: Repositorios y work items accesibles
✅ Networking: IIS, hosts configurados

Primer Desarrollo:

✅ Proyecto compilando: Build exitoso sin errores
✅ Hot reload: Cambios en tiempo real funcionando
✅ Git workflow: Branch, cambios, commit preparado

📞 Soporte y Próximos Pasos

🆘 ¿Algo no funciona?

Canal inmediato: Slack #team-afiliados-retail

Incluir: Screenshot del error + pasos que llevaron al problema

❓ ¿Dudas técnicas?

Consultar: Matriz de expertos del Día 1

Preparar: Contexto específico de tu pregunta

🎯 ¿Listo para desarrollar?

Solicitar: Primer work item en GitHub

Preferencia: Bug fix o feature pequeña para empezar

🚀 Próximos Pasos Inmediatos

Próximo paso: Día 3 - Cultura de Documentación y Contribución donde aprenderas sobre nuestra cultura de documentación y como contribuir.