domingo, 9 de noviembre de 2014

IIS Express con Sublime Text y Brackets

Intentando salir de la zona de confort una de las probables vías a explorar es cambiar de IDE. Lo cierto es que Visual Studio es un magnifico IDE y además nos presta todo tipo de ayudas y comodidades para ni pensar tener que abandonarlo, pero claro, si queremos hacer cosas distintas tendremos que probar herramientas distintas.

Algunas de las opciones a valorar como nuevo IDE podrían ser Sublime Text o Brackets (también y seguramente como opción más confiable sería WebStorm, pero es de pago y prefiero por ahora no abordarlo).

Para ambos editores (llamarlos IDE o editores de texto lo dejo a tu elección) he echado en falta la existencia de un servidor local para trabajar desde http:// en vez de desde file:///. Lógicamente en VS eso no es problema porque cuando creamos un proyecto web se crea un nuevo sitio web en IIS Express para albergar nuestra aplicación. ¿Y por qué no utilizar entonces IIS Express también para Sublime Text o Brackets? Lo cierto es que un servidor ligero, de fácil instalación a través de Web Platform Installer y además que ya conocemos…o casi… porque su principal problema es su administración o, mejor dicho, la inexistencia de una herramienta gráfica para administrarlo. Es cierto que hay intentos de dotar a IIS Express de interfaz gráfica, pero con franqueza, ninguno parece estar completamente operativo, algunos ejemplos son https://iisexpressgui.codeplex.com/ o http://iisem.codeplex.com/

En este punto lo única opción viable parece administrar IIS Express desde línea de comandos con la utilidad appcmd.exe. Para equipos de 64 bits podremos encontrarla en C:\Program Files (x86)\IIS Express.

Con appcmd podremos realizar las operaciones de administración más comunes como listar, crear, modificar o eliminar sitios, aplicaciones o directorios virtuales. En nuestro caso nos centraremos en administrar sitios, que es lo que crea VS en IIS Express cuando creamos un proyecto web.

image

La configuración de IIS Express se guarda en el fichero %USERPROFILE%\Documents\IISExpress\config\applicationhost.config, aquí y dentro de la sección sites, encontraemos tantos elementos site como sitios tengamos configurados.

Un site luce más o menos así:

        <site id="1" name="WebApplication1">

            <application applicationpool="Clr4IntegratedAppPool" path="/">

                <virtualdirectory path="/" physicalpath="C:\Users\Sergio\Visual Studio 2013\Projects\WebApplication1\WebApplication1">

                </virtualdirectory>

            </application>

            <bindings>

                <binding bindinginformation="*:65534:localhost" protocol="http">

                </binding>

            </bindings>
        </site>

Para listar todos los sitios configurados ejecutaremos el comando appcmd list site

Para crear un nuevo sitio que apunte a C:\Temp podemos ejecutar el comando
appcmd add site /name:"Temp Site" /bindings:http/*:65533:locahost /physicalPath:"C:\Temp"

El puerto podría ser cualquiera mayor que el 1024, puedes ver esta y otras limitaciones en Running IIS Express without Administrative Privileges.

Para arrancar ahora nuestro nuevo sitio ejecutar el comando
iisexpress /site:"Temp Site"

En este punto la consola quedará suspendido mostrando un traza de las peticiones entrantes, para detener el sitio bien podemos pulsar “q” en la consola, o detenerlo desde el icono del área de notificaciones de Windows que agrega IIS Express.

IIS Express también permite levantar un sitio directamente desde una ubicación en disco con el comando iisexpress /path:”C:\Temp”. Esto levantará el servidor en el puerto por defecto 8080, pero lógicamente podríamos haber especificado el puerto también en el comando. Aquí puedes ver toda la documentación de iisexpress. Lo importante de este último comando es que no ha sido necesario registrar previamente en la configuración el sitio, con lo que levantarlo ha sido muy rápido y directo.

Ahora que ya tenemos un servidor web sirviendo contenido de una carpeta en disco ¿Cómo encaja todo esto con Sublime Text y Brackets?

Con Brackets es muy sencillo, simplemente File > Project Settings… y allí especificar la dirección de “Live Preview Base URL”, en nuestro caso http://localhost:8080/

Cabe mencionar que utilizando nuestro propio servidor en Brackets, algunas características del Live Preview no estarán disponibles… en realidad la experiencia del Live Preview merma bastante, puedes encontrar toda la información en https://github.com/adobe/brackets/wiki/How-to-Use-Brackets en el apartado Live Preview > Using your own backend.

Con Sublime Text primero hay que instalar el paquete SideBarEnhancements (paquete must-have) que agrega al menú contextual de una carpeta abierta en Sublime un buen puñado de opciones, entre las cuales está Project > Edit Preview URLs… Al pulsar en esta opción nos abrirá un fichero vacío llamado SideBarEnhancements.json (que se guardará %APPDATA%\Sublime Text 3\Settings) donde escribiremos lo siguiente:

{

    "C:\Temp": {

        "url_testing":"http://localhost:8080/",

        "url_production":""

    }
}

Ahora al pulsar la opción “Open In Browser” en el menú contextual del fichero en el Side Bar (ojo que no funcionará si pulsamos “Open In Browser” en el menú contextual desde el editor del fichero), nos abrirá el navegador predeterminado en la url especificada en url_testing. Más información de esta característica en https://github.com/titoBouzout/SideBarEnhancements

Después de todo esto, la sensación que tengo es que abandonar VS va a ser difícil :)

Un saludo!