Integración de Visual Studio con Microsoft Azure Virtual Machines

Durante la segunda keynote del evento BUILD de Microsoft se anunció la integración de Visual Studio con Microsoft Azure Virtual Machines, lo cual nos ofrece la posibilidad de crear, administrar y depurar máquinas virtuales de la plataforma. Para ello es necesario actualizar el SDK a la versión 2.3.

Lo mejor de todo es que se nos habilita la posibilidad de crear nuestras máquinas virtuales en IaaS sin necesidad de salir del Visual Studio. Podemos crearla nada más comenzar con un nuevo proyecto: New Project > Web > ASP.NET Web Application > Introducimos el nombre del proyecto > Create remote resources (por defecto es Web Site si tenemos una cuenta de Microsoft Azure asociada).

Create remote resources

Una vez que aceptamos el tipo de proyecto y el tipo de recurso que vamos a crear en remoto, nos aparecerá una nueva ventana donde podremos seleccionar la configuración que necesitamos para la máquina virtual:

Create virtual machine on Window Azure

Una vez que aceptamos la configuración, mientras que estamos desarollando sobre nuestro nuevo proyecto, la máquina ya se está desplegando en Microsoft Azure:

Output virtual machine provisioning

Lo bueno en este escenario, cosa que no ocurre cuando creas la máquina desde el propio portal, es que te da la posibilidad de agregar el rol Web Server y habilitar Web Deploy durante la propia creación, por lo que una vez creada la máquina podremos acceder a la URL elegida y comprobar que efectivamente aparece la página de IIS y además veremos que se han configurado los endpoints HTTP, HTTPS y Web Deploy de manera automática:

Endpoints automatically

También podemos ver esta información desde la ventana Server Explorer, desplegando la flecha de la vm:

Virtual Machines Server Explorer

Para realizar las subidas a la nueva máquina virtual, lo único que debemos hacer es seleccionar la opción Publish, con el botón derecho sobre el proyecto Web. Al haber relacionado desde el primer momento mi desarrollo con mi máquina en Azure, la configuración ya estará prestablecida en el perfil de publicación:

Publish Web Connection

Por último, otra cosa que podemos hacer es habilitar el modo debugging en la vm en IaaS a través de la ventana Server Explorer, haciendo clic con el botón derecho sobre la máquina en cuestión y pulsando sobre la opción Enable Debugging:

Server Explorer Virtual Machine Enable Debugging

La primera vez que vayamos a depurar sobre una máquina, es necesario que se instale la extesión RemoteDebugVS2013:

Adding RemoteDebugVS2013 extension to VM returngivm

Cuando esta característica se habilita, se exponen dos endpoints en nuestra vm:

Remote Debugging Endpoints

Una vez que hayamos terminado con la depuración, basta con seleccionar de nuevo la vm y elegir Disable Debugging. Esta acción no eliminará de manera automática los endpoints habilitados para este fin, por lo que sería necesario eliminarlos manualmente, bien a través del portal o desde Powershell.

Una vez finalizado el proceso ya podremos seleccionar de nuevo la vm y tendremos disponible la opción Attach debugger….

Server Explorer VM Attach Debugger

Se conectará con nuestra máquina para recuperar los procesos activos, donde debemos seleccionar el proceso del IIS (w3wp.exe):

IaaS-VM-Attach-to-process

Para que este segundo punto funcione correctamente es necesario que el despliegue que se realice en la vm esté en modo Debug, con la idea de que los pdbs estén incluidos en la subida.

Espero que sea de utilidad.

¡Saludos!

Ejecutar JSHint dentro de Visual Studio

jshint
En el post de ayer se comentaba cómo era posible utilizar la extensión Web Essentials para crear bundles de nuestros archivos JavaScript. Siguiendo en la misma línea, hoy me gustaría hablar de otra de las opciones que posee esta fantástica extensión: la integración con JSHint. Todos aquellos que trabajamos con el front-end deberíamos conocer herramientas de análisis de código JavaScript como JSLint, JSHint, etcétera. Sin embargo, para hacer uso de ellas es necesario copiar nuestro código y pegarlo en el sitio web de alguna de estas herramientas para realizar el análisis del mismo, lo cual nos impide tener un seguimiento a tiempo real de nuestro desarrollo y terminamos por olvidarnos de su uso en el día a día.
Para evitar perder este análisis continuo también en los scripts, con Web Essentials podemos lanzar JSHint directamente desde Visual Studio de manera automática:

VS JsHint Errors

Dentro de la configuración de esta extensión, tenemos un apartado exclusivamente para las propiedades de esta herramienta. Para acceder a las opciones basta con ir al TOOLS –> Options –> Web Essentials –> JSHint:

JSHint configuration Web Essentials

De esta forma obligamos a los desarrolladores a estar atentos a la calidad de su código también en el front-end.

Espero que sea de utilidad.

¡Saludos!

Bundling con la extensión Web Essentials para Visual Studio

Hace tiempo estuve contando la forma de trabajar con Bundles en ASP.NET, donde el back-end es el encargado de unir y comprimir los ficheros seleccionados. Cuando tenemos aplicaciones muy grandes con muchos scripts específicos para determinadas vistas, no es muy viable registrar cada uno de ellos en la configuración de Bundles en el Global.asax. Gracias a la extensión Web Essentials podemos realizar estas acciones en tiempo de desarrollo.

Recordando un poco el por qué hacemos esto, el objetivo principal es reducir el número de peticiones (gracias al bundling) y, ademas, que el contenido sea lo más ligero posible (gracias a la compresión/minification). Un ejemplo claro que podemos ver con demasiada frecuencia es el siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>Bundling Web Essentials</title>
</head>
    <body>
        <script src="scripts/aScript.js"></script>
        <script src="scripts/bScript.js"></script>
        <script src="scripts/cScript.js"></script>
    </body>
</html>

Cuando instalamos esta extensión, tenemos un submenú adicional en el menú contextual de Visual Studio donde podemos elegir lo siguiente:

Web Essentials Create JavaScript bundle file

Lo primero que necesitamos definir es el nombre del bundle:

bundle name

Una vez aceptemos creará un conjunto de archivos:

Bundle configuration

El que encapsula a todos ellos, se trata de un archivo XML, el cual contiene la configuración del mismo (minify, runOnBuild, output) y el nombre de los archivos que componen el bundle, además de su orden:

<?xml version="1.0" encoding="utf-8"?>
<bundle minify="true" runOnBuild="true" output="myBundle.js">
  <!--The order of the <file> elements determines the order of them when bundled.-->
  <file>/scripts/aScript.js</file>
  <file>/scripts/bScript.js</file>
  <file>/scripts/cScript.js</file>
</bundle>

En el archivo indicado como output (myBundle.js) se puede visualizar el resultado de la unión de todos los archivos involucrados, donde se puede apreciar un aspecto similar al siguiente:

///#source 1 1 /scripts/aScript.js
var MyScripts = MyScripts || function () {

    var helloWorld = function () {

        alert("Hello World!");
    };

    return {
        sayHello: helloWorld
    };

}();
///#source 1 1 /scripts/bScript.js
var MyCompany = MyCompany || function () {

    var clickHandler = function () {
        MyScripts.sayHello();
    };

    return {
        click: clickHandler
    };

}();
///#source 1 1 /scripts/cScript.js
window.onload = function () {

    document.getElementById('btnAction').addEventListener('click', function () {

        MyCompany.click();

    });
};

Por último, tenemos el resultado final en myBundle.min.js, el cual es que debemos asociar con nuestra vista, y su correspondiente source map.

Llegados a este punto, ya podemos modificar nuestro código de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
    <title>Bundling Web Essentials</title>
</head>
<body>
    <input id="btnAction" type="button" value="Click">
    <script src="scripts/myBundle.js"></script>
</body>
</html>

Además, gracias al source map generado, podemos disfrutar también de la depuración de estos scripts en producción:

myBundle.js source map

¡Saludos!